Responsive images just got a whole lot easier

Webflow now automatically scales, compresses, and optimizes inline images for every device, at every resolution. So your pages load up to 10 times faster.

How does Webflow make your images responsive?

1

You upload images and Webflow creates variants scaled for different device sizes.

Original
2000px
1600px
1080px
800px
500px
2

As you craft your design, Webflow adjusts your code to serve the right image every time.

Generated HTML
<img src="/wolfie.png"
  sizes="(max-width: 479px) 96vw, (max-width: 767px) 480px, 67vw"
  srcset=
    "/wolfie-500.png  500w,
     /wolfie-800.png  800w,
     /wolfie-1080.png 1080w,
     /wolfie-1600.png 1600w,
     /wolfie-2000.png 2000w,
     /wolfie-2600.png 2600w"
  alt="Lone wolf howling at the moon"
/>
3

Your browser serves the best image based on screen size and resolution.

800px
1600px
2600px
1600px
1080px
2000px
500px

A smarter, better, faster way to handle images in responsive design

Speed up your websites by serving the right image size for every device. Find out how we did it on the Webflow Blog.

Read the blog post

Mobile image load speeds*

Before
After
1.12s
0.06s
0
0.25s
0.5s
1.0s
1.25s
* Dynamic and static inline images. Support for background images and images in rich text elements is coming soon.

How is Webflow’s approach different?

You design visually, while Webflow writes the code for you behind the scenes. No need to customize themes, integrate third-party services, or anything.

Code-free visual designer
Design your website visually — without coding — and let Webflow do the rest. Then export all your code and assets with a single click.
Automatic sizes recalculation
As you customize your design for phones, tablets, and desktops, Webflow automatically updates the code to serve the right image every time.
Global CDN
Lightning fast image loads powered by a global content delivery network.
Pre-caching compatible
Your images load before the page renders — no need to wait for initial page loads and javascript measurements.
Automatic image compression
Webflow visually optimizes every image for maximum efficiency, making even your largest images load in no time.

Webflow

Code free visual designer
Automatic sizes recalculation
Global CDN
Pre-caching compatible
Automatic image compression

WordPress

Code free visual designer
Automatic sizes recalculation
Global CDN
Pre-caching compatible
Automatic image compression

Cloud image services

Automatic sizes recalculation
Automatic sizes recalculation
Global CDN
Pre-caching compatible
Automatic image compression

What’s Webflow?

Webflow is a 100% visual web design tool that writes clean, production-ready code for you. So you can just design.

100% visual

So you can design your way — without even looking at code. Experience the power.

Crazy powerful

So you can bring your ideas to life in fully functional, CMS-powered websites, not static mockups.

Production ready

Webflow writes clean, semantic markup, so your sites load fast. Just check this page’s source code.