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 add an image when sharing my website on platforms like Messenger?

Have you also experienced problems with saving changes in Webflow? I have encountered an issue where my work was not saved, even though I made sure to save multiple times. This happened on both a test project and the actual project. Has anyone else had a similar experience while using Webflow on Chrome?

How can I automatically reload the Webflow.js file after every page transition in order to update and apply changes to my webflow interactions on ongoing pages?

How can I make this code work on my Webflow page? I've tried adding it to the footer in project settings, the specific page's footer, and an embedded code element, but it's not showing on the published site.

How can I change the image within a link block when hovering over it in Webflow?

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 it possible to add recurring payments from Stripe to Webflow for a educational platform's monthly subscriptions?

Can Webflow buttons or thumbnails be used to change the video in the video player?

Where can I style the color of the active link in the nav bar on Webflow?

How can I make two separate animations for a text block and button on my home page in Webflow activate simultaneously?

How can I resolve the issue of the wave animation in my Webflow project de-syncing when the page is loaded for the second time?

How can I preserve the forward slash in the custom URL slug for my Category Collection in Webflow? I want to format my blog categories like this: "site.com/blog/category/category-name". The current format is "site.com/blog-category/category-name" and I want to mirror the SEO authority's blog URL structure.

How do I make the buttons in the Webflow side menu extend all the way while maintaining the blue line on the far right border when hovered and selected?

How can I make my Webflow modal scrollable on small screens without affecting the scrollability of the content behind it?

How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?

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?