How to 'call' responsive images

Community resources General
1

Hi - I’ve found information that Webflow does generate multiple image sizes for responsive image sizing. And the strange Command + Shift + I (on Mac) or Control + Shift + I (on Windows) feature (@webflow support - why is this not in the Settings Menu??)

I cannot find instructions of how to call these image sizes, when in a thumbnail gallery for example.
From the live site html/css - I don’t see that happening automatically: Chris Frazer Smith

Can someone help me find what I’m missing - I’m a novice, so go gently!

Tony

2

You don’t need to “call” them, they’re generated in the HTML as a srcset attribute on your images. The browser automatically chooses the image that best fits the device’s display requirement.

3

Thanks @memetican - I’m not seeing them generated in the HTML (or CSS) and so for example - Chris Frazer Smith seems to be loading full res images.

Is there something else I need to do?

4

Ah are you referring to CMS-stored images? I don’t believe responsive images are generated there.

I can’t think of a good way to solve that client-side because even if you created multiple sized image fields in the CMS, the script-driven changes may be too late to be really of serious use for the browser’s responsive image selection and preloading work.

You’d have to go with a reverse proxy, which is very doable but overkill in most cases.

5

Thank you, yes they are in the CMS @memetican - that’s very clear, but also a bit painful for our pro-photographer client!

1 Like
6

@webdev is a photographer and Webflow pro- he may have some suggestions on a direction you could take for responsive CMS images.

7

Thanks for the tip off.
Even a way of smooth loading/masking the loading would help as the block jump as the images are loaded.
Originally the portfolio was set to show a full image (in a tab) over the thumbnails (on second tab), so that probably covered the loading in the background.