Optimize your images

Shrink your image files and control how they load to speed up your pages.

Images are usually the heaviest files on a page, so optimizing them is often the fastest way to make your site load sooner. Uploading images at the right size, compressing them, and controlling when they load can speed up your pages and help your main content appear faster, all without changing how your site looks.

Upload images at the size you display

A 4000 px photo shown at 800 px wide sends extra data your visitors never see. Export each image at about 2x the largest width you'll display it. That's enough for high-resolution screens and no more.

Webflow's HiDPI image setting is built for this. When you turn it on, the image displays at half its pixel width, so a 600 px image appears at 300 px. Learn more about image resolution.

Choose the right file format

• SVG — logos, icons, and simple illustrations. Vector images stay sharp at any size and are tiny.
• JPEG — photographs when you aren't converting to a newer format
• PNG — images that need transparency or have sharp edges and fine detail
• WebP and AVIF — modern formats that keep quality at much smaller file sizes. Webflow can convert JPEG and PNG images for you.

Learn more about image file types.

Compress your images

Compress images before you upload them with a tool like Squoosh or TinyPNG. You can also compress images that are already in your site with Webflow's image conversion tool.

To convert existing assets to AVIF or WebP:

1. Open the Assets panel
2. Click the Expand Assets panel icon
3. Select the assets you want to convert, or click Select all
4. Choose AVIF or WebP as the file format
5. Click Compress
6. Publish your site

To convert every image in your CMS Collections, go to the Collections panel, click the More options icon, and click Compress assets.

Learn more about the image conversion tool.

Let Webflow serve the right size

When you upload an image in the Assets panel or a CMS image field, Webflow automatically creates smaller versions and tells the browser which one to load for each screen size. To get the benefit, add your images with an image element, especially key visuals like your hero image.

Responsive versions aren't created for background images or images in rich text. Images imported by URL or CSV don't get them either, so make sure those are already the right size before you import them. Learn more about responsive images.

Lazy load images below the fold

Lazy loading tells the browser to wait on images until a visitor scrolls close to them. That saves data and speeds up the first view of your page.

To set how an image loads:

1. Select the image element on the canvas
2. Go to the Element settings panel > Image settings
3. Click the Type dropdown
4. Choose Lazy

The Type dropdown has three options:

• Lazy — loads on scroll
• Eager — loads with the page
• Auto — defaults to the browser

Find your heaviest images

The site usage dashboard shows which assets use the most bandwidth and flags images worth optimizing. To open it, go to Site settings > Site usage. Learn more about bandwidth.

Keep speeding up your pages

• Optimize your fonts — load fewer fonts and weights
• Optimize video and rich media — keep heavy media from slowing your pages
• Prevent layout shifts — reserve space so images don't push content around
• Run a Lighthouse audit and set a baseline — test your page again after you optimize
• Understand Lighthouse and Core Web Vitals — see how image changes affect your LCP score