Optimize your photos for speedy presentation

When presenting pictures in a blog or on a website they are viewed by the reader in a browser. The photos are rarely shown full-screen. As the page is opened there is a short delay for the pictures to download. Depending on the users Internet connection speed and the number and size of images, this may be just a moment or it can be an annoying wait. There is some control we can exercise to minimize this time. Fewer and smaller pictures is one way, but even without compromising the look and content there are some steps to improve the presentation. Before I explain my approach, take a look at this photo:

If you have not already done so, click on the image for a larger size view. The photo on this page is not of bad quality, is it? I don’t mean artistic quality, but how well detail and colors are rendered on the page. A bit of explanation for my less knowledgeable readers: To show a picture in a browser window, that picture has to be downloaded from some server on the web, and possibly rescaled, before it can be displayed. It stands to reason that this can be done faster for a smaller file size.

The size of the file of this picture as it came out of the camera was 8.5 megabytes. It would take a long time to download that file. The file size of the picture on this page is only 75 kilobytes, (kB), less than a hundredth of the original! Even the large picture you saw by clicking on the photo has a file size of  only 790 kilobytes. More than ten times larger, yet less than ten times the size of the original.

What I did, and what you can do as well, is to reduce the size of the picture. On this page it is 540 by 361 pixels (this may show slightly different in some browsers). There is just no need for the full size of about 3800 by 2600 pixels., even the large view is just 1200 by 803 pixels.

There is one other step I took in reducing the file size. The photo here in in JPG format. This format allows file compression to different quality levels. Compressed to the size here, at quality level 100% yields a file size of 222 kilobytes. The picture above is compressed to 80% quality, reducing the file size about three times more to just 75 kB.

Can you tell the difference? Hardly. Only when the image is inspected at large scale do the compression artifacts show.

The left image above shows an enlargement of the bee photo  – 80% quality, the one on the right of the same photo at 100% quality. Click the picture to see it larger. Note that there is really no detectable difference in the fine detail. Differences show up mostly in the otherwise smooth areas. So, for essentially unnoticeable differences, we get a three times file size reduction!

Can you do this easily? Certainly. I use Windows Live Photo Gallery. When processing JPG imageimages there is a setting to define the compression level – quality. The default setting is 98%. Click the File tab > Options > Edit. Set the slider to the desired quality level. This will be applied when you edit, export, or resize a picture.

Warning! JPG is a “lossy” compression technology. When compressed, some detail is lost and some “artifacts” show up. This cannot be reversed. So keep the quality setting at a high level when editing or enhancing the photo. Apply the lower quality as the last step when resizing or exporting the picture. Be sure to return the setting to the higher quality level as Live Photo Gallery remembers the last setting.

Please also visit my blog on “things photographic”: Café Ludwig



About Ludwig

Lending a helping hand where I can. . . My motto: If it is worth doing, it is worth doing well.
This entry was posted in Blogging, Digital Photos and tagged , , , , , , , , , , , . Bookmark the permalink.

8 Responses to Optimize your photos for speedy presentation

  1. technogran says:

    Nice post Ludwig which explains all of this very well. Thanks

  2. Pingback: Sourcing blog post images from SkyDrive | This 'n That

  3. Fred Scott says:

    I really don’t want to use MS in storing my pictures as they took away all my family pictures once before and I never had any duplicate of my photos printed out its taken a lot of space from my collection and seems to be lost for ever and that was MS Picture program and I have asked MS what other chance have I got to receive them and MS never answered what would you do when MS stole my collection of pictures so can’t trust MS.

    • LudwigKeck says:

      It is most unfortunate that Microsoft discontinues products and services at what seems like just a whim. Sorry that you lost your collection, wish there was something i could do. I will keep your sad experience in mind and recommend to readers to not entrust their documents and photos to just one online service. Another example is the Clubhouse. You got to this post most likely from the Windows Explore newsletter. It – under the wrong byline – got to a Clubhouse copy of my post. Yet several weeks ago the Clubhouse was closed – without announcement or fanfare. I can’t log in anymore.

  4. Fred Scott says:

    So much for that never truss MS

  5. Chuck says:

    Nice, but I prefer to use the program “Photo Resizer Pro” At only $10 and updates as long as you own the program are free it works much easier. Can handle batch conversions and lets you pick the quality or image size you need in the final version without destroying the original picture. It shows you the before and after image if you are doing a single picture and can handle a multitude of features during conversion.

    • LudwigKeck says:

      Thank for your comment and lead. The current price of “Photo Resizer Pro” is $29. That sounds like a good, useful program when you need to process a large number of photos.

  6. Pingback: A collection of posts « Live Writer Basics

Comments are closed.