How can I convert CMS images to WebP on my Webflow site?

TL;DR

To convert CMS images to WebP format on your Webflow site, you'll need to follow a few steps.

1. Enable WebP support in Webflow:
- Go to your Project Settings in Webflow.
- Under the Hosting tab, scroll down to the "Advanced settings" section.
- Enable the "Enable WebP support" toggle. This will make sure that your Webflow site serves WebP images to browsers that support it.

2. Convert CMS images to WebP:
- Export your images from your CMS collection to your local machine.
- Use an image optimization tool or converter that supports WebP format. There are several online tools available that can do this for you.
- Upload your exported image files to the converter tool and select the output format as WebP.
- Once the images are converted, download the WebP versions to your computer.

3. Replace CMS images with WebP versions in Webflow:
- Go to your Webflow Designer and navigate to the Collection List or Collection List Item where your CMS images are used.
- For each image element, update the image source to point to the respective WebP image file you downloaded in the previous step.
- Make sure to replace the original image's source, not the fallback source, if you have one.
- Publish your changes to update the live site.

By following these steps, you'll be able to convert your CMS images to WebP format and ensure that your Webflow site serves WebP images to compatible browsers, improving site performance and loading times.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

What could be causing my Webflow portfolio website to automatically scroll to a certain point when opening the exported site, without any anchor links attached to the URL in the browser?

Can I create a form in Webflow that submits and creates new CMS items, without using any third-party integrations or tools?

Can I build a Webflow site that pulls content from my own CMS through an API (JSON or XML)?

How can I troubleshoot the issue when my Webflow site, which I have linked to a custom domain, returns a "this page isn't working" error? This is my first time publishing a site and I followed the instructions given by Webflow. Thank you!

Why is "Image 10" not sliding completely on my Webflow Home Page preview mode, but works fine in the interaction preview in design mode?

Can Webflow provide Android scrollbars? How can they be implemented?

Is there a possibility of interference between the first online website and the second project if I publish the second project with only the option to deploy on the staging URL in Webflow?

What could be the reason for some collections not working properly in my online magazine, specifically the "style & beauty" section under the "culture" tab, and the subpages under the "lifestyle" group in Webflow, even though they are set up the same as the functioning collections? Is there a limit to the number of collections allowed on the CMS plan?

What are the new features in the updated Webflow menu that replaces the default browser menu when right-clicking on elements?

Is there a more efficient way to update images in Webflow without having to change the image file on each individual webpage? How do others navigate this issue, especially when dealing with multiple pages?

How do I resolve issues with order confirmation emails and mobile optimization for ecommerce in Webflow?

How can I make my YouTube video perfectly rounded in Webflow when viewing on a Chrome smartphone (iPhone 12 Pro)?

How can I troubleshoot the issue of 4 incorrect pages found in the sitemap.xml of my Webflow project, which is being reported by SEMRush?

What could be causing the error when submitting a form in Webflow?

Can Webflow automatically send the details of a form submission, including the contact information and service requested, to my client?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?