New feature: Responsive images

Responsive images will have srcset and sizes attributes in the exported site and the variants will be in the /images folder of the .zip file along with your master images.

3 Likes

Thanks! I assumed this would be the case but wanted to double check.

Will the shortcut to turn this on/off for specific images be added to the designer shortcut list?

1 Like

Sooooooo awesome, been waiting for this!! Thanks guys!

Awesome, take that hand coding!

4 Likes

I also asked this question in the “general” category. My apologies–I hadn’t seen this thread.

Anyway, basically what I wanted to be sure of is that if I want to make a gallery of photos that can be enlarged, that I don’t need to make thumbnail images or any other sizes–just upload the maximum size. Is that right?

@vernon
Yes that’s right.

@jdesign
The shortcut just reveals the checkbox in image settings, which is then used to toggle it on/off for an image.
We may add it to the shortcut list in the future, but we want to try surface any issues that can be solved in other ways first, to help make the feature and support docs rock solid.

So if you run into any issues please contact support@webflow.com

1 Like

Wanted others to be aware that there are issues if any of your images has a space in the title. I had one image that had a name in the space and it’s image path was broken with the site update to responsive image.

1 Like

@Joe_Hoff which site are you seeing this issue on? Is it on an exported site? That definitely sounds like odd behavior. Can you send me a link to your webflow.io site (either here or DM me).

Thanks in advance!

Yes, it is on an exported site. I have corrected the issue by replacing the image with an image that doesn’t have a space in the name. I’ll PM you the site if you want to look into it at all/look at archive. The image loaded correctly when viewing on the .io site, but not after exported and used on an azure host.

So I believe it is not working yet for CMS. Any date for CMS?
Thanks

I mean pictures in rich text in CMS to be precise

Not sure if this has already been answered, but if I create a section, with a BACKGROUND image, will that automatically resize/optimize as well? I read the updates, etc. but I did not see anywhere where it mentioned it would work for background elements as well.

That’s noted in the blog post:

At present, this change doesn’t include background images or images in rich text elements, but we’ll support these elements in a future iteration.

Ah. Well damn. Look forward to that push, because from what I can tell the majority people are using that for standard DIV’s and cms integrations so we dont have to worry about specific ratios/sizes. Thanks for the quick answer.

1 Like

Yeah, I’m looking forward to that too! And no problem on the quick answer. Someone added that improvement to the wishlist site already, so you might want to go give it an upvote! Support for responsive CSS background images (and | Webflow Wishlist