Speed Tests Showing Much Larger Images Being Loaded Than Needed

[brianrivet-tilt]

I have a question. I'm seeing reports on my Page Speed tests of images on a site I'm working on serving up images that are routinely 2x as large as they need to be or more. I'm using Lazysizes with the auto-sizing attribute. I'm wondering if there's something else I need to be doing (for instance using a plugin like parent-sizes etc.) to help correct this.

For instance, the image tag below is one of the images that is getting listed as an issue. Here's what the speed report says:

This image file is larger than it needs to be (720x693) for its displayed dimensions (382x368). Use responsive images to reduce the image download size.

Here's the code:

`
<img
class="w-full lazyload"
src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27308%27%20style%3D%27background%3Atransparent%27%2F%3E" srcset="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27308%27%20style%3D%27background%3Atransparent%27%2F%3E"

width="320"

height="308"

alt="Greaux Healthy - Active Children playing Basketball"

data-sizes="auto"

data-srcset="https://greauxhealthy.imgix.net/images/bball-hand-drawns.jpg?auto=compress%2Cformat&amp;fit=clip&amp;fm=webp&amp;q=70&amp;w=320&amp;s=9efac580dc35e3a3eb5994780c59025f 320w, https://greauxhealthy.imgix.net/images/bball-hand-drawns.jpg?auto=compress%2Cformat&amp;fit=clip&amp;fm=webp&amp;q=70&amp;w=520&amp;s=bd8ffd73b65f30107b5d8f1081c19e7b 520w, https://greauxhealthy.imgix.net/images/bball-hand-drawns.jpg?auto=compress%2Cformat&amp;fit=clip&amp;fm=webp&amp;q=70&amp;w=720&amp;s=a30383fdcba64dc1044d77d01d62b2ee 720w, https://greauxhealthy.imgix.net/images/bball-hand-drawns.jpg?auto=compress%2Cformat&amp;fit=clip&amp;fm=webp&amp;q=70&amp;w=920&amp;s=c0e744d10ce2756ff47b7f2f7df09a3e 920w, https://greauxhealthy.imgix.net/images/bball-hand-drawns.jpg?auto=compress%2Cformat&amp;fit=clip&amp;fm=webp&amp;q=70&amp;w=1120&amp;s=c436da077362c558829088b851d7fea9 1120w, https://greauxhealthy.imgix.net/images/bball-hand-drawns.jpg?auto=compress%2Cformat&amp;fit=clip&amp;fm=webp&amp;q=70&amp;w=1320&amp;s=890772d854ebf79c3f6e03d6d320812d 1320w, https://greauxhealthy.imgix.net/images/bball-hand-drawns.jpg?auto=compress%2Cformat&amp;fit=clip&amp;fm=webp&amp;q=70&amp;w=1520&amp;s=c7b2f951bce059d9835e55979123ebc8 1520w, https://greauxhealthy.imgix.net/images/bball-hand-drawns.jpg?auto=compress%2Cformat&amp;fit=clip&amp;fm=webp&amp;q=70&amp;w=1600&amp;s=ff41197842fb62e85fca1912f0657488 1600w"

data-aspectratio="1.038961038961"

loading="lazy"

style="background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAIAAABiEdh4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABe0lEQVQokSXRMW4cQRBDUbJY3bOzhmFfWrEBX9aQpot0IODHL/n8+PuntV7Xz/f79/3+dV0/tHZIxyfjDAFJq9fu3eouggAZIIgTxwYZGDbgAAiRAAbSzahccOXAJ/NlAKRjZwyzEAYpmCD76hSzOOWH5zOgNQEGmUyYEoNBJRUwfTfJiKN88fyLJ+wBDA+MAlvAQpkVcPreJEiYeHAQPE5NYsQVikCjNsZQ6O73boBxMsfjOZ8ZODETkUvUKqeCMujp92sn8MkkDx57cAwHBFGlrkAooQqsuO/XK87UPDk5Y8zJoc1ioZvqSlfEiBan79cd+6lD049HR4WAVVXSWtqtJS1Viyr067ptFx8M5+Qcz/cuSdde+9p7773X6paqqvd12ybaw3NyBoYYUNLe+7r23mutXlKxyN7rZRvRGfSTHg6aAdV97X3tde211KoqkmitzbHMbmtZB4IYsnvt3d98S2IxBFrVhKWUutTVoxBh9dJ3WlJVoQgg/wGpQ/vAe0al0AAAAABJRU5ErkJggg==) center center / cover; object-position: 50% 50%;" decoding="auto">
`

Can you tell me what I might be doing wrong or how I can get the correct sized images to load?

[rr-it]

Bug in Lighthouse when Chromium is running headless:

• [Request for feedback] Adding shared performance insights to Lighthouse GoogleChrome/lighthouse#16462 (comment)
• https://issues.chromium.org/issues/416580500