- Nico Bistolfi
When we see an image, we can infer, in most cases, if its image quality is enough or it is low. Our eyes tell us if there is some unexpected noise that makes us feel that any image isn't properly treated.
As users, we want to see excellent quality images when browsing the web, especially when booking or buying anything, it’s how you are able to see the quality of the product you are buying. We enjoy seeing every detail on an image when it doesn’t have blurry or pixelated areas.
Haven’t read the full Image Optimization guide yet? Take a look before continue reading!
Something else that we like as users, is for the images to load as fast as possible. No one likes to wait for the images to load, and poorly optimized high-quality images can take a while. We want to load images immediately, in a blink.
That's why we highlight the importance of delivering good quality images and offer the visitors an unforgettable user experience. We would like to share how we manage this challenge at Piio.
Talking about image compression
First of all, we need to talk about the relation between image quality and image size. It can be trivial to understand that we can achieve a higher image quality if we have more data. The problem is that having more data means having heavy images.
In many cases, more bytes to transfer over the net would impact the users and the provider. On the one hand, it will take too much time when the browser wants to download and display a large file, resulting in a bad user experience. On the other hand, many providers charge based on traffic, so a larger file size means more money to spend.
Therefore, our primary goal is to find the balance between image quality and the resulting file size.
But how can we get the best image quality with the smallest file size?
*Spoiler alert: there is no magic solution.
Next-gen Image formats
We understand that higher compression without losing quality is essential, don’t we already have solutions to achieve that?
These next-gen formats give us a solution for some specific context, but the main problem is that none of them works in all major browsers.
WebP doesn't work in Safari, Avif is only supported by Chrome, and Heif is still waiting for the first browser to support it.
Again, there isn't a particular format that solves our problems. Otherwise, we need to understand how every format works and how we can get the most out of them.
What does visual quality mean?
We can define quality as the degree of excellence of something, in this case, the visual excellence of images.
As digital images can suffer a wide variety of distortions when processing, compressing, and storing, we can degrade their image quality without knowing what we are doing wrong.
At Piio we make a great effort to deliver images at the greatest possible quality, but it doesn't mean that we can only rely on objective methods for assessing perceptual image quality.
If we only make decisions based on objective metrics such as Absolute Error (AE) or Mean Absolute Error (MAE), we can easily discard images because a lot of pixels changed (compared to the original image) but we forgot to review them whether the image is visually acceptable.
In the following image, we can see an example where the resulting image has high AE & MAE values but it's still of good quality.
Image Quality assessment beyond objective methods
When we compare both images by coloring in red every changed pixel we see that there are a lot of changes:
This is the first proof that objective methods don't help us enough.
In contrast, we have some perception-based models such as Structural Similarity (SSIM) & Structural Dissimilarity (DSSIM) that can be more helpful as they measure the perceived quality of digital images.
To understand how we use these metrics combined with the image formats that we explained before, we are going to detail how our process works briefly.
As you can notice, we don't assume that WebP or Avif are the best solutions when the browser supports them. We always analyze the results to make the right decision for every user.
In conclusion, there is no magic solution. We need to follow all the steps and deeply analyze all the results we get. But don't worry about all transformations and comparisons; Piio is here to help you deal with all this stuff with just a few clicks.