Load Website Images Faster With WebP

Nov 8, 2019 | Tips

Form vs. Function

A Struggle as Old as the Internet Itself

 

In case you didn’t already know, Google hates the traditional image formats like JPG and PNG.

As developers, we do things to try to combat this by resizing images to the exact specifications for the container that we’re trying to fill. Then we run them through a compressor to try to get as small of a file size as possible. Even with these efforts, the images on your website can still hurt your site’s page performance. One of the downfalls of trying to speed up image load this way is that in doing this much compression; we can also hurt your image quality, resulting in blurry or pixelated images on your site.

Images are crucial in good web design, and they aren’t an element that we can necessarily get rid of and say we don’t need.

So, how should we approach this catch 22?

Google’s Suggestion:

Quite a while back, Google developed a method to put a stop to this problem by creating a next-gen image format called WebP. Google highly recommends using WebP and other next-gen formats to significantly reduce the size of your images while still preserving their quality.

Converting your images to WebP format can save as much as an entire second on your page load time. In an age where you have 2-4 seconds to turn a visitor into a user, shaving almost a second on your website load time can dramatically improve your conversion rate.

But is WebP the best solution for this problem? Let’s take a quick look.

What Is WebP?

Google developed WebP back in 2010. Originally, WebP used lossy compression in an attempt to create smaller yet still high-quality images for the web.

Lossy Compression for WebP

Lossy compression is used to reduce the file sizes of JPGs and GIFs greatly. To make that happen, though, some of the pixels from the file need to be dropped out or “lost.” The compression can cause some degradation in the quality of the image, though it’s not always noticeable.

WebP offered a significantly more efficient use of lossy compression and became the much-needed successor to JPG.

What Are the Advantages of Using WebP?

It’s not just good enough to say that WebP is “better” than JPG and PNG. It’s important to understand how WebP works and why it’s so beneficial to use over other file formats as a result.

With traditional image formats, compression always compromises quality.

WebP lossy compression, on the other hand, uses what’s known as prediction coding to adjust the pixels in an image more accurately. WebP handles compression more efficiently and effectively. This is due to the variety of compression techniques used as well as entropy encoding applied to images.

Acceptance of WebP Among Browsers, Devices and CMS

When WebP was first released, it was only supported by Google’s browsers and devices. Over the years, other platforms have begun to provide support for WebP images.

That said, WebP still doesn’t have universal support, which can cause problems for web designers who use this image format by default.

Take a look at where you can expect full acceptance of your WebP images, where you want, and then we’ll discuss what you can do to get around this.

In 2019, Can I use… has accounted for the following platforms that support WebP:

 

Converting and Delivering WebP

WebP doesn’t have 100% support on the web. Not yet, anyway. But that’s okay. For the most part, we can work around these exceptions in terms of adding support to the tools we use to design and build websites.

But what do we do about the browser piece? If our visitors show up on an iOS device, how do we make sure they’re still served an image if our default image is WebP?

One thing we can do, which works well, is telling our content to be delivered in a specific file format to users with certain constraints. This would provide those users an appropriately compressed JPEG instead of serving them a WebP.

In Summary

There’s a reason why Google went to the trouble of developing a new image format and why more and more browsers, design systems, and content management systems are supporting it.

Images can cause a lot of problems for websites that have otherwise been built to be lean and mean. If they’re not uploaded at the right size and if they’re not compressed, your images could be the reason that your website’s speed is driving visitors away.

With WebP, your website is sure to load more quickly, and there doesn’t need to be a tradeoff between image quality or quantity to gain that speed. WebP compresses files while preserving the integrity of the image content.

If you’re struggling to increase the speed of your website, then WebP should be the next tool you turn to for help.