I am stuck with an issue with Lighthouse Pagespeed that I've never experienced before and cannot replicate on any other website that I am managing.
The error message I am receiving is:
Serve images that are appropriately-sized to save cellular data and improve load time.
Screenshot from Pagespeed Insights
Here is the source code for one of the images in question (formatted for readability):
<img
width="300"
height="300"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
src="https://example.com/assets/c1-300x300.jpg"
srcset="https://example.com/assets/c1-300x300.jpg 300w,
https://example.com/assets/c1-600x599.jpg 600w,
https://example.com/assets/c1-902x900.jpg 902w,
https://example.com/assets/c1-100x100.jpg 100w,
https://example.com/assets/c1.jpg 938w"
sizes="(max-width: 300px) 100vw, 300px"
alt=""
loading="lazy"
/>
I've found a long-closed GitHub issue addressing this behavior, where the devs responded that it is intended, and Lighthouse is using device pixel ratio of 3.0 on purpose. This explains why it picks the triple image size, but I still cannot figure out how I am supposed to “fix” this issue in the code.
I've tried further optimization for the images, but either it's irrelevant, or I haven't optimized enough.
Has anyone experienced the same, or has at least been able to replicate it on a different website?
It'd be great to find out both the cause (since the error message is not really telling anything) and the solution.
Ok, I've found out the cause. I was thinking that my smallest image size was close enough to the smallest necessary image size (at least according to Lighthouse), however, either it or its value multiplied by 3 wasn't.
So, the solution was to find out the screen width that Lighthouse Pagespeed uses for the mobile tests, which is 425 px, and then to provide a new image size specifically for this screen size along with the 2x and 3x versions.