Lighthouse Tests Image Tag complains about no width and height

[gigaboy]

Describe the bug
This code, according to many sources, is correctly formatted, and shows no CLS, which is good. There is no defined underlying CSS for this img:

<img srcset="
    /assets/images/photos/someimage-400.png 400w,
    /assets/images/photos/someimage-352.png 352w,
    /assets/images/photos/someimage-320.png 320w,
    /assets/images/photos/someimage-304.png 304w,
    /assets/images/photos/someimage-288.png 288w
    "
    sizes="
        (min-width: 1160px) 400px,
        (min-width: 960px) 352px,
        (min-width: 760px) 320px,
        (min-width: 660px) 304px,
        (min-width: 320px) 288px
        "
    src="/assets/images/photos/someimage-288.png" alt="A picture of something"
>

Problem
Lighthouse performance complains that:

"Image elements do not have explicit width and height".

However, if I insert a width and height into the src"...", the error goes away, but then executing the code ignores all of the srcset/sizes variables and only uses the src, regardless of screen size. I have tried changing the order of the min widths (and even changing them to max-widths). Same problem. I have also tried <picture> tags, but with same result.

Expected behavior

1. No error message for correctly formatted code.

[robdodson]

@gigaboy I think it's asking for you to add width and height attributes:

<img srcset="
    /assets/images/photos/someimage-400.png 400w,
    /assets/images/photos/someimage-352.png 352w,
    /assets/images/photos/someimage-320.png 320w,
    /assets/images/photos/someimage-304.png 304w,
    /assets/images/photos/someimage-288.png 288w
    "
    sizes="
        (min-width: 1160px) 400px,
        (min-width: 960px) 352px,
        (min-width: 760px) 320px,
        (min-width: 660px) 304px,
        (min-width: 320px) 288px
        "
    src="/assets/images/photos/someimage-288.png" alt="A picture of something" width="400" height="200"
>

Transferring this issue over to the Lighthouse repo.

[gigaboy]

Correct, Lighthouse is asking to add width and height to the src= string, but all the specs I've looked at don't show that its needed. In my case anyway, adding these variables causes the problem described.

[robdodson]

but all the specs I've looked at don't show that its needed

width and height are not needed to make the image display. But without them, the image may cause the page to shift its content, which is bad for core web vitals and may negatively impact search ranking.

In my case anyway, adding these variables causes the problem described.

Can you show your complete snippet, including the width and height attributes that you used?

It's also worth noting that if you're on a 2x DPR display, then the browser will select a higher quality image.
So if you're on a 2x display and you resize the window to 320px, it's going to select the image that's closest to 288px * 2, which would be the 400w one.

[adamraine]

Based on our documentation and some brief testing, it looks like sizes in srcset and sizes do not explicitly define dimensions for the image element, and therefore don't prevent layout shifts. This is WAI as far as I can tell.

[gigaboy]

Attached are testbed files along with screenshots. See code in index.html, tests #1, 2 and 3 and corresponding screenshots. I zipped this all up to make it more portable.
imgProb.zip

[adamraine]

This is WAI because a layout shift is still possible as the image loads in.