performancelighthouseresponsive-images

Why Lighthouse complains about my responsive image sizing?

Lighthouse complains, that my images are not properly sized. Although, im giving a pretty broad selection of images, with sizes specified pretty much on point.

Heres my image implementation:

    <img class="image__img ng-star-inserted"
     sizes="(max-width: 464px) calc(100vw), (min-width: 465px) and (max-width: 767px) calc(100vw), (min-width: 768px) and (max-width: 833px) calc(100vw), (min-width: 834px) and (max-width: 1023px) calc(100vw), (min-width: 1024px) and (max-width: 1365px) 100vw, (min-width: 1366px) and (max-width: 1919px) 100vw, (min-width: 1920px) 100vw"
     srcset="./img/dalyan-beach-turkey-1364201301_350.jpg 350w,./img/dalyan-beach-turkey-1364201301_760.jpg 760w,./img/dalyan-beach-turkey-1364201301_980.jpg 980w,./img/dalyan-beach-turkey-1364201301_1200.jpg 1200w,./img/dalyan-beach-turkey-1364201301_1520.jpg 1520w,./img/dalyan-beach-turkey-1364201301_1960.jpg 1960w,./img/dalyan-beach-turkey-1364201301_2560.jpg 2560w,./img/dalyan-beach-turkey-1364201301_3840.jpg 3840w"
     src="./img/dalyan-beach-turkey-1364201301.jpg" width="3840" height="2560"
     style="object-fit: cover; aspect-ratio: 16 / 9; width: 100%; height: auto"
     alt="Vacation time">

So we have a lot of widths: 350, 760, 980, 1200, 1520, 1960, 2560, 3848

And still, for mobile, lighthous says the images are too big:

enter image description here

Here is the working example: https://szymon-pgl.github.io/image-size-test/

Anyone have an idea, how fine grained should the images be? I've seen in some Adobe implementations, they are going with just 750 and 2000: https://github.com/adobe/aem-boilerplate/blob/5e7bd30bfb33b8b4681499766adb5ec281691026/scripts/aem.js#L293

Solution

  • This audit is not complaining you don't have multiple image sizes (you do!) but that the JPEG files are needless big within those sizes.

    For example, the 760.jpg image can be compressed to be a more optimal JPEG with TinyJPG to be 19% smaller with no loss in clarity:

    Image compressed with TinyJPG

    Lighthouse reckons you could potentially squeeze it even further than that by saving another 10KB for a total of 32.8KB with the right compression but even the 20KB saving from TinyJPG is probably sufficient to stop triggering the Lighthouse warning.