Make your site faster with Next-Gen image formats

First a lesson in history.

Our image formats are old: GIF's were invented in 1987. The first JPEG standard was issued in 1992 and PNG's came to life through a W3C Recommendation in October 1996. I know the 90's are not that far in the past, but we've been over 30 years and we're still using the same formats.

Isn't it time to upgrade?

There is a new generation of image formats that fortunately bring a lot of innovation. Types such as JPEG 2000, JPEG XR and WebP are modern formats with superior compression techniques, resulting in excellent quality for the modern web user. As a result, you get smaller files of the same or better quality, which improves the speed of your site. Of these 3 types, WebP is the most efficient, with often up to 30% more compression compared to JPEG XR and JPEG 2000.

The standard format for HDR images. JPEG XR uses more advanced compression techniques compared to the original JPEG format.

This is the latest iteration of the JPEG format. It uses lossless compression with minimal sacrifices in terms of visual quality.

This format supports both lossy and lossless compression. WebP lossless images are up to 30% smaller than images in PNG or JPEG format.

These image formats are newer and therefore they also have newer and/or more optimized techniques. Let's highlight a few aspects:

Performance
JPEG 2000, JPEG XR and WebP are image formats with superior compression and quality characteristics compared to the older JPEG and PNG counterparts. Encoding your images in these new formats gives you smaller files. This means that the visitor will have to download less data and see the image faster.

SEO score
SEO scores depend on complicated algorithms, where a lot of parameters are taken into account to score your website. One of those parameters is the speed of your website, where loading time and bandwidth used are important. The smaller your website files, the faster they load. And in a competitive online world, that counts for a lot. So you benefit from not sticking to PNG and JPG.

Keep in mind that generating WebP, JPEG XR and JPEG 2000 images has an impact on the performance of your server. These techniques need more processing power than JPG or PNG. However, in most cases this is negligible. Only for sites with very limited resources this may cause problems.

Let's take a look at some very popular media sites:

Humo.be: only WebP;
Tijd.be: no support;
Demorgen.be: only WebP;
Hln.be: no support;
Vrtnws.be: no support;
Vtm.be: no support.

Here it appears that the use of Next-Gen remains limited. Only humo.be and demorgen.be have deployed the WebP format. JPEG 2000 or JPEG XR seem to be nowhere available.

However, if we take a look at the statistics (via W3Techs), we notice that WebP is only used by 0.3% of all websites. For JPEG XR and JPEG 2000 there are even no statistics available.

So there is work to be done.

So for the time being there is little adoption of the new image formats. Why is that? We are looking at the support of these formats across the different browsers. We use caniuse.com for this.

JPEG XR

JPEG 2000

WebP

As you can see, no browser supports all formats. There is at least one type for each browser:

WebP has the widest support: Edge, Firefox, Chrome;
JPEG XR only works in IE11 (which will soon be End Of Life).
JPEG2000 is only supported by Safari.

In principle, you can currently offer a suitable solution for all visitors. However, the use of so many different types makes it technically more complicated to find the appropriate format for each browser.

Webp, the winner?

In the release notes of Safari 14 we find a small sentence that will change the situation: "Added WebP image support. Safari 14 will be part of macOS 11 and iOS 14 and will be released in the fall of 2020.

This will ensure that all browsers with a significant market share support Webp, which in turn will encourage web developers to include this in their solutions.

Next-Gen image formats provide smaller images with the same or better quality. So your site will be faster and more performant because the user needs to download less data. Since the loading time of your website is usually the determining factor whether or not a visitor will read your content, every millisecond counts.

WebP seems to be the big frontrunner and has quite good support for browsers.

If you want to look to the future and take advantage of the advantage of next-gen image formats, we recommend implementing the WebP type. This way you already support the most commonly used browsers.