Image formats and why do they matter
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:
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.
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.
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.
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.