One of the most popular tools to benchmark loading speed of a page is Google's PageSpeed.
When using Cloudinary to deliver images, it's possible to use Cloudinary's "f_auto,q_auto" parameters to automatically optimize your images for speed and delivery.
There are some cases that even when using `f_auto,q_auto` PageSpeed shows that the image can be further optimized.
This can happen for several reasons:
1. Chroma subsampling
Google's PageSpeed 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 indeed be delivered in a `webp` format which is chroma subsampled, when applicable.
However in some cases, using chroma subsampling on images would introduce significant artifacts to the image, and would make the image look bad. In those cases, our `q_auto` algorithm would "decide" to deliver the image in a format that does not support chroma subsampling like the "jpeg" format for example.
In these cases, PageSpeed 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 tool happy :)
2. The image is resized by HTML/CSS while the image itself is large.
In some cases a larger then necessary image is being loaded on the site, and then resized using HTML or CSS.
For example, the below sample image is originally 864X576 px. However, it is resized and delivered 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, Google's page speed tool can detect that.
What can be done in this case is use Cloudinary's resizing capabilities to deliver the image in the fitting 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 rectangle 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 that's embedded into the image.
In these cases, the ICC profile can increase the file to a larger size than necessary. Google's page speed also detects these cases and alerts them as well.
In order to handle these sort of case, it's possible to use the strip_profile flag 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.