Back to blog
Quick Wins

Convert Images to WebP in Webflow

Main image
Jamie Dowis
Head of Product
February 12, 2024
5 min read
Table of contents

Page speed is crucial not only for enhancing user experience but also for improving search engine rankings, and one of the most significant factors affecting page speed is the size and format of your images. Slow-loading pages can lead to increased bounce rates, reduced engagement, and lower SEO scores. Luckily, Webflow users have a great advantage in optimizing their images, particularly by automatically converting them to WebP.

How to Reduce Image Size

Compressing Images

Compressing images reduces file size without significantly compromising quality. Tools like TinyPNG can be used for effective compression.

Converting Images

Converting images to more efficient formats can also help in reducing file sizes. Converting a PNG to a JPG will reduce file size, but using the WebP file type will generally result in an even smaller file size while still supporting transparency.

WebP: The Best Image File Type for Web

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Compared to traditional formats like JPEG or PNG, WebP images are substantially smaller in size, which translates to faster loading times and improved website performance.

The Complete Webflow SEO Checklist

Download our checklist for search engine optimization in Webflow.

Download Checklist

Convert Your Images to WebP in Webflow

Automatically Convert All Media Assets to WebP

1. Navigate to the Expanded Assets Panel: Open the Assets panel, then select ‘Expand Assets Panel’ in the top right.

webflow assets panel

2. Select Images to Convert: Click Select All in the top right or click the checkmark while hovering over individual images you’d like to convert.

3. Compress: Select the Compress button to automatically convert all selected images to WebP and replace them with the new file in each instance on your site.

webflow expanded assets panel with compress button circled

How to Convert Webflow CMS Images to WebP

Unfortunately, the technique above won’t work for images in CMS collections, so these will need to be converted manually.

  1. Convert Images Prior to Upload: Use a batch conversion tool like CloudConvert to convert multiple images at once.
  2. Update CMS Items: If you need to update existing CMS images that you don’t have the original files for, you can click the arrow icon in the top right of the image field to open it in a new tab, then right click save it to your computer. From there, you can use a conversion tool as mentioned in step one, then re-upload the image to the CMS.
thumbnail image field in Webflow CMS

Webflow currently does not automatically convert images to WebP, so this manual process ensures your site takes full advantage of the WebP format's benefits.

By converting your images to WebP in Webflow, you can significantly improve your website’s loading times, enhancing user experience and SEO performance. This simple yet effective change can have a substantial impact on the overall efficiency and appeal of your website.

Jamie Dowis
Head of Product
Copy link