Title: Serving dynamically adapted responsive images Last modified: March 6, 2021 --- # Serving dynamically adapted responsive images * [Cagatay Belgen](https://wordpress.org/support/users/belgen/) * (@belgen) * [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/) * Hello, * When a mobile device visits my WordPress website, I don’t want those devices to load a full-sized image, instead, I want WordPress to offer reduced dimensioned images according to the visitor device (resolution). * There are a couple of plugins in the WordPress plugin repository promising to deliver adapted responsive images, but none of them works out of the box. Actually, none of them works at all. * Here are my media settings [https://imgur.com/VM9blMG](https://imgur.com/VM9blMG) * The problem is, even I set lower image dimensions, small devices, even smartphones still receive full-sized images. * How do you guys solve this issue? Pushing a 1280×720 image to a smartphone doesn’t make sense, since 483×272 would be sufficient for most smartphones. * What is your approach regarding this issue? I am getting pretty good PageSpeed results, but this issue stays unsolved on my list for a couple of years. * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fserving-dynamically-adapted-responsive-images%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 7 replies - 1 through 7 (of 7 total) * [Joy](https://wordpress.org/support/users/joyously/) * (@joyously) * [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/#post-14143458) * > 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. * Thread Starter [Cagatay Belgen](https://wordpress.org/support/users/belgen/) * (@belgen) * [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/#post-14143724) * Hello [@joyously](https://wordpress.org/support/users/joyously/), * [http://bit.ly/2MTh1P1](http://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. * [Joy](https://wordpress.org/support/users/joyously/) * (@joyously) * [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/#post-14144035) * 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. * Thread Starter [Cagatay Belgen](https://wordpress.org/support/users/belgen/) * (@belgen) * [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/#post-14144187) * 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](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](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](https://www.outdoorhaber.com/wp-content/uploads/2021/02/denizdeki-mikroplastikler.jpg)( 1280×720) * but when I inspect the code, * `Denizdeki mikroplastikler` * 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](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](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. * Thread Starter [Cagatay Belgen](https://wordpress.org/support/users/belgen/) * (@belgen) * [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/#post-14144238) * unfortunately, disabling lazyload + disabling webp conversion didn’t solve the issue above. * [Joy](https://wordpress.org/support/users/joyously/) * (@joyously) * [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/#post-14144655) * 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? * Thread Starter [Cagatay Belgen](https://wordpress.org/support/users/belgen/) * (@belgen) * [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/#post-14144676) * 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](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](https://imgur.com/nySJ8Q7)) * even pagespeed mobile downloads [https://www.outdoorhaber.com/wp-content/uploads/2021/02/mikroplastikler-1013×570.jpg](https://www.outdoorhaber.com/wp-content/uploads/2021/02/mikroplastikler-1013×570.jpg) this file instead of smaller ones. Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Serving dynamically adapted responsive images’ is closed to new replies. ## Tags * [images](https://wordpress.org/support/topic-tag/images/) * [pagespeed](https://wordpress.org/support/topic-tag/pagespeed/) * [scaled](https://wordpress.org/support/topic-tag/scaled/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 7 replies * 2 participants * Last reply from: [Cagatay Belgen](https://wordpress.org/support/users/belgen/) * Last activity: [5 years, 4 months ago](https://wordpress.org/support/topic/serving-dynamically-adapted-responsive-images/#post-14144676) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics