Responsive images FAQ

Webflow's responsive images feature creates variants of images you upload to ensure they look great and load quickly on any device. This can help your mobile pages load up to 10 times faster.

Supported image types

Note: This update applies to all inline JPGs and PNGs, except those added via rich text elements. It doesn't apply to background images. We recommend SVGs and PNGs for high detail or vector based images, since these have lossless compression.

So what does adding responsive images do, exactly?

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.

Does this work with export?

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 master images.

Number of variants generated 

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.

Choosing the right image to upload

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.

Compression details

We use libvips to resize images at 100% quality to each of the target variant sizes. The master 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:

• ‍quality: veryhigh
• ‍method: ssim
• target: 0.999
• ‍min: 40
• max: 100
• ‍loops: 10
• ‍progressive: true

PNGs are optimized using pngquant with the following configuration:

• nofs: true
• quality: 100
• speed: 10

In other words, this means:

• We compress JPEGs with a tool that uses visual approximation to try and get the result to look like the original to the human eye, while making them load progressively which just makes your site feel even faster.
• We use lossless compression on PNGs that identifies and describes patterns of 1s and 0s in a summarized way to minimize filesize.

Disabling responsive images

You can disable this feature for a specific image by hitting CMD+SHIFT+O (CTRL+SHIFT+O on Windows), then clicking the checkbox that's revealed in the image settings panel.

Generating responsive images for older sites 

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. 

If you'd rather do this later, you can start the process anytime from the Asset Manager tab or by hitting CMD+SHIFT+i (CTRL+SHIFT+i on Windows).

Regenerating responsive images across a site

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.

Managing responsive images with interactions

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. 

If you have any questions, email [email protected] — we're standing by!

Where can I learn more about responsive images?

We've written a detailed blog post on this update, and we also recommend Eric Portis' article in A List Apart for those who want to dive deeper into responsive images tech.