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

Manually generate responsive images across a project

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.

Generate responsive images for projects built before September 2016

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. 

Disable responsive images

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.

Manage 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. 

Common questions about responsive images

What are the supported image types?

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.

What size images should I 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.

How many variants are generated per image?

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.

How are images compressed?

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:

• 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 file size.

Are responsive variants exported?

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.

Helpful resources

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.