Theoretical picture excursion

One of the most common reasons for poor performance is too large and poorly optimized images. The problem became even more complex, through Responsive Web Design, different image sizes had to be provided for the different devices.

In the beginning was the pixel

Often I have observed how 2 megapixel photos were provided as PNGs or already uploaded to the media libraries of the CMS. But I've also seen relatively simple infographics with full color being included as JPGs. The result is then unnecessarily large image files.

So which image format is best? That depends on the amount of information in the image. In principle, each pixel of an image represents information, in the case of a JPG image it is the mixing ratio of red, green and blue. That is three color channels with 8 bits each (that corresponds to 256 color gradations, results in a color depth of 16.777.216 colors), in total that is 24 bits per pixel (in a PNG with alpha transparency the alpha channel is added).

Now let's take a screenshot with 1920 x 1080 pixels, that makes 2.073.600 pixels. Summing with the bits per pixel, that then makes about 50 million bits, which equals 6 megabytes. The amount of data, in this case, depends only on the number of pixels, but not on the actual image information. This is not really optimal, which is where compression algorithms come into play (they were very important especially in the early days of the WWW). The most common ones today are JPEG and PNG.

Image formats

A compression algorithm works, roughly speaking, by grouping the same color pixels. So example we have an image with a solid square with 200 pixels of the same color. Instead of storing 200 pixels with 24 bits of color each, the color value is stored only once and then assigned to 200 pixels. In detail, of course, this is more complex and differs depending on the image format.

PNG compresses lossless in contrast to JPEG and has an alpha channel. Thus as a rough rule of thumb, detailed pictures rather as JPEG and rather simple pictures or Freisteller acts then PNG. But this is not always true, a detailed image can be compressed as a JPG smaller, but it may be that you lose all the details. PNGs can also be compressed further, here the number of possible colors is reduced, so from 24 bits to 8 bits.

Comparison of the images

First a simple example, an image with 1920 x 1080px, fully filled with one color. It makes no difference which color is chosen, it has no influence on the size of the image, but the choice of the image format and the compression or bitrate.

Format	Qualität	Größe
PNG	24 Bit	39 KB
PNG	8 Bit	0,3 KB
JPEG	100%	59 KB
JPEG	80%	34 KB

You already have to compress JPG to get it to the level of PNG24 until you convert to PNG8. Let's extend the example with some elements.

Format	Qualität	Größe
PNG	24 Bit	40 KB
PNG	8 Bit	1,3 KB
JPEG	100%	118 KB
JPEG	80%	67 KB

The winner here is clearly PNG, both with 24 and 8 bits, while JPEG is at a disadvantage. Let's make it a bit more modern with gradients and shadows.

Format	Qualität	Größe
PNG	24 Bit	655 KB
PNG	8 Bit	71,3 KB
JPEG	100%	438 KB
JPEG	80%	82 KB

Such image assets are clearly the strength of JPEG, while PNG can only score in the 8-bit variant. That was a relatively simple example, now let's see how a screenshot of a Web UI would behave.

Format	Qualität	Größe
PNG	24 Bit	244 KB
PNG	8 Bit	72,6 KB
JPEG	100%	365 KB
JPEG	80%	170 KB

In contrast to the previous example, PNG wins here again. With the amount of image details in JPEG, you have to increase the compression to bring the amount of data close to the level of PNG. With the price that the image details suffer from it, quickly such screenshots look washed out or blurred. Contrast this with a photo of a landscape.

Format	Qualität	Größe
PNG	24 Bit	4,1 MB
PNG	8 Bit	1,1 MB
JPEG	100%	2,5 MB
JPEG	80%	724 KB

There are many different details in a photo, which the PNG compression algorithm has slight problems with, unlike JPEG. Some of these details are quite low contrast and therefore difficult to see with the human eye and that's where the compression comes in. PNG8 could be an approach, but you have to expect that the color fidelity will suffer.

Other image formats

The above examples should show that it can be worthwhile to take a closer look. In case of doubt, you simply have to try out whether the image has become smaller under PNG or JPG, but never keep an eye on the visual impression. But it does not have to end with the two formats.

For "simple" graphics (e.g. logos, infographics) that you would otherwise have exported as PNG (e.g. logos), it can be quite worthwhile to use SVG. One of the advantages, the asset is independent of the resolution and pixel density of the display. It scales without loss of quality, the file size always remains the same. Another advantage, you can manipulate SVGs via CSS. Instead of exporting a logo in several variants (e.g. multicolor, then monochrome light and dark variant), there is only one version which is modified afterwards with CSS. And yes you can animate SVGs.

In the field of JPEG, some alternatives have also emerged in recent years, but they failed mainly because of the adaptation. Until Google brought the WebP format into circulation. WebP generally compresses better than JPEG (about 30%), while offering better image quality. Apart from IE11 and Safari < 14, you can use the format on all current browsers.

But that's not all, AVIF is on its way to replace WebP. This time, the open source image format was not pushed by Google alone, but by an alliance of industry giants such as Google, Netflix, Apple, Mozilla and many others. This promises at least a broader and faster adaptation rate. In contrast to WebP, AVIF achieves up to 50% compression, with better image quality than JPEG. In addition, there is an alpha channel, support for high dynamic range images (HDR) and animations. Currently usable with Chrome 85+ and Firefox 77+ with feature flag set.