Image no explicit width/height on SVG with dimensions

Provide the steps to reproduce

1. Run LH on https://quiamo-client.vercel.app/

See this https://www.webpagetest.org/result/201105_DiRY_c6737940edb79c8e59f605ae6c6b577c/

What is the current behavior?

What is the expected behavior?

It should work fine as the SVG actually has dimensions. To put this into context, the markup in question is the result of the new Next.js Image component that , as you may be aware, was developed with collaboration with your team. See the docs at https://nextjs.org/docs/basic-features/image-optimization

This is the Next.js/React markup:

                      <Image
                        src="/images/main-logo.png"
                        alt="quiamo logo"
                        className={classes.branding}
                        width="180"
                        height="60"
                        loading="eager"
                        priority
                    />

And the corresponding HTML:

Environment Information

• Affected Channels: webpagetest.org
• Lighthouse version: as per webpagatest.org
• Chrome version:
• Node.js version:
• Operating System:

Related issues

[spanicker]

any ETA on a fix?

[paulirish]

Maybe we’ll ignore non-network images with a SVG MIME type (potential problem what if SVG doesn’t have dimensions, invalid, etc it will cause layout shift).

+1. Let’s do this and comment it out. It’s a compromise solution but works.