Home Home

Image formats and why do they matter

Arseni Mourzenko
Founder and lead developer, specializing in developer productivity and code quality
130
articles
December 17, 2014

See also How does Yahoo's Smush.It work and why doesn't everyone use it?, from which this article is inspired from.

One question any web developer asks himself sooner or later is which format is the best format for images. The broad support of JPEG, PNG, GIF, WebP and TIFF in browsers doesn't help either.

A clueless coder may pick the wrong format and use wrong options, resulting in less-than-optimal image quality and huge size. An experienced graphical designer is expected to know which format and options should be used, resulting in high quality images with low bandwidth footprint.

Let's see how it works.

Example 1: 90% reduction

The first example is a photo. Nearly every photograph is stored in JPEG, but an inexperienced coder may hear somewhere that PNG is the best format, and prefer using PNG. This is what happens:

The PNG export of the photograph

Click to see the full-size 2470×1636 version.

The size of this PNG image is 5 992 591 bytes—nearly 6 MB, enough to make both the server bandwidth and your customers unhappy.

The JPEG export of the photograph

Click to see the full-size 2470×1636 version.

Here is the same image exported as JPEG. The JPEG compression level was thoughtfully adjusted to avoid losing visual quality: watching the images side by side, you normally can't tell which one is which.

The size of the JPEG image is 700 283 bytes, that is 683 KB: 11.7% compared to the PNG variant. We indeed achieved nearly 90% compression without affecting the quality of the image.

Example 2: 80% reduction

Now the clueless coder is convinced that JPEG images are much smaller than PNG ones, so he's using JPEG for everything. When he needs to store a logo, he chooses JPEG.

The JPEG export of the illustration

Click to see the full-size 1300×850 version.

Since lower compression levels make JPEG artifacts noticeable, he should push the levels up to 100—lowest compression, highest file size. He obtains a 68 348 bytes file (67 KB).

A more experienced graphical designer prefers PNG. Here's the result.

The PNG export of the illustration

Open image in new tab to see the full-size 1300×850 version.

By carefully adjusting the options, i.e. using a 8-bit PNG with 128 colors, he obtains the same visual result in a file which weights only 13 930 bytes (14 KB), that is 20.4% of the JPEG variant, that is a compression of approximately 80%.

Important notes about the examples

Although those examples show a difference of 80% to 90%, a really clueless coder may do worse. I knew people who were storing images in BMP format and were actually paid to create websites. There is always a way to screw things up and to achieve unnecessarily huge sizes without any visible gain in quality.

Having said that, both examples illustrate exactly what can actually happen when the website is done by inexperienced web designer or web developer.

The fact that many persons are using wrong tools makes things even worse. In those examples, I've used Photoshop to export the images in both formats. I would expect that different applications may perform differently when it comes to rendering final images, resulting eventually in poor quality coupled with excessive file size.

How to choose formats and options properly?

There are a bunch of rules of thumb which can serve as a guideline when exporting images:

  • JPEG is for photos. In photographs, JPEG artifacts are hardly noticeable. Moreover, unless you need something pixel-perfect, higher compression levels may have a huge impact while keeping photos visually correct.

  • PNG is for illustrations. If you have a vector image (such as a bunch of shapes, text, etc.), chances are, JPEG will create compression artifacts too noticeable to make the image ugly. Pushing the quality up to 100 might solve this, at the expense of high file size. PNG appears then to be a better choice.

  • 8-bit PNG is excellent for illustrations with only a few colors. If the image has blue text and green lines, there are chances 8-bit PNG will result in a very small file which will appear nearly exactly as a full 24-bit PNG.

But all those rules of thumb actually don't matter. What matters is experimentation. Don't just assume you should use JPEG because it's a photograph. Try other formats. Compare. Play with the options. Select 8-bit PNG and go down to 2 colors, see how ugly is that and then go up to a satisfactory result.

This leads to another observation: good software makes your life easier. Photoshop is great because it let you play with options with ease, show images side by side and visually determine which format and option is the most appropriate. Ensure you use an app which actually let you experiment effortlessly.