Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Trusted by teams at
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Responsive images are a default and automatically enabled in Webflow.
Webflow creates variants of your uploaded images to make sure they're responsive, look great, and load quickly on any device. This can help your mobile pages load up to 10 times faster.
In short, making your images responsive means that your browser serves a different sized version of that image based on the size of the image on your page and the screen resolution (adding srcset and sizes attributes to your <img> elements). To do this, Webflow creates a set of variants for each image upon upload (details below), then encodes instructions for your browser to know when to serve each variant.
Important: If your original images are compressed enough, Webflow uses your originals.
We measure your images and generate responsive variants as you work on the current page. But you may make changes that affect images on other pages (say, by updating a symbol or class). In that case you can either visit the affected page, or just hit CMD+SHIFT+I (CTRL+SHIFT+I on Windows) and the designer will scan and re-measure all your pages for you.
If you created your site before September 14th, 2016, you'll need to walk through a quick process to generate responsive images on your site. Next time you open the Designer, you'll see a modal asking you to start this process.
You can disable this feature for a specific image by hitting CMD+SHIFT+O on Mac or CTRL+SHIFT+O on Windows, then clicking the checkbox that's revealed in the image settings panel.
Webflow measures images in their normal states, not in hover states or interactions that may change the size of the image, so it's a good idea to look through your site and make sure everything looks ok.
In some cases, you may need to add additional styling to override the sizes attributes effect on image element dimensions, for example, by setting the image's width to 100% to fill its container.
This feature generates responsive variants for all inline JPGs and PNGs, except those added via rich text elements. It also doesn't apply to background images. We recommend SVGs and PNGs for high detail or vector based images, since these have lossless compression.
You can upload any image size you'd like, provided it is smaller than our 4MB limit. Your browser will serve whichever variant is best, based on device size and resolution. For example, if you upload a 4000px wide original image but it is only rendered at 300px width on mobile, your browser will serve the 500px variant that Webflow created in that context.
The number of variants Webflow generates depends on the image's original size. If it's bigger than 3200px wide, Webflow will generate seven variants: 3200px, 2600px, 2000px, 1600px, 1080px, 800px, and 500px.
We use libvips to resize images at 100% quality to each of the target variant sizes. The original image does not go through any compression after you upload it, but after resizing, the variants will go through a compression step.
JPEGs are optimized using jpeg-recompress with the following configuration:
PNGs are optimized using pngquant with the following configuration:
In other words, this means:
Yes, 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 original images.
You can learn more about responsive images on our detailed blog post on this topic.
We also recommend Eric Portis' article in A List Apart for those who want to dive deeper into responsive images tech.
