-1

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"?

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 1
    It looks like they did an update that treats SVGs as raster images. I wrote an answer to a different problem but with what appears to be the same root cause: https://stackoverflow.com/a/71079039/2702894 – GrahamTheDev Feb 14 '22 at 07:52
  • 1
    @GrahamRitchie - I'm running a series of tests and I've understood one thing: if you apply `preserveAspectRatio='none'` to an SVG then Lighthouse decides the SVG has the dimensions of a standard replaced element (`300x150`) and determines from that, that the SVG's intrinsic aspect ratio must be `2:1`. This overrides `viewBox` values. – Rounin Feb 14 '22 at 10:48
  • 1
    ... but, if you don't include `preserveAspectRatio='none'`, then changing the dimensions of the SVG via CSS, _won't_ lead to any visible change in the way the image displays,- that is, everything in the vector image (apart from the background, presumably?) will continue to display as dictated by the `viewBox` and the image won't reshape according to the updated CSS. – Rounin Feb 14 '22 at 11:24
  • 1
    Also, once CSS values suggest an `aspect-ratio` which diverges from that suggested by `viewBox` values, Lighthouse will report: _"Displays images with incorrect aspect ratio: Image display dimensions should match natural aspect ratio."_ – Rounin Feb 14 '22 at 11:25
  • 1
    In the instance above, even changing `width` and `height` attribute values in the html `` to imply an `aspect-ratio` identical to that suggested by `viewBox` values will not prevent Lighthouse from reporting the same error. So, what appears to matter most here is the discrepancy between CSS values and SVG viewBox values. – Rounin Feb 14 '22 at 11:32
  • 1
    Similarly, explicitly declaring `aspect-ratio` in CSS (which is, I suppose, more or less the same as declaring modern `width` and `height` attributes in HTML) will not prevent Lighthouse from reporting the same error, so long as the CSS `width` and `height` values don't suggest an aspect ratio identical to that suggested by `viewBox` values – Rounin Feb 14 '22 at 11:45
  • 1
    I tried removing the `viewBox` from the SVG (silly idea). Now, of course, the SVG isn't scaled and doesn't display on the web page properly (ie. only a tiny part of the top-left corner of the SVG displays). Also, we're back to the SVG defaulting to the dimensions of a standard replaced element (`300x150`) which leaves Lighthouse reporting the same error. – Rounin Feb 14 '22 at 12:01
  • 1
    So... the conclusions are: 1) Your SVG must have a `viewBox`; 2) Your SVG may not use `preserveAspectRation="none"`; 3) the CSS `width` vs `height` aspect ratio and the SVG `viewBox` aspect ratio **must** match; 4) Declaring the CSS property `aspect-ratio` or HTML `width` and `height` attributes will not help you [1/2] – Rounin Feb 14 '22 at 12:13
  • 1
    Example: If you have an SVG with `viewBox="0 0 360 360"` then you can display that SVG as an `` at _any size_ as long as it maintains an aspect ratio of 1:1 (e.g. `width: 24px; height: 24px` / `width: 36px; height: 36px` / `width: 48px; height: 48px` etc.). **But**, if you should want to style the same SVG-based `` as `width: 36px; height: 24px`, then you _must_ go to the trouble of creating a new SVG with `viewBox="0 0 540 360"` if you don't want Lighthouse to report an _incorrect aspect ratio_ error. [2/2] – Rounin Feb 14 '22 at 12:17
  • 1
    I understand the impulse to complain, but wouldn't the [Lighthouse issue tracker](https://github.com/GoogleChrome/lighthouse/issues) be the more appropriate place to do so? – ccprog Feb 14 '22 at 12:21
  • @ccprog - Rest assured there is no complaint, here. This is all about understanding and engineering. – Rounin Feb 14 '22 at 12:25
  • 1
    That is a great analysis, it is as a suspected then the `viewbox` is the key as in my other answer. I found it really informative and a great answer! – GrahamTheDev Feb 14 '22 at 14:58
  • 1
    Above all remember though, it is just a diagnostic item, so as long as it isn't causing layout shifts (increasing your CLS) you can safely ignore the issue. – GrahamTheDev Feb 14 '22 at 14:59

1 Answers1

1

Lighthouse reports the error:

  • Displays images with incorrect aspect ratio

precisely because the SVG includes the preserveAspectRatio="none" attribute.

In two specific contexts:

  • the SVG has no viewBox attribute
  • the SVG includes the preserveAspectRatio="none" attribute

the intrinsic dimensions of the SVG default to standard replaced element dimensions:

  • 300px x 150px.

This gives the SVG an intrinsic aspect ratio of 1:2.

At this point, if the SVG is displayed on a webpage with a different aspect ratio, Lighthouse will report the error above.

Including the viewBox attribute

Otherwise, the viewBox attribute will determine the intrinsic dimensions and intrinsic aspect ratio of the SVG.

Like any other <img>, the SVG may be styled via CSS to have any width and any height. But the aspect ratio resulting from these values must be identical to the intrinsic aspect ratio determined by the SVG's viewBox.

Hence, an SVG can have a CSS width and height which scale it infinitely upwards or infinitely downwards - but they cannot alter the shape of the SVG as defined by the viewBox.

If the CSS values change the shape of the SVG, Lighthouse will will report the error above.

Conclusions

To avoid the Lighthouse error above:

  1. The SVG must have a viewBox attribute
  2. The SVG may not use preserveAspectRation="none"
  3. the CSS width vs height aspect ratio and the SVG viewBox aspect ratio must match

Also note:

Declaring the CSS property aspect-ratio or HTML width and height attributes will not help in this situation. Neither CSS nor HTML are capable of overriding the intrinsic dimensions established by the SVG viewBox.

Example:

If you have an SVG with

viewBox="0 0 360 360"

then, using CSS, you can display that SVG as an at any size as long as it maintains an aspect ratio of 1:1.

E.g.

  • width: 24px; height: 24px;
  • width: 36px; height: 36px;
  • width: 48px; height: 48px; etc.

But, should you wish to style the same SVG-based <img> with a different aspect ratio:

  • width: 36px; height: 24px; // aspect ratio of 3:2

then you must create a new SVG with a viewBox which establishes an aspect ratio consistent with the CSS values:

viewBox="0 0 540 360"

if you don't want Lighthouse to report an incorrect aspect ratio error.

Rounin
  • 27,134
  • 9
  • 83
  • 108