How to convert to WebP using Webflow's built-in tools

WebP (pronounced "weppy") is a next-generation image format developed by Google. Compared to JPEG and PNG, it can significantly reduce file sizes while maintaining equivalent image quality, making it an effective format for improving website loading speeds. Website loading speed is a crucial factor influencing user experience, and optimizing images is essential for improving it. In this article, we will explain how toWebflowconvert and efficiently compress images to WebP format using its built-in tools.

Benefits of WebP

Compared to traditional JPEG and PNG formats, WebP offers the following benefits:

Reduced file size while maintaining high image quality

WebP can reduce image file sizes by up to 34%, which improves web page loading speeds.

Furthermore, despite its high compression ratio, WebP hardly degrades image quality. This allows you to maintain beautiful visuals while reducing data usage.

Source:https://developers.google.com/speed/webp/gallery1

Equivalent color depth to JPEG

Both WebP and JPEG support 24-bit color, allowing them to display approximately 16.7 million colors. JPEG is primarily used for photographs, achieving high compression while preserving color data. WebP, on the other hand, can reduce file sizes while retaining color data equivalent to JPEG, making it a suitable format for the internet.

Improved user experience

When website loading speeds improve due to reduced file sizes and high compression ratios, it also positively impacts SEO. Faster website loading can lead to a decrease in bounce rates and exit rates, which in turn can increase conversion rates and contract numbers.

How to convert images to WebP in Webflow

In Webflow, the conversion of file extensions is automatically handled by built-in tools, which is very convenient as it saves you the trouble of manual replacement. Here, we will explain in detail how to convert images to WebP in Webflow.

1. Select "Assets"

Click the "Assets" panel displayed on the left side of the Webflow Designer.

‍

2. Select the images you want to convert

From the images displayed in Assets, select the images you want to convert to WebP (multiple selections are possible). We recommend searching for specific extensions like JPEG or PNG and then clicking "Select All" to convert them all to WebP format at once.

3. Click "Compress"

Once you have finished selecting the images, click "Compress."

‍

4. WebP conversion complete

 After clicking "Compress," the conversion to WebP will be completed automatically after a short while. Please note that images that cannot be converted will remain in their original format.

How to convert images uploaded via CMS to WebP

Images uploaded via CMS, such as those used in blog posts, can also be converted to WebP.

Here, we will explain in detail how to convert images uploaded via CMS to WebP.

1. Select "Compressor Assets"

Open your CMS Collection and select "Compressor Assets." If "Your assets are all ready" is displayed after selection, the WebP conversion is complete.

3. Publish

To reflect the WebP conversion, access the Webflow Designer or Site Settings and click "Publish to selected domains."

‍

4. Confirm WebP conversion

Once publishing is complete, open the images uploaded to your CMS and check them.

‍

If you open the image and its URL extension is .webp, the conversion is complete.

Summary

Webflow allows you to easily convert images to WebP format using its built-in tools. Compared to JPEG and PNG, you can significantly reduce file sizes while maintaining high image quality. This improves website loading speeds and is expected to enhance the user experience. Utilize the WebP conversion feature to build a more comfortable website. If you have any questions regarding image compression, please feel free to contact us.