There's still seats available in my Chile Total Solar Eclipse and Croatia Waterfalls and Culture workshops.

Image compression and size analysis

|

Image compression and size analysis.

When we’re sending images across the internet for one reason or another it’s good to know what’s happening as we consider file types and compression options. There’s also a few tricks we can use to further squeeze out a few K of file size if we’re ultra-concerned about the weight of our web pages (If you’re not concerned, please consider making your images smaller so that we don’t have to download unnecessary kilobytes which makes for a better user experience). After all, a good user experience is important and if we make the visitors to our website download more information than is necessary, we’re doing them a disservice. Plus, most folks are on limited data plans, by not chewing up their data use on their phone we’re making them happier as well, though they may not know to thank you for it.

For each example below I exported the images from Lightroom using the TIFF option and I sized it as 1,200 pixels on the long edge. While each unique image is a different dimension overall, i.e. no two are the same, we can still get a pretty good idea by analyzing each image with the different compression options chosen. To save each sample in this test I used the “Save for Web” function in Adobe Photoshop with the following parameters.

  • A: JPEG Very High Quality 80
  • B: JPG Medium Quality 50
  • C: JPG Low Quality 10
  • D: PNG-8, 256 colors
  • E: PNG-24
  • F: GIF, 256 colors
  • Aa: Same as A, but make it B&W (still RGB color space, just remove all saturation)
  • Ab: Same as A, but use PS to selectively blur unimportant parts of the image

The results, North Head Lighthouse, Cape Disappointment State Park, WA

So let’s take a look at the first image with all the options considered.

Image A is 250KB. That’s a fairly large file, and if you had a need to show it that large at such a quality you’d be justified.

However, most users won’t see the difference between this image and image B which comes in at 107KB. This is less than half the file size! Just think how much time you can save your users by compressing your images just a bit.

Let’s look at C, Low quality JPG. It comes in at 40KB and I’d argue it’s too much of a loss. The image starts to show the JPG compression artifacts and it’s unacceptably low quality.

Image D, PNG-8 with only 256 colors, is rather tough to accept too since it’s even larger than image A by about 70K, and it only has 256 colors, not good.

And don’t get me started with image E. At 1.1 MB, if you’re using PNG 24 for your photography site, please stop. The quality is amazing, but it’s too much. The power of the PNG graphic is that you can have alpha transparency and it supports anything between 2-16.7M colors. But for straight photography it’s not a good option.

Image F, GIF format, is even worse. It’s limited to 256 colors like image D, but it’s an extra 116K larger in file size.

Making it B&W or slightly blurry.

Now it’s time to take a step back and we’re going with JPG high quality 80 with image Aa. But this time we’ve eliminated all the saturation. This causes the JPG algorithm to do different magic on the image. Check out the file size savings, a total of 61KB is saved just by getting rid of the saturation.

And with image Ab, JPG 80 with selective blurring, it’s not the same amount of savings, but by selectively blurring the “non-essential” parts of the image we allow the JPG algorithm to do even more magic and squeeze out a few K in file size. This time I saved 23K vs the non-blurred version.

How does brightness of an image affect file size?

The image and compression settings are the same between these two options. It’s just that one is lighter and one is darker. You can see that the darker image saves about 16K on the quality 80 JPG compression setting.

And when it comes to quality 50 JPG compression settings, there’s only a savings of 7K in the darker image. A larger savings is had with the higher quality JPG settings.

Different images compared

Now let’s take a look at how different images compare. These images were chosen to represent a variety of different amounts of detail.

The first image we’ve seen already. It has what I would call a medium amount of detail. Yet it’s also bright so we’d expect it to be somewhat larger in file size, even if just a few K.

The second image is slightly darker, so we’d expect it to be slightly smaller in file size, but also notice how much is “naturally blurry” anyway due to the clouds in the sky. And notice the file savings because of it. These are nearly the exact same pixel count and the life guard station pic is a whopping 98K smaller at this highest quality setting!

And finally we have the very detailed image from Plitvice lakes. With all the detail needed to accurately represent in the image the JPG algorithm can’t have as much freedom in compressing that file. But when selective blurring is added to the mix we still get some savings but we don’t get as much savings. For the lighthouse image the selective blurring saves about 9.2% of file size. With the wooden path image the savings is only about 6.4%.

The bottom line is that the image is going to be larger when it has more detail to preserve. Note too, this image is quite a bit narrower than the others are tall (recall that we’re looking at images that are 1,200 pixels on the long edge) so there’s even fewer pixels overall to deal with. Because of all that detail in the image it simply has to be a larger file size if we’re interested in keeping that detail.

Further considerations

These images are certainly considered fairly low resolution. This analysis is intended to illustrate the principles or behavior of what happens when we have different subjects in our images and how the JPG algorithm handles it. The principles can also be applied when working with higher resolution images, though the true benefit of learning this information is about making things efficient with our websites and other ways we share our images online (at least ways that don’t involve facebook and the compression they apply to each image, notice how I was able to steer clear of that until now…)

One more thing to note, The examples shown here may not show the difference in quality between the settings. They were saved separately and are only meant to be used to show what happened when I saved these out of Photoshop. I encourage you to try this for yourself on your images and see what happens with your images and the savings of a few K that you might be able to enjoy.

WP-Backgrounds Lite by InoPlugs Web Design and Juwelier Schönmann 1010 Wien