Is Your Website Ready for WebP?

You may be surprised.

When one of my staff asked if it was time to start adding WebP images to the Noble Studios site, I was immediately hesitant. When I last checked (almost two years ago), WebP hadn’t been fully implemented by all top browsers.  But she referenced some exciting information about progressive image loading and how it could positively impact Core Web Vitals.

This is when it hit me—WebP is not only a more compressible format than PNG or JPEG, but it can also speed up our websites due to their use in progressive loading techniques. We are currently testing and analyzing small and more significant images on different site infrastructures to determine whether we’ll take advantage of this technology over the coming months.

What does WebP Stand for?

WebP stands for Web Picture format, which is an image file type developed by Google as a derivative of WebM, a video format file structure based on the Matroska container.

What is WebP?

WebP is a new image file format that provides superior lossless and lossy compression for images on the web. In addition, WebP offers high quality, smaller file sizes, and faster decoding than other popular formats.

WebP has been under development since September 2010, based on Google’s VP8 video codec, and offers superior compression to both JPEG and PNG.

Is WebP Better than JPEG?

A typical image will be 25-45% smaller than an equivalent JPEG when converted to WebP, while simultaneously maintaining the same image quality. Lossy versions of this format can see improvements of up to 95%. This means that pages load faster, use less bandwidth and save mobile users’ data plans. In addition, WebP offers better quality than JPEG at very small file sizes.

How Does a WebP Image Compare to PNG Files?

One of the most common image formats used on the web is the Portable Network Graphics (PNG) file. The PNG file format was developed in 1995 and is still a popular image format today. The file format has been around for a long time and is supported by almost all devices and operating systems. The lossless compression of WebP images can reduce file sizes by up to 25% compared to PNG files.

What are the Benefits of Using WebP vs. Other Image Formats?

The main benefit of using WebP is reduced page load times. WebP is smaller than JPEG or PNG files and takes less time to download.

In our tests with different types of photos and illustrations, we found that WebP images load faster than JPEGs and PNGs on most sites. For example, we tested nine images from a previous article: six were JPEG, and three were PNG. Here are the results:

These savings were most important with mobile devices, where we saw a 3-second saving on 3G, and half a second on 4G LTE. 

What are the Best WebP Converters for Existing Images?

You can also use the plugin for Photoshop or for GIMP (a free alternative to Photoshop). They all work similarly.  

If your website uses WordPress, several plugins allow for converting JPEG and PNG files en masse: Smush, LiteSpeed Cache, and TinyPNG.  A complete list can be seen here.

If you have a few images to convert at a time, there are several free online tools available. Our personal favorites are Squoosh.app, Convertio, and Cloud Convert.

Once you have your images converted to WebP, you can upload them to your website, and they will show up as WebP instead of JPEG.

WebP File Browser Support and Usage Statistics

Major browsers that support WebP;

• Chrome
• Safari
• Firefox
• Opera
• Edge
• Samsung
• Android

Some older web browser versions of Internet Explorer (IE) and Safari don’t support all parts of the WebP format. The chart below shows how many users have access to each browser version:

For the current global browser usage statistics, 94.56% of the sessions happening are on browsers that can fully handle WebP files.
Source: https://caniuse.com/WebP

Takeaway: WebP Can Make Sure Your Images are Optimized for Today’s Tech

We’re living in a world of mobile devices with high-resolution screens. This is great for consumers, but it’s not so great for developers.

The problem? Images are getting bigger. They’re taking longer to load, even on fast connections. And they’re using more data than ever before.

If you’ve tried to optimize your site recently, you may have encountered image size and quality problems. It’s easy enough to reduce the file size of images by removing unnecessary metadata and optimizing them for the web — but what about quality?

WebP is a way to make sure your images are optimized for today’s tech.

If you are interested in finding more about WebP, or if it can help your website with page loading or image file size issues, please reach out to us via our Contact Us form.