Is it an issue with wrong <source> "sizes" or with GPSI/Lighthouse detecting responsive image sizes?

Question

Using the following code to serve up responsive & optimized images.

<picture>
<source type="image/webp"
sizes="(max-width: 793px) 100vw, 793px"
srcset="
https://www.example.com/img3/santa-cam-2020,w_200.webp 200w,
https://www.example.com/img3/santa-cam-2020,w_354.webp 354w,
https://www.example.com/img3/santa-cam-2020,w_475.webp 475w,
https://www.example.com/img3/santa-cam-2020,w_581.webp 581w,
https://www.example.com/img3/santa-cam-2020,w_793.webp 793w"
>

<source type="image/jpg"
sizes="(max-width: 793px) 100vw, 793px"
srcset="
https://www.example.com/img3/santa-cam-2020,w_200.jpg 200w,
https://www.example.com/img3/santa-cam-2020,w_354.jpg 354w,
https://www.example.com/img3/santa-cam-2020,w_475.jpg 475w,
https://www.example.com/img3/santa-cam-2020,w_581.jpg 581w,
https://www.example.com/img3/santa-cam-2020,w_793.jpg 793w"
>
<img src="https://www.example.com/img3/santa-cam-2020,w_793.jpg" alt="" >
</picture>

The code works; is based upon the following resources; and, appears uncontroversial (?): Mozilla: Responsive images web.dev: Serve responsive images

GPSI (mobile test)/Lighthouse though say that code is not serving up properly sized images. See screenshot.

++++++++++++

Lighthouse / GPSI Screenshot: ++++++++++++

I have played with the "sizes=" (orginally provided by Cloudinary when it provided the img files) but to no avail.

I have removed srcset lines (starting from the largest file width, 793w). The GPSI mobile warning disappears if the last 2 lines are removed.

Also removed the .webp section (jic ;-)

I can confirm that the appropriately sized images are loaded with different screen resolutions. I tested this using Chrome DevTools. However, one has to do a hard clear on the browser cache first.

I get the same "Properly size images" issue running Lighthouse in incognito mode.

What am I missing or is there an issue with GPSI/Lighthouse?

Kringle Kringle · Accepted Answer · 2020-06-27T20:11:37

Unsurprisingly, the problem is not with Lighthouse/GPSI.

I changed this line of code:

sizes="(max-width: 793px) 100vw, 793px"

To this:

sizes="50vw"

The proper image is still served up (confirmed in DevTools) and there is no longer a GPSI/Lighthouse warning.

So much for what I thought I knew about serving responsive images!

Is it an issue with wrong <source> "sizes" or with GPSI/Lighthouse detecting responsive image sizes?

1 Answers