Image compression and next-gen image formats
The Next Generation Image Formats
Put simply, next generation (next-gen) images are image formats that have superior compression and quality characteristics to their JPEG and PNG ancestors. These next-gen image formats offer the dual benefit of taking up less data while maintaining a high level of quality. So to summarize:
“The Next Generation Image Formats reduce image file size, without any perceptible drop in quality.”
JPEG2000 and WebP are the two most famous next-generation file formats. AVIF, the third one, is also on the way.
What does Google say about that?
If you have used Google PageSpeed Insights, you have likely been given the recommendation to Serve images in next-gen formats, see example in the image below.
The reason for this is not that next-gen images “magically” improves your websites, but rather that the images are smaller (with equal quality) and therefore makes the size of the site smaller, which in turn will make it load faster.
In 2014, Google revealed that using WebP images for the thumbnails of YouTube videos reduced the page load time by 10%. They confirmed in the same news that WebP is a much faster image format than the other image formats, and they are working on making it better.
Image Types: Raster Images and Vector Images
Before we dive into more details about next-gen image formats, let’s first start with quickly explaining imagetypes. Basically there are two basic types of images, raster images and vector images.
Raster
The raster images are composed of pixels. Some examples are PNG, WebP, and JPEG. In the raster graphics, arrays of pixels of various colors form the image.
Vector
The paths are the building block elements of vector images. Mathematical formula guides their shapes and the color that either fills it or borders it.
Regardless of size, vector images retain their appearance. The reason is that a mathematical formula is there to dictate the rendering of an image. Infinite scaling of vector images is possible.
Which one is better?
Depending on the purpose, the different type properties works better. An image with lots of gradients and hues, raster works better. When lines are defined, and colors are less diverse, vector format is better.
Vector images are, therefore, perfect for icons, logos, and 2D graphics – while raster images are the choice for people, products, and photos. Are you looking for high image quality native to vector images with raster ones? Well, for that, you need big resolutions. That will impact the file size accordingly.
So the solution is to compress the raster images, so the web page does not take much time to load. That leads us to the next paradigm of the article. That is the image compression, indeed.
Image compression
Image compression is a type of data compression used on digital images. The general purpose is to reduce their cost of image storage and/or transmission.
Image compression algorithms may take advantage of, for example, visual perception and the statistical properties of image data to perform the compression. Depending on what is the goal of the compression, one can use either a lossy or lossless approach.
1. Lossy compression
Algorithms discard less critical information to reduce the file size. There is a tradeoff between quality and image size. To get the desired size, we sometimes have to compromise on less desired quality. Quality loss is inevitable in lossy compression.
With lossy compression also comes the generation loss. Every time you compress the same image using lossy compression, it becomes less and less recognizable.
The image above — quote by Smashing Magazine’s “The WebP Manual” — depicts three JPEG encoders which, at the lowest end of the quality spectrum, slightly outperform WebP. Please note that as the quality increases into usable ranges, WebP easily outperforms other encoders.
But how about recompressing from lossy sources? Smashing’s Jeremy Wagner ran several tests.
“To figure out the impact of lossy compression on file size and visual similarity, I recompressed JPEGs in the research image set from the various JPEG encoders (…). I also did the same for lossy WebP images at the same quality setting of 75.”
While the file size was similar for WebP (still a bit better), it is clear that WebP can save file size.
Here is how Mr. Wagner points out in his book. “Without degradation in perceptible visual quality.”
2. Lossless Compression
Lossless image compression works the opposite way. Instead of approximating data positions, lossless image compression uses exact matching to place data points in their specific places.
Images do not lose any quality, as compared to the post-compression but render much larger file sizes.
While lossless compression makes images look much better, dealing with large file sizes can bog down your server or make websites load slower than usual.
As you can see in the graph above, using WebP versus PNG is a no-brainer. While PNG optimizers do a better job of reducing image sizes, WebP is a whole other category. What’s more important is that there is no risk of sacrificing visual quality to achieve shorter file sizes.
Image Encoder
Images need to be prepared in a way so that different computers and browsers can support and display them. This process of preparing images for browsers and software can be referred to as image encoding.
During the encoding, high-quality original image files often have to go through some changes. These changes could be in light of, for example, codecs and displays. A variety of image encoding programs are available for encoding. Usually, every image format has its encoding software. There is a JPEG encoder, a WebP encoder, etc.
In the previous images different encoders are compared for JPEG and PNG. Notice that the encoders produce different results.
Why starting with JPEG Images as Master Image is the wrong approach?
When you start from optimizing a JPEG image, you switch from one lossy format to another. That is not the right way, in normal circumstances. The best method is to start with a lossless master image and convert to lossy formats in parallel rather than in sequence. It gives the best results.
However, for many websites, this is likely what’s going to happen in real-world use cases when people convert images to WebP.
The WebP Image Format
WebP is an image format that utilizes both lossy and lossless compression formats. The files’ names end with .WebP extension. It has been around since 2010 now.
WebP image format was developed by Google to reduce the size of images tactfully. In a way, that quality sacrifice is not necessary for storage space. WebP images make the web faster, with smaller, richer photos for developers to use.
WebP lossless images are 26% smaller than PNG files and up to 34% smaller than lossy JPEG files at an equivalent structural similarity (SSIM) quality index. Moreover, at the cost of just 22% additional bytes, WebP lossless images support transparency. In some cases, lossy WebP also supports
Google Chrome, Edge, The Opera Browser, and many other tools support WebP.
Now that we know what WebP is, in basic terms. It is time to compare WebP to other contemporary image formats that are popular.
WebP vs. PNG
PNG is probably the most valuable image format currently on the market after WebP. PNG supports transparency, which is a critical element of web design. Transparency lets you structure images so that they don’t conflict with each other while retaining a consistent design framework on your website. WebP, as we know, supports transparency, which makes it the best choice for web designers who want the freedom that transparency provides. WebP offers 26% smaller file sizes than PNG, while still providing transparency and the same quality. WebP loads much faster than PNG images due to file size. Speed is a big deal. The way that WebP is structured, it only loads the image with the smallest file size at the time. So, if you had a PNG image that was smaller in file size than the WebP file (unlikely), your PNG image would load instead of the WebP image. Or, more likely, your PNG image would load for Safari users, and your WebP image would load for Chrome users. Chrome and Opera users would load your website faster than Safari and Firefox users if you took advantage of WebP.
WebP vs. JPEG
There isn’t much more to say about this. WebP vs. JPEG is a no-brainer.
WebP offers a better package than JPEG as an image format. The only (historical)downside in this battle is (was) that not all browsers supported WebP, and in those cases also a JPEG had to be provided.
This extensive WebP compression study observed that the average WebP file size is 25 to 34% smaller than the JPEG file size at the equivalent SSIM index.
Note also that there are no differences between the JPG and JPEG formats. The only difference is the number of characters used (the letter E).
JPEG2000
JPEG2000 was until recently the only next-gen format supported by Apple. It was the best possible alternative for JPEG, which never made it big. The same group created it in 2000. At that time, it was the next generation of images, because JPEG 2000 was a much better image solution than the original JPEG. During this year, some news pointed out that in the latest version of macOS, in the developer notes, it has WebP image support for the first time in Safari.
AVIF image format
While WebP is on the verge of replacing JPEG and PNG, another format ‘AVIF’ is already looking to replace it. Some reliable sources claim that AVIF outperforms WebP. According to Daniel Aleksandersen, tested AVIF against WebP and JPEG images and found it better than both. His study concluded that the compression rate of AVIF was much better than that of WebP.
Today, we need a format that is widely supported, has better image compression efficiency, and a more wide feature set. AVIF is a rising image format with all these pros. Though it provides superior compression efficiency, it still is at an early deployment stage. It seems like AVIF will have to wait in line behind WebP. As per this article from February 2020, Netflix plans to use AVIF for encoding HDR image assets. It shows many examples that explain why one would prefer AVIF over WebP.
Summary: The Benefits of Using Next-Gen Formats
Next-gen formats are the future of the web. They take much less time to load, consume fewer data and less space, and enhance the user experience of the website they load on. They are also better from an SEO point of view. Search engines tend to rank the websites with next-generation image formats quickly. SEO experts and web masters now have to look at image optimization with a whole new angle.
Unfortunately, some browsers and machines still have compatibility issues with the next generation image formats. To ensure maximum quality for your users, you may use external services to convert your images for you.
