2

Google Lighthouse has a red triangle error which significantly impacts the Best Practices score:

  • Displays images with incorrect aspect ratio

I can understand why this would be regarded as an error with fixed-dimension raster images (and also with standard SVG vector images with explicitly set dimensions).

But in this case I'm displaying a small number of SVG flags on a webpage and the SVG flags display with certain dimensions in one part of the page and different dimensions in another part.

To enable using the same single SVG even when multiple instances of that SVG display with different dimensions, I use the attribute:

preserveAspectRatio="none"

This explicitly means (I would hope) that there is no incorrect aspect ratio.

But Google Lighthouse raises the error above, nevertheless.

At normal desktop browser size the graphics are quite small (either 27px x 27px or 27px x 18px) so, yes, I could potentially replace them with .png or .webp images.

But then I'd also need to bear in mind that the flag-image dimensions also increase in size very slightly at narrower responsive design breakpoints, so I would need a full set of fixed-dimension raster images for each breakpoint.

Is there any way I can instruct Google Lighthouse to ignore aspect ratio for SVG images which explicitly state preserveAspectRatio="none"?

2
  • Can't you just ignore this report of a problem? Feb 14, 2022 at 11:01
  • Of course. But - at present, at least - I'm trying to go beyond that.
    – Rounin
    Feb 14, 2022 at 11:07

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.