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

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

How can I make a Div Block take full width within a parent element using Webflow, specifically when the parent element's width is set to a maximum of 1100px and the layout display is set to flexbox?

How can I create a registration form for an event using Webflow that includes a maximum attendee limit which dynamically updates as people register? Can I also integrate a payment method like PayPal for sponsorship levels?

Can animated text be created in Webflow?

What is a CSS trick to scale an <code><iframe></code> element to a specific aspect ratio in Webflow?

How can I upload a PDF or file to Webflow so that it opens or downloads when clicked on a link? Is there a Webflow tutorial available for this?

Is it possible to automatically load a new page and remove the previous one when the user reaches the bottom of the page on a Webflow site, like in this example?

Can I select the version of Lottie that Webflow is using? The current version being used is 5.7.13, which is nearly 2 years old. The latest version, 5.12.2, has support for rendering specific features in Canvas mode that can't be achieved with the older version. Launching a site with complex animations in SVG mode is not viable due to performance issues on devices. Can I get assistance with this issue?

Why am I unable to edit text blocks in Webflow? Could it be due to incorrect setup of grid or container elements? It seems like the text blocks may be hidden behind other elements.

Is there a tutorial available for creating a horizontal scrolling section on Webflow using third party tools or integrations?

How can I resolve the "The operation failed with an error. [400] ValidationError: Invalid request body" issue when trying to update a multi-reference item field in a CMS collection using Integromat with Webflow?

How can I add more text and images/videos to specific project template pages in Webflow without them being repeated on all pages? Do I need to create more components or use properties? Thank you!

How can I use Webflow to replace the image in my button with an icon that is part of the button and still be able to add a link block?

Will this script that shows the total amount of CMS items in a specific Webflow collection and renders it to a specified text element with class ".users" work on Webflow despite the CORS error I am receiving?

Can Webflow's CSS grid be inverted at a breakpoint to switch the rows and columns? How can I achieve this without JavaScript on my website?

How do I use the "Fill" - "Cover" option in Webflow to fit an image within a div block without resorting to a background image?

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

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

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 fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

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 whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

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 add user input to the end of the redirect URL in Webflow?