One of the most popular tools to benchmark the loading speed of a page is Google's PageSpeed Insights.
When using Cloudinary to deliver images, it's possible to use Cloudinary's f_auto,q_auto transformation parameters to automatically optimize your images by delivering the optimal format for each requester's user agent (f_auto) and by making a compromise in visual quality (usually barely perceptible) which results in a smaller file size and thus, faster delivery time (q_auto).
There are some cases that even when using f_auto,q_auto, PageSpeed Insights shows that the image can be further optimized. This can happen for several reasons:
1. Chroma subsampling
Google's PageSpeed Insights tool assumes that 4:2:0 chroma subsampling is always OK for any image, so if it sees a non-chroma subsampled image, it recompresses it with chroma subsampling and this will indeed make the file smaller - at the cost of introducing compression artifacts.
When using Cloudinary's f_auto,q_auto, in most cases the image would be delivered in a webp format which is chroma subsampled, when applicable.
However in some cases, using chroma subsampling would introduce significant artifacts to the image, making it look worse. In those cases, our q_auto algorithm would opt to deliver the image in a format that does not support chroma subsampling, like the jpeg format for example.
In these cases, PageSpeed Insights would then say that the image can be further optimized.
If you don't care much about such artifacts it's possible to use q_auto:low(or q_auto:420) in order to force chroma subsampling and make Google's PageSpeed Insights tool happy :)
2. The image is resized by HTML/CSS while the image itself is large.
In some cases, a larger than necessary image is being loaded on the site, and then resized using HTML or CSS.
For example, the image below is delivered at its original size of 864x576 px. However, it is resized and rendered in a 200x200 rectangle:
<img src="https://res.cloudinary.com/demo/image/upload/sample" width=200 height=200 />
If the original image is larger than the rectangle that it is displayed in, PageSpeed Insights can detect that.
What can be done in this case is to use Cloudinary's resizing capabilities to deliver the image in the proper proportions:
<img src="https://res.cloudinary.com/demo/image/upload/h_200,w_200/sample" width=200 height=200 />
This would make sure that the image is delivered in the same size it is displayed in.
3. ICC profile might enlarge the image.
There could be cases where images may include an ICC profile, which is a metadata value that's embedded into the image.
In these cases, the ICC profile can increase the file to a larger size than necessary. PageSpeed Insights also detects these cases and this results in an alert as well.
In order to handle these cases, it's possible to use the strip_profile flag (fl_strip_profile) to strip the metadata and remove the profile to reduce the image to its original dimensions.
Comments
2 comments
Does this apply to Google Lighthouse as well? I'm getting dinged for performance on images I have set to 'q_auto:low' in the query string, and it's showing the size as even bigger than the original size of the file in question in the media library.
Hi Micahel
I just responded about that on the forum post (https://support.cloudinary.com/hc/en-us/community/posts/360010136699-Image-Optimization-not-working) and Cloudinary Community page. Looking forward to your response.
Please sign in to leave a comment.