How can I convert CMS images to WebP on my Webflow site?
TL;DR
- Webflow doesn’t auto-convert CMS images to WebP, so manually upload WebP files or use external tools like Squoosh or Photoshop plugins to convert before upload.
- Alternatively, use an image CDN (e.g., Cloudinary) to serve images as WebP via dynamic URLs in CMS fields or replace CMS images with custom embeds using
<img>tags and WebP URLs.
Webflow does not currently support automatic WebP conversion for CMS images, but you can work around this limitation using custom code or external tools.
1. Use Webflow’s Native Image Optimization (Limited)
- Webflow automatically converts static images (added via Image elements or Backgrounds) to WebP when possible.
- CMS images are excluded from this optimization. Images added via CMS Image fields or Rich Text elements will load in their original format (e.g., JPG or PNG).
2. Convert Images to WebP Manually Before Upload
- Export images in WebP format before you upload them to the Webflow CMS.
- Tools for conversion:
- Squoosh (https://squoosh.app)
- TinyPNG WebP Converter
- Photoshop or Figma export using WebP plugins
- Upload the .webp file directly into your CMS image field just like any other supported format.
3. Use a CDN or Image Proxy Service
- Use services like ImageKit, Cloudinary, or imgix to host and convert your images.
- Steps:
- Upload the original image to the service.
- Use the CMS field to store the external image URL.
- Retrieve these URLs dynamically in Webflow and append the provider’s WebP transformation parameter (e.g.,
?format=webp). - Insert using a custom embed block or in a custom code snippet inside a Collection List.
4. Replace CMS Image Elements with Custom <img> in Embed
- Add an Embed element in a Collection List and use:
<img src="https://cdn.prod.website-files.com/path-to-your-image.webp" loading="lazy" alt="Some alt">- Make sure to bind the CMS data using Dynamic Fields for the
srcoraltattributes. - You must upload
.webpfiles manually and store their URL in a separate CMS plain text field if Webflow blocks WebP files during CMS uploads.
5. Use JavaScript to Convert at Runtime (Not Ideal)
- You can write custom JavaScript to detect browser support and replace
.jpg/.pngimage URLs with.webpequivalents. - Not recommended for performance or SEO since image URLs load after page render.
Summary
Webflow doesn't auto-convert CMS images to WebP. Your best options are to upload WebP images manually, use an image proxy service, or replace CMS image elements with custom embeds using pre-converted WebP files or dynamic URLs.
