Adaptable visuals

Upon uploading visuals to your website, Webflow generates variations of your uploaded visuals to ensure they adapt seamlessly and load swiftly on any gadget. This can enhance mobile page loading speeds by up to 10 times.

To make a visual adaptable, your browser provides a differently sized version of that visual depending on its size on your page and the screen resolution (by incorporating srcset and sizes attributes to your <img> elements). To grant the browser access to varied sized versions of visuals, Webflow crafts a set of variations for each visual post-upload, followed by encoding instructions for your browser to determine when to deliver each variation.

Crucial: In case your initial visuals are adequately compressed, Webflow employs your original visuals.

Guidance for manually creating adaptable visuals throughout a site

Webflow assesses your visuals and produces adaptable variations as you engage with a site page. Nevertheless, you might introduce modifications that impact visuals on other pages (e.g., editing a Component or category). To ensure all your visuals remain adaptable, you can either navigate to the impacted page or use the keyboard shortcut Command + Shift + I (on Mac) or Control + Shift + I (on Windows), and the Designer will analyze and recalibrate all your pages for you.

Instructions for generating adaptable visuals for sites established before September 2016

If your site was created prior to September 14, 2016, you will need to undergo a simple procedure to produce adaptable visuals on your site. The next time you access the Designer, a dialog will prompt you to commence the migration process. 

This process may consume a couple of minutes, contingent on your site’s size. If you prefer to perform this later, you can trigger the process at any time from the Assets panel or by using the keyboard shortcut Command + Shift + I (on Mac) or Control + Shift + I (on Windows).

Deciding against adaptable visuals

To deactivate this functionality for a specific visual (e.g., if you wish to compel the browser to utilize the original visual size):

1. Choose the visual on the canvas
2. Access Settings panel > Image settings
3. Deselect the Image is adaptable checkbox

Controlling adaptable visuals with interactions

Webflow derives adaptable visuals from their regular states — not their hover states or interactions that might adjust the visual’s size. Once you embed hover state styles or interactions, it’s advisable to scrutinize your site thoroughly before publishing.

In certain scenarios, you might need to incorporate supplementary design to override the effects of size attributes on visual element dimensions. For instance, you might have to specify the visual’s width as 100% to occupy its container. 

Frequently Asked Questions

What kinds of visuals are supported?

This functionality formulates adaptable variants for all inline JPGs, PNGs, and WebP visuals, excluding those integrated through rich text elements. Moreover, it doesn’t extend to background visuals. We suggest employing SVGs and PNGs for intricate or vector-based visuals since these possess lossless compression.

How many variations are created per visual?

The count of variations generated by Webflow hinges on the original visual’s size. Should it surpass 3200px in width, Webflow will generate 7 variations: 3200px, 2600px, 2000px, 1600px, 1080px, 800px, and 500px.

What dimensions should visuals be uploaded in?

You can upload visuals of any dimension, provided they stay beneath our 4MB restriction. Your browser will deliver the optimal variant depending on the device size and resolution. For instance, if you upload an original visual 4000px wide but it’s only displayed at 300px width on mobile, your browser will render the 500px Webflow-created variant.

Are adaptable variants exported?

Affirmative, adaptable visuals will feature srcset and sizes attributes in the exported site, and the variants will be stored in the /images directory of the .zip file alongside your original visuals.

Gain further insights on adaptable visuals on the Webflow blog. For individuals interested in delving deeper into adaptable visual technology, Eric Portis’ article in A List Apart could also prove beneficial.