I am trying to get a better understanding of how the responsive images work
Am i safe in assuming that the responsive images are generated and used no matter where you upload the images? (ie. media library, editor, inline)
Thus i don’t need to resize and optimize before uploading the images
I notice that some of the templates have a large and thumbnail image field in the blog collection - is that required with responsive images?
i am not sure that it is working for the CMS image fields - i uploaded a 600k jpg file 2000 X 1500px and displayed it in a collection list - 3 columns - in a container - and it is still showing the original image
At present it is for inline images only, and not for background images or rich text, see the full details in a blog post here: https://webflow.com/blog/new-feature-responsive-images and tutorial article here: Responsive images in Webflow | Webflow University
But it should work for both static and dynamic (CMS) inline images. I’ll tag in @YoavGivati who wrote the article, for a little more clarity…
@rfull ull, we do our best to compress images, for the current iteration of the product we’re aiming to use compression that works well for most images (scenery and typography). This may change in the future as we move toward better compression, custom compression options depending on the type of image, and/or providing your own variants.
600kb for a 2000x1500px image sounds like your master image has already been through significant compression.
With that said when we resize your master image to generate the variant files, sometimes our compression can produce a variant that has a larger file size than either the filesize of the master image (if it was heavily compressed) or than a larger variant (in some cases more pixels are easier to compress than fewer pixels).
Whenever we produce a variant that has a larger filesize than the master image or a larger dimension variant we mark it as such and don’t use it on your site, since it would be more efficient to just serve the larger variant or master that has a smaller file size.
I hope that helps add some clarity.
While generating variants is a one-time process that should happen in the background right after you upload an image and measuring images should happen in the background while working in the designer—so you shouldn’t need to think about it, you can confirm all variants have been generated and inline images measured across your site by using the cmd + shift + i keyboard shortcut.
Also as an aside, while we preview the srcset/sizes attributes in the designer, we don’t currently preview them when an inline image is used in a dynamic list. On the published site though inline images with usable variants should get the srcset/sizes attributes on your published site including those inside dynamic lists.
thanks for the detailed explanation.
i logged out and used Chrome to view the downloaded image files - i see the smaller optimized images now
very impressive
