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

Can I add space between columns in Webflow?

Can I create two distinct event sub-sites within a single plan on Webflow with separate navigation menus, branding, and domain redirects? How should I approach planning for these differentiators?

Is there a way to automate the insertion of a canonical URL tag in Webflow?

How can I use the same grid layout for both blog posts and listings in Webflow without encountering the lock icon issue?

What could be causing my background video to only appear as a line in my column after uploading it on Webflow?

Can I update an empty image field in my Webflow collection item using the API? I am currently using Google App Script and have no issues updating text-based and boolean-based fields, but when it comes to the image field, I am unable to make any changes. The API response only includes the image field if the CMS item already has an image uploaded, resulting in an error message. I have tried using PUT and PATCH methods, but have had no success. Is there any way to update a blank image field directly from the API? Thank you for any assistance.

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.

How can I achieve a smooth scrolling effect in Webflow, like the one on the Oui Will website?

How do I display different items in a collection list based on the category and subcategory in Webflow?

How can I make a video appear after a certain scroll distance in Webflow?

Why isn't the "get image from search index" feature working on my Webflow search results page?

How can I darken the rest of the page when a dropdown menu item is clicked in Webflow without the need for coding?

Can the Webflow lightbox widget be customized to include descriptions, links, and user interactions in a popup fullscreen display?

How can I add resolution-flexible SVG graphics to my Webflow designs using the Embed element and the currentColor attribute?

How can I create filter buttons on top of styled events in Webflow CMS?

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?