Friday 5 November 2010

photo posting - three

gleditzia flower
from flickr
uploaded directly to blogger and enlarged to 500 pixel width
uploaded to blogger, 400 pixel width

Here at last is the promised photo posting post. Apologies its taken so long. If you haven't seen the other instalments I talked here about what equipment I use and here about the simple editing I do to improve my photos. The last step is putting those photos online and I have a couple of tips. (And sorry I'm using Blogger and can't help with other formats.)

I think the best way to improve the look of your photos is to upload photos to Flickr first and then link from there. I find it quicker and easier too.  When you upload photos straight to Blogger they are stored in Picasa. For some reason I always find the directly uploaded pics are muted and slightly fuzzy and that used to really bug me (you can see the difference in the examples above) . Then I read about uploading through Flickr  and switched to that method. The difference is quite noticeable I think you'll agree, and with the recent changes to Flickr its now even easier to do.

First upload your pics to your Flickr account (you can get one of these free and they are a great way of sharing your photos, joining swaps, joining groups, seeing other great photos). Once uploaded go to the relevant photo page and click on the 'Share This' tab. Then click on the Grab the HTML/BBCode and you will be given a snippet of code to copy (I choose medium format here usually because my blog has a 500 pixel central column). Copy it and then go back and paste it into your blog post, in position. Importantly, make sure you are in the Edit HTML panel first.

posting from flickr
As I said my blog layout is modified. The central column is 500 pixels wide and I like my pics full width, so most often a medium format fits perfectly for me. There are seven other sizes to choose from in the menu so you most probably find one you like.

Occasionally I need to enlarge or reduce the scaling to fit exactly, especially those pictures in portrait format. But this can be done with some simple changes. They might seem complicated the first time you try it but are quite easy once you get your head around it.

Look at the html you've pasted in, say the width was only 400 pixels and you wanted it larger (see original code first followed by modified code in the example below). You can type a different width value straight into the code, but don't forget you have to change the height proportionally as well, or the image will be distorted. To find the right height work out your enlargement percentage by dividing the final size (500) by the initial size (400). In this example you get 125%. Look at the html and see the original height size (285). Multiply that by 125% and as you can see in the code below, 258 becomes 356 pixels. You can do this the other way round and start with the height and then calculate the width. If you are making a radical size change use a larger size photo to begin with, or it will end up fuzzy.

I really hope this isn't too confusing. There is nothing to lose though, any mistakes can be deleted before you post. Or like me, get a second layout blog specially to mess around in. If you have any questions please leave them below and I'm happy to try and answer them.

* Download Flickr Uploadr app here:
see comments for info.

Screen shot 2010-11-05 at 2.57.08 PM


  1. Thanks, Susie - you star! I did some recent posts on using photos but this post contained the vital clue I was missing. I was trying to insert the Flickr URL and it wouldn't work. Now I will try using the Flickr HTML code and insert it into the post in the Edit HTML format. Did I get that right? J x

  2. This is great! Who knew you were such a coder? Thanks so much.

  3. I've just found your blog and want to say a thank you for sharing your skills - I'm new to blogging and would love to improve the quality of my blog, and photo's are so important to that I think. i'll be trying out your tips (and a try-out blog, genius!) I'm hoping to post about blogging sometime soon and I'll be sure to link to your series.

    Thanks again, I'll keep following!

    pamela x

  4. A confession? I could never be bothered to nut out the Flickr thing even though I heard it was easy peasy (and it is - you just proved it). I figured I'd just keep blogging until my Picasa account was full and then go hang out on Facebook - or something...!

  5. Very useful info - thank you! (Eek, that sounded like one of those spam comments...)

  6. Great tip - thanks! Flikr definitely does seem to improve the quality of images, I don't use blogger but I'd noticed the same thing when I compare between typepad and flickr.

  7. Hey Susie, pardon my ignorance but what is the best way to get photos from my Mac onto flickr?
    It does seem to look hegely different and I am keen to have a go but like all things computer, I am a bit slow in working it all out.
    Thanks lovely. XX

  8. Glad the tips have helped people :-)
    For Kate and others, here's the link to download a special application called Flickr Uploadr.
    It makes uploading pictures much quicker and easier.
    Download and launch it and it will ask for permission to access your Flickr site.
    You can then drag and drop straight from iPhoto.
    Put the Flickr Uploadr icon in your dock and then in iPhoto just drag the thumbnail of the images you want over the dock icon to upload those pics. That will launch the application and if you go and look you can then add tags and sort into sets from the main window before you upload.
    Then it takes you to your Flickr page and you can start adding pics!

  9. I've just moved to blogger from Wordpress so this will be a small photo bible - I've definitely had the fuzzing effect already. Thanks!

  10. Thanks for these tips... I'm trying it ou on my blog at the moment it's great... thank you :)


Thank you for dropping by and commenting :-)