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 images 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