Chrome Lighthouse Screening "best practices" penalty on image size

[marteloge]

Hello!

I guess this is not a direct issue with this package, but I wanted to discuss it anyway.
Should I worry about lighthouse giving a penalty for using optimized images? I guess it has something to do with the aspect ratio of the screen. Does not chrome adjust for that automatically?

Example 1 - Use next-optimized-image:
Category "Best practices": penalty (< 100%)
Category "Performance": 100%

> Displays images with inappropriate size
Image natural dimensions should be proportional to the display size and the
pixel ratio to maximize image clarity.

Displayed size: 624 x 416
Actual size: 800 x 533
Expected size: 1248 x 832 --> 2x ratio

Example 2 - use a regular img with only one src (img with 2500px width):
Category "Best practices": 100%
Category "Performance": penalty (< 100%)

> Properly size images
Serve images that are appropriately-sized to save cellular data and improve load time.

Any ideas of how to deal with this? Ignore lighthouse or is there a proper solution to it? :)

[cyrilwanner]

Hello @marteloge
I think the problem here is that the images don't have the expected sizes.
Let's say you have a div with a maximum width of 624px and you want to display an image within it. Optimally, the image should have exactly the same size. If it is bigger (e.g. 800px), it just wastes data. Additionally, you will want to also provide a 2x ratio image for retina displays. next-optimized-images does not resize your images automatically, you would actually have to specify it yourself which sizes you need (with the ?sizes query param) and specify different versions in the srcset attribute or a tag.

But I'm currently working on the next major version of this plugin which is a complete rewrite and introduces many new features (currently available at the canary tag). One of those new features, the provided Img component, would solve your problem very easily. You can simply specify the sizes and densities you want and the plugin will generate everything for you (including fallbacks etc):

<Img src={MyImage} sizes={[624]} densities={[1, 2]} />

You could also add the webp prop to provide the image in WebP if the browser supports it or with the breakpoints attribute, you can provide different image sizes for desktop & mobile users.

So if you want, feel free to check out the canary version. It should already be quite stable, just a few features are missing before I'll publish it to the non-canary tag.

[marteloge]

@cyrilwanner Thanks! Really appreciate your answer :)

I am using canary - always nice to test out the newest and to be able to help out testing. A great feature with densities! I am using a full-screen image and the size of the double density image is quite bigger so lighthouse starts complaining about the performance. I guess I should not worry too much about it. I think density is a great feature, especially on smaller images where size is smaller in general!

[cyrilwanner]

Ah sorry, I didn't get it that you are already on canary. Thank you for testing it, everyone using it helps getting it shipped sooner!

Is the page you are talking about public or the code open-source? I would still be interested to investigate the cause for that, it could also help others or maybe there is also a bug where next-optimized-images does not generate the correct size.

[marteloge]

Thanks for reply! It is public - I tried out the density but did not get it to work. I have now removed the image so it is not testable at the moment (did remove it for design reasons - not because of the lighthouse score!). Whatever I did I got a penalty on one of the scores. This was a full-screen image. I am not sure if there is a problem with this package - maybe it is just the scores in Lighthouse that are too sensitive 🤷‍♀️