Serving dynamically adapted responsive images

The problem is, even I set lower image dimensions, small devices, even smartphones still receive full-sized images.

How are you determining this?

WordPress adds the srcset and sizes attributes to all images that have the wp-image-{xxxx} class. (the xxxx is the image ID)
With these attributes, the browser determines which image to load, based on the window size. The theme (or plugins) can also filter the attributes to change them, if needed.

Hello @joyously,

https://bit.ly/2MTh1P1 please reduce browser size in order to see the mobile site, as you will see, the images in the post are just resized by CSS. Mobile visitors still download full-sized images.

No, that’s not how that works if the browser uses the srcset and sizes attributes to choose the correct image.
You have a mixture of plugins and perhaps theme and WP all trying to work on the same thing. I advise you to remove the lazy loading plugin (or option in the theme), and I don’t know if that is the same one that is putting the image into SVG (since it is happening on the featured image also), but that should go also since it seems to interfere with the sizing.

And it’s not so simple as using a smaller image on a mobile device, because some devices have Retina screens and the higher pixel density means you need a bigger image.

when I do pagespeed test on https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.outdoorhaber.com%2Fcevre%2F15-milyon-ton-mikroplastik-deniz-tabanini-kirletiyor

mobile device seems to download https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler-1013×570.jpg

which is resized version of https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler.jpg (1280×720)

but when I inspect the code,

<img loading="lazy" class="aligncenter size-full wp-image-14949" src="https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler.jpg" alt="Denizdeki mikroplastikler" width="1280" height="720" srcset="https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler.jpg 1280w, https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler-483x272.jpg 483w, https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler-1013x570.jpg 1013w, https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler-768x432.jpg 768w, https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler-300x169.jpg 300w, https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler-1024x576.jpg 1024w" sizes="(max-width: 1280px) 100vw, 1280px">

as you see, there are smaller alternatives for smaller viewports. why does it pick this https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler-1013×570.jpg but not this https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler-483×272.jpg

ps: I am trying to disable lazy load, I will update if anything changes.

unfortunately, disabling lazyload + disabling webp conversion didn’t solve the issue above.

I don’t think you can ascertain which image is downloaded on mobile except by using mobile. The browser is the one that determines the best match, not the page speed algorithm.
When I looked at the source of the page on my mobile (using a View Source app), it didn’t look like the code you posted. It had data attributes for the image. Is the code you posted the result, after the scripts run? Doesn’t that indicate that the browser can’t make the determination because it’s modified by scripts?

please take a look at https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.outdoorhaber.com%2Fcevre%2F15-milyon-ton-mikroplastik-deniz-tabanini-kirletiyor

go to “passed audits” and see the pagespeed recommendation. ( if you are on mobile, please see the screenshot https://imgur.com/nySJ8Q7 )

even pagespeed mobile downloads https://www.outdoorhaber.com/wp-content/uploads/2021/02/mikroplastikler-1013×570.jpg this file instead of smaller ones.