The HTTP archive’s studies show the average weight of a desktop webpage has ballooned from 523 kilobytes in 2011 to 2196 kilobytes in 2021. A bigger website means longer loading times, and web users as a whole tend to be impatient.

Most of that slow-loading page weight is made up of images. If you’re going to include all the beautiful media that makes your website exciting — and data-heavy — you’ll want to stay on top of the new technologies that help optimize your site performance, size, and loading speed. 

That’s where WebP images can come in handy. 

WebP is a compact, modern image format that you can use to serve high-quality images that are a smaller file size than traditional formats like JPEG and PNG. With smaller images, your site loads faster and ranks better on SEO without compromising your site’s image quality.

What are WebP images?

WebP is an image file type created by Google that provides lossy and lossless image compression for the web. Launched in 2011, it has effectively gone mainstream since its widespread browser adoption in 2020. WebP files can be recognized by the filename extension .webp.

WebP is an open-source technology, and anyone can download and contribute to the source code. The WebP format was developed by Google to reduce the size of compressed images without losing quality. The company does this by using predictive coding similar to that used in encoding video keyframes. 

Google’s research shows it has managed to successfully compress images into significantly smaller file sizes. The company reports that WebP boasts the benefit of being 26% smaller than PNG files and 23–24% smaller than equivalent JPG files. A WebP image size can be up to 16383 × 16383 pixels.

Where is WebP supported?

It’s safe to say WebP has been pretty widely adopted as standard at this point. As of 2022, WebP has a 97% market share among web browsers. This includes Google Chrome, Safari, Firefox, Edge, and Opera. CMSs like Webflow and graphics tools like Photoshop now commonly support WebP images as well.

Though so many tools support WebP, JPG is still the most popular image format on the web. According to the HTTP Archive, WebP only accounted for about 7% of all the images on websites in 2021. However, that number has been growing.

Key features of WebP image files

Not all image formats have the same capabilities. One of the advantages of the WebP image format is that it can handle more features (such as transparency and animation) than other file formats at a smaller size.

Lossy and lossless compression

WebP can be used for either lossy or lossless compression. These terms identify what happens when image compression is reversed. Lossy compression loses data when the file is decompressed, while lossless loses very little to no data. The advantage of lossy compression is it creates a much smaller file size than lossless can. 

Transparency

WebP images support transparency (i.e., an alpha channel). Other formats like PNG files do too, but JPGs do not. Transparency also adds less data than other formats, according to Google’s research.

Transparency is especially useful when designing websites. It allows you to create uneven borders on a shape and see the background behind the shape, for example, with the Webflow logo below. It also allows you to create depth and contrast with page elements layering above and below each other. You can even create more advanced visual effects like glassmorphism that make your site look fresh and modern.

Animation

WebP images can be animated, like the well-known GIF. This is an advantage over JPGs which don’t support animation. WebP animated files are also smaller in size than GIF or APNG files.

Metadata

WebP supports adding metadata to images using both XMP and EXIF. Metadata is useful for giving digital context to images — for example, time and location data attached to an image from a digital camera. You can add tags and short descriptions to images with metadata that help search engines identify images, boosting your SEO.

Color profile

You can embed an ICC profile for color management to a WebP file, which is managed by the International Color Consortium. An ICC file can be imported into image editing programs like Adobe Photoshop to help manage color in a file across devices or for printing.

The benefits of using WebP images when building websites

WebP is a more efficient way of encoding images. It makes image files smaller, use less storage space and makes your site speed faster. Smaller images help your web design in a few important ways.

Using WebP images can make your site faster

Data is one of the biggest factors that slow down a website. PageSpeed Insights is one of the best tools for analyzing your website’s performance on a granular level. It identifies properly sizing images, efficient image encoding, and using modern image formats as key ways to improve your site speed.

A faster site improves customer experience, leading to better bounce rate and conversion

There are few things that turn visitors off faster than slow-loading pages, and faster loading time can make a tremendous difference in your bounce rates and conversion. 

Study after study has shown that website visitors are reluctant to wait for pages to load. At just 10 seconds of loading time, bounce rate increases by 123%. 

Customers are also much more open to converting when a page loads quickly. A Portent study showed that decreasing page load time from just 5 seconds to 1 second increased conversion rates two and a half times. For ecommerce, speed is even more important, with conversion dropping by 0.3% for every second of added load time.

Faster-loading sites are better for SEO

A faster-loading website can help your search engine optimization (SEO) as well. As of 2021, Google’s algorithm update adds page experience, which includes multiple page speed measurements, as a ranking factor. User behavior on your website will also affect your ranking, especially bounce rate.

Smaller files help you save storage space

The smaller the compression is on your image files, the less space you’ll have to pay for. 

You only have so much disk space on a server for your website, and depending on your website hosting, storage can get expensive. It’s not only media that needs to fit in your storage either. You may have themes from your CMS, JavaScript, CSS, and databases to keep your site running. 

Where you can create and convert WebP images

To use WebP images on your website, you need a CMS — like Webflow — that supports WebP. You can then either create new images in a graphics software that allows you to save files as WebP or convert your existing images on your computer or within your CMS.

Create WebP images with graphics software

You can create WebP files natively with many different graphics programs, including Photoshop, Google Photos, Blender, and many others. Google has a free plug-in that supports WebP for earlier versions of Photoshop as well.

When saving a finished image on a graphics program that supports WebP, WebP will be one of the dropdown options offered when you opt to “save for web.”

Convert images to WebP using Google’s software

If you’re somewhat technically savvy, you can download Google’s WebP precompiled cwebp conversion tool and use it to convert images to WebP on your computer. You can also install Google’s libwebp API to encode and decode WebP files. Both sites contain detailed instructions for compressing images with these tools.

Convert existing images in your CMS with Webflow

You can also convert images already in your Webflow CMS to WebP with the asset manager. Webflow’s WebP image conversion tool will convert and replace images you are already using to WebP. This video gives step-by-step instructions for how to convert images to WebP in Webflow.

What else you can do to optimize your websites

Image optimization is just one way you can optimize your website performance. Lazy loading images, improved font loading, and preloading links can all speed up your website’s performance. 

Build a responsive website that works well across mobile and other devices. Make sure your images are sized to load well on mobile devices, especially since mobile browsers are more likely to be working with slower connection speeds. Choose hosting for your website that’s not only fast, but reliable.

WebP is just one of the tools you can add to your website building expertise. Building for the web is ultimately about crafting an excellent user experience. You can do that by optimizing your site so it loads so quickly and effortlessly that users never even think about it.