I’m not understanding what webflow is doing with responsive images.
From looking at the code, the Angel image seems to point to the corresponding smaller images as I would expect, but the Flower only points to the largest image from the set created.
Why is this? Also, why does webflow even create the set, but not use them? At least for the smallest phone size, I would think the code would point to the -p-500 image which is nearly 7x smaller.
srcset is an HTML5 feature which browsers can use to pick the image variant they think best fits the current display requirements. Primarily, it lets phones be more efficient, because they can download a smaller image version when it’s appropriate.
Webflow generates those variations automatically, and the srcset attributes needed to make those available to the browser.
The browser makes the decision on which to display.
That might help with your two questions-
“Point to” doesn’t really have a meaning here, as the HTML points to all of them. src is the full-res original image, and srcset lists size-reduced variants.
The set isn’t used by Webflow, it’s used by the browser, and only if the browser decides to.
Thanks for your explanation.
But one last thing is confusing… for the flower code it looks like the other variant names aren’t even in the srcset for the browser to make a choice. Why is that?
Mmm, couldn’t say, that does look weird. Webflow generates those images based on a number of factors depending on your layout and the image characteristics, and those can change after the srcset variants are generated.
You can regenerate them site-wide with CTRL+SHIFT+I
