Why use the WebP format on my Webflow site?

Introduction

Images usually account for around 50% of a web page's weight. That share can be much higher for photographers, graphic designers and other image-related professions. Google takes page load speed into account for SEO. Optimizing your site's images is therefore a priority for any webmaster.

A few years ago, Google engineers created a new image format, WebP. This compression format produces images of a quality comparable to JPGs, while being 34% lighter on average.

In this article, we explain what the WebP format is and how to use it on your Webflow site to significantly reduce the weight of your images.

Here is what we cover:

1. What the WebP format is.
2. Why use the WebP format.
3. Browser compatibility with the WebP format.
4. Why the WebP format is still not widely used.
5. The drawbacks and advantages of the WebP format.
6. How to import a WebP image into Webflow.

What is the WebP format?

WebP is an image file format developed by Google in 2010. It aims to replace traditional formats such as JPEG, PNG and GIF. WebP compresses images while supporting transparency and animation.

Based on the VP8 codec, the WebP format has been improved continuously to ensure good image quality. In 2012, Google added support for lossless images with transparency. WebP then became a credible alternative to PNG.

Why use the WebP format on your Webflow site

The image shown in WebP format is 75% lighter than its PNG version. Imagine the effect on a photographer's homepage or on an artist's portfolio with many images. Load times would drop sharply.

With the WebP format, your image files are lighter and your pages load faster. The user experience improves, your bounce rate goes down and your SEO improves, because Google's crawlers like fast pages.

Web browser compatibility with the WebP format

At first, browser support for the WebP format was a major brake on its adoption. Safari, Apple's browser, only recently started recognizing Google's format. Until then, it preferred the HEIF format, derived from a video format. Today, the WebP format is supported by all the major browsers, which makes it easy to use on the web.

Why is the WebP format not widely used?

The late recognition of the WebP format by browsers slowed its adoption. Our habits also play a role. Software such as Adobe Photoshop, Illustrator or Figma often saves as PNG or JPEG by default, and users rarely change their settings. Together, these factors explain the slow adoption of the WebP format, despite its many advantages.

The drawbacks and advantages of the WebP format

The advantages of WebP files

• Faster pages. This format improves the user experience and helps your site rank better in Google search results.
• Browser compatibility. WebP is now supported by all the major browsers, including Google Chrome, Microsoft Edge, Mozilla Firefox and Safari, which cover around 64% of web traffic.
• Lighter storage. By compressing your images with WebP, you free up space in your databases and reduce your business's storage costs.

The drawbacks of WebP files

• Low awareness. This format is still not well known, even among photographers. Those who are not interested in SEO are often unaware it exists.
• Limited offline use. WebP is mainly designed for the internet, which makes it harder to use outside the web.
• Old browsers. Browsers such as Internet Explorer handle WebP images poorly. Their use has become marginal, though.
• Image quality. Like JPEG, WebP is a compression format, which leads to a loss of image quality.

Importing a WebP image into Webflow

To compress your images properly before importing them into Webflow, we recommend TinyPNG. This service is free and very effective.

Once your image is compressed with TinyPNG, follow the steps below to import it into Webflow.

Convert Webflow assets to WebP

1. Open the Assets panel with the J key.
2. Type "png" in the search bar.
3. Click "Select all", then "Compress".

Convert Webflow CMS assets to WebP

1. Open the CMS tab in Webflow.
2. Click the 3 small dots at the top of the tab.
3. Select "Compress assets".

Conclusion

Switching to the WebP format on your Webflow site pays off. Lighter images, with no loss of quality, make pages load faster. The user experience and your Google rankings both benefit.

WebP was slow to gain recognition, but it is now compatible with all the major browsers. In Webflow, using it is simple and effective thanks to the available compression and conversion tools.

The WebP format helps you keep a fast, competitive, well-ranked site with a quality user experience.