Question: Picasa, Blogger, photos, load time and optimization

Diana Studer, a photographer in South Africa, asks via her blog post questions about how she should be saving her photographs, what compression techniques and sizes she should be using, and how that will affect the loading of her web pages and the photographs within it. Her goal is to get the highest quality images saved and into her blog, but her fear is that these larger file size images will be detrimental to the load time of her pages and perhaps discourage her viewers from sticking around.

I told her: "your page loaded quickly, including the images, and this blog post partially explains why."



When you add an image into your blog, Blogger asks you which size that you want, small medium or large. While you're looking at that information for sizing, what Blogger is doing is rewriting the URL to your image within Picasa and putting that sizing information into the URL.

Take this image URL from this post:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73NXxYJT2lhGLJYQWNw9QoSQKZUbBO1TQxsXqiweKActMQ66Plz3mgqDq03nubftUbJeiUVkpj2ly9_a5CWH1fhiSEvOwHy0MBDXgSc74I8Pwq3HlRr_YBwiID0JaXnsrH26rRCDlfT0/s640/3+SA+bulbs.jpg

Do you see towards the end of the URL where it says /s640/ ? That's telling Picasa "create a version of this image that has a maximum dimension of 640 pixels. Picasa/Blogger is automatically creating a version of your image resized down to fit optimally in your blog post (based on the size selection that you choose) so it's not returning an image bigger than is being used. Clever, right?

Open that image URL in a browser window. Change the numerical value from 640 to... 1000. You'll see that the returned image is now bigger. You can also change the 640 to 64 and you'll see it downsize.

In this way, Blogger/Picasa is able to keep your pages loading fast by only downloading the image size that your blog post requires.

By the way, to access the FULL image via those links, you would change the 640 to be 0 (I know, very weird) like so:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73NXxYJT2lhGLJYQWNw9QoSQKZUbBO1TQxsXqiweKActMQ66Plz3mgqDq03nubftUbJeiUVkpj2ly9_a5CWH1fhiSEvOwHy0MBDXgSc74I8Pwq3HlRr_YBwiID0JaXnsrH26rRCDlfT0/s0/3+SA+bulbs.jpg

So what do we recommend for compression?

If you want to take advantage of Google Picasa's free image hosting, yet have the highest quality (not biggest size!) image being served for your page, we recommend saving your image with the least compression available by your photo editing software.

This would translate into:

  • Resolution of 72
  • Maximum image dimension of 2048 pixels
  • And when saving (such as JPG or PNG), choose the highest quality possible

If you have a resolution of 72 and maximum dimension of 2048, for the purposes of Picasa and your Blogger blog, you don't need to worry about making the image size smaller by adding more JPG compression. Picasa will take care of that by resizing your image down for the purposes of displaying in your blog post, and if the user wants to view the image in its full glory, that's a mere click away!

Comments

  1. I shall tuck this in my blogging tools bookmarks - then I can find it when I prepare next Friday's post.

    ReplyDelete

Post a Comment