Streaming live at 10am (PST)

[BUG] Responsive images: responsive images not being delivered to mobile

Hey guys, there’s currently an issue on my site where Webflow is not resizing images correctly to deliver small images for mobile, see Google PageSpeed

I have used the Image is HiDPI setting on all my images, but still no resizing :frowning:

What is going on?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Read up on how Webflow handles responsive images here ->

Hey @webdev, thanks for the response.

It seems like the article you linked is outdated — the option to enable responsive images seems to have been replaced with the image is HiDPI selector, from which Webflow does not generate photos which are appropriately resized!

Could I confirm with Webflow Support?

Edit: Looking at my source code, Webflow does indeed generate resized photos, but the resized photos are just not being delivered to the mobile site

Have you taken the time to look at the generated source code on the published site?

Yes, this is the line of code for the photo in question:

<div class="div-block-1433"><img src="images/Mobile-Builder-Screen-2.png" loading="lazy" width="640" sizes="(max-width: 479px) 100vw, (max-width: 767px) 85vw, (max-width: 991px) 48vw, 50vw" srcset="images/Mobile-Builder-Screen-2-p-500.png 500w, images/Mobile-Builder-Screen-2-p-800.png 800w, images/Mobile-Builder-Screen-2-p-1080.png 1080w, images/Mobile-Builder-Screen-2.png 1280w" alt="">

The code says that there should be a photo that is 500px wide, but it does not seem to be loading that photo, instead loading the 1080px wide photo.

In checking the /images folder, Webflow indeed does generate to 500px wide version, it just does not load on mobile.

Edit: there are other photos which this bug affects as well, above is just 1 example

Additionally, to add — whilst this site is being self-hosted, pagespeed reports the same issue on the .webflow.io site as well

@cyberdave @jorn @WebDev_Brandon just confirming if this is a proper bug in Webflow

Here is a demo page with two images placed into child divs of a standard WF container. The images are identical in dimensions and almost identical in kb. I created this to simplify testing.

The second image is flagged HiDPI. You can test loading this page to see which images are loaded from the responsive sets Webflow creates for each image. My tests show the browser/device is making the determination on which asset to load. I don’t see the HiDPI as having any effect in this demo.

Image dimensions and asset information is below each image.