How can I convert CMS images to WebP on my Webflow site?
TL;DR
- Webflow CMS images aren't auto-converted to WebP, so use image CDNs like Cloudinary to serve WebP via external URLs stored in CMS fields.
- Alternatively, manually convert images to WebP, host them, and use custom code with the
element for WebP and fallback support.
Webflow doesn't currently support automatic WebP conversion for CMS-hosted images, but you can still serve optimized WebP images with a few workarounds.
1. Understand the CMS Image Limitation
- Images added via the CMS Image field stay in their original uploaded format (JPG, PNG).
- Webflow automatically converts static assets (uploaded in the Assets panel) to WebP on publish, but not dynamic CMS images.
2. Use a Third-Party Image CDN
- Services like Cloudinary, Imgix, or ImageKit can host your images and automatically convert them to WebP.
- Workflow:
- Upload images to the external service.
- Store the external WebP image URL in a CMS plain text field (or replace the CMS image field entirely).
- Use an Image element (not a CMS Image field) in Webflow to bind to that URL.
3. Manually Convert and Host Optimized Images
- Use a WebP conversion tool like Squoosh, TinyPNG, or Photoshop.
- Upload WebP versions manually to your assets or a hosting service like Firebase, S3, or Cloudinary.
- Store the WebP URLs in the CMS and reference them in your Webflow designs.
4. Use Custom Code for Native WebP Fallback
If you must use both WebP and fallback formats, create a custom <picture> structure via an Embed element using Webflow CMS fields:
- Example:
- Add an Embed component.
- Inside it, write a
<picture>structure referencing dynamic fields:- WebP source from CMS field A
- JPG or PNG fallback from CMS field B
- This requires managing two image versions and URLs in the CMS.
Summary
Webflow CMS images are not auto-converted to WebP, but you can work around this using third-party image CDNs, manually hosted WebP files, or custom code with the <picture> element. The most scalable option is using an image CDN that handles dynamic WebP conversion.