Want to make your Webflow site faster? Consider converting your images to WebP. In this article I'll tell you my process for doing just that.
As I am doing ongoing maintenance work and site improvements for a larger Webflow site (Webflow Enterprise client), which includes speed optimisation, I want to share my experience with the WebP image format and its implementation. This article will not only give you a brief rundown of the WebP format and what to look out for – but also my preferred workflow for creating new WebP images and converting existing Jpg or Png images to this format.
WebP is an image format developed by Google, which reduces the size of the image without loosing quality. Note that some older browsers don’t support WebP just yet. Therefore it’s useful to check which browsers (and browser versions) the majority of your target audience uses, so you can determine if you need a fallback option for those images. A good overview of supported browsers can be accessed via the Can I Use…. Webflow does not have a way natively to offer alternative image replacement in this case, so you’d have to implement a custom code solution for this. I recommend taking a look through the official Webflow forum, if this is something you’d like to explore further. You can read Webflow’s own article about WebP in their blog post.
I frequently use Figma for resizing and exporting images and when creating new images in WebP format I utilise Figma as well. Unfortunately the software can’t export images in WebP natively, but there is a handy plugin called WebP Exporter to help with this task. This plugin can be downloaded for free from the Figma Community. Once installed and activated, you select your desired Frame within Figma and WebP will allow you to set your preferences for the export such as scale and image optimisation. The exported image can then be uploaded into Webflow’s asset panel or used within a CMS item.
Your site might already have images – most likely in jpg or png format – and you might want to convert these to WebP for better site performance. While Webflow allows you to convert images to WebP within the asset panel (just select an image and then press convert), I would not recommend this approach. One issue is that Webflow replaces your original image with the new WebP image and there is no way of getting your original one back other than reverting to a previous site backup. Also, note that Webflow only enables automatic conversion of images to WebP within the asset panel, not within CMS collections. You are also not able to save the converted WebP images elsewhere without first downloading from your asset panel.
What I do instead is export/download the original images from Webflow, and use an online batch conversion tool for converting them to WebP. Once conversion is completed I upload the WebP images back into Webflow (this often also gives you a chance to better organise the site’s folder structure if this wasn’t done previously). The on-page images are then re-connected to the new WebP versions with the old jpgs/pngs being deleted from the asset panel and the site republished. This process (image download, conversion, image replacement, image deletion) is then repeated page by page. It helps to keep track which pages have already been completed. The original images, as well as the WebP images are saved elsewhere for future reference if needed.
The conversion process can take while – in particular if you are working on a large site – but the benefits can be worth it when it comes to page speed and load times.
Need a hand with this? Don't hesitate to get in touch with me!
Fill out the form below and I'll be in touch with you usually within 48 hours. You can also say hi via email.
