How can I convert CMS images to WebP on my Webflow site?
TL;DR
- Webflow CMS doesn't auto-convert images to WebP, so use external services like Cloudinary or Imgix to host and serve images in WebP via URL transformations.
- Add external URLs to your Webflow CMS instead of uploading images directly, optionally using custom code embeds or JavaScript for more control and fallbacks.
Webflow currently does not convert CMS images to WebP automatically, but you can work around this using a few manual or external optimization strategies.
1. Understand the Current Limitation
- Webflow automatically serves WebP versions of static images you upload to the Designer, but CMS images are served as uploaded (usually in JPG or PNG).
- CMS image fields do not have internal options to auto-convert to WebP formats.
2. Use External Services to Convert CMS Images
- Use an external image optimization service like Cloudinary, Imgix, or ImageKit that supports WebP transformation via URL.
- Upload your images to these services instead of directly to the Webflow CMS.
- In your CMS, use an External URL field instead of the default image field.
- Serve the optimized image URL with WebP transformations applied (e.g., via Cloudinary's
.auto.formatparameter).
3. Use JavaScript-Based WebP Fallbacks (Optional)
- If working with external images that support WebP, you can write custom JavaScript to detect browser support and dynamically load
.webpformats. - This isn't always necessary as modern browsers generally support WebP.
4. Use Webflow's Custom Code Embed Option
- If you need more control, place a custom embed in your CMS collection template using the
tag via Webflow's Embed component. - Reference the WebP image URL first, followed by the original JPG/PNG URL as a fallback.
- Note: This can’t be done using Webflow CMS image fields directly—only if you're managing external image URLs.
5. Optimize Your Original CMS Images Before Upload
- As a temporary workaround, you can use an image optimization tool (like Squoosh, TinyPNG, or ImageOptim) to manually convert to WebP before uploading.
- Then, upload the WebP image to an external host, since Webflow CMS does not accept WebP uploads directly.
Summary
Webflow CMS does not support automatic WebP conversion for CMS images. To use WebP, upload your CMS images to an external service (like Cloudinary), apply WebP format transformation in the image URLs, and reference those in your Webflow CMS using external link fields.