How to Speed Up Your WordPress Site With WebP Images

You probably recognize by now that using images on your website is a great way to break up long walls of text, and of course, images help keep your visitors engaged. As they say, a picture is worth a thousand words.

But that engagement comes at a cost – file size. The more images you use on a page, the larger that page’s file size will be. And a larger file size means slower load times. Did you know that WordPress.com ranked as the fastest WordPress host in Review Signal’s 2021 test? That’s a huge win, but even the fastest host will encounter slower page speeds if that page includes enormous image files.

Now that certainly doesn’t mean you shouldn’t use images on your site, but it does mean that you need to pay a little extra attention to your images to make sure you’re optimizing them to avoid performance issues.

There are a few common strategies for optimizing images for performance, such as resizing and compressing them. But another important detail is the file format of the images themselves – e.g., JPEG, PNG, or the focus of this post – WebP.

What Is WebP?

WebP is a modern image file format that can reduce the file size of your images without changing their quality or resolution. Smaller file sizes mean faster web page load times. WebP’s image file sizes are considerably smaller than other image formats such as JPEG, PNG, and GIF, and this reduction in size causes no harm to your visitors’ experience.

Using WebP images also helps create a greener web because every byte of data requires energy to transfer and store. If the world can reduce the size of image files on websites, loading websites will require less energy usage.

WordPress recently added support for the WebP image format, which means that your site can now start benefiting from it. For example, let’s say you want to include an image of your most recent vacation in the blog post that you’re writing. Instead of adding that image as a JPEG file, you could upload it as a WebP file. This would result in happier site visitors, as your web page will load faster for them.

In this post, you’ll learn everything you need to know about WebP, including how you can start using WebP images on your own WordPress site.

The History of WebP Images

The WebP format was developed by Google and originally launched back in September 2010.

Google has added new features to it since that initial release and released it as an open format, which means that anyone can freely use the WebP format with no restrictions. It’s a similar idea to open-source software, which is what WordPress is.

Over time, support for the WebP image format has grown, and all major browsers now offer support for WebP images – more on that in a later section.

What Makes WebP Images Different from Other Image Formats?

The specific compression technique that WebP uses is highly technical, so we’ll just summarize the basics below. You can dive deep into the details of the format here if you’d like.

Essentially, WebP uses something called “predictive coding” to reduce the amount of information that it needs to store for an image. Instead of storing data for every single pixel in the image, WebP can use the values in neighboring blocks of pixels to “predict” the values in other blocks of pixels and only encode the difference.

Because there’s less information to store, WebP can offer smaller file sizes without changing the image.

Like JPEG, PNG, and GIF images, WebP supports both lossless and lossy compression:

Lossless compression – lets you further shrink the file size of an image without changing its quality.
Lossy compression – lets you achieve big reductions in file size but at the cost of some image quality (which may or may not be visible to the human eye).

WebP also supports transparency, which means you can use WebP for images that need transparent backgrounds (such as logos and icons).

WebP Image Size vs. JPG and PNG

At this point, you might be wondering how the file size of a WebP image compares to an identical image in the JPEG or PNG formats.

Back in 2011, Google ran some detailed comparison studies to assess this:

For WebP vs. PNG images, Google found that WebP images were 26% smaller than the equivalent PNG images.
For WebP vs. JPEG images, Google found that WebP images were around 25-34% smaller than the equivalent JPEG images.

Basically, on average, you can expect that a WebP image will be around 25% smaller than the equivalent JPEG or PNG file.

Which Browsers Support WebP?

In the past, one issue with WebP was that it wasn’t supported by all web browsers. Chrome, Firefox, Edge, and other Chromium-based browsers (like Opera) have long had support for WebP images.

However, Apple’s Safari browser had been the lone holdout before finally adding WebP support in Safari 14, released in September 2020.

As of July 2021, all major web browsers now support WebP images, according to Caniuse. Overall, Caniuse estimates that 95% of all visitors around the globe are using a web browser that supports the WebP image format:

Source

There is one little caveat with the Safari browser’s newly-added support for WebP images – it only applies to Safari version 14.0 and later. Initially, only users on macOS 11 Big Sur or later were able to install Safari 14. However, this problem has lessened now that Apple has released Safari 14 on older macOS versions like Catalina and Mojave.

Still, any older macOS users who haven’t updated to Safari 14 won’t have WebP support in their Safari browser.

Beyond that little hiccup, the only other breaks in WebP’s near-universal support are Internet Explorer, which Microsoft will officially cease supporting as of August 2021, and KaiOS browser, a lesser-known mobile operating system that’s used by some ultra-budget smartphones.

Basically, excluding a few edge cases, WebP now enjoys universal web browser support.

How to Use WebP Images on Your WordPress Site

Thanks to a recent update to WordPress, you can now upload WebP images directly to the WordPress Media Library and insert them into your content just like you would other image formats, such as using an Image block or one of the gallery blocks.

However, before you can upload them, you’ll first need to create an image in the WebP format. So, let’s cover both pieces of the puzzle!

How to Create WebP Images

Your photo editing software may not save images in the WebP format yet, but some do. PixlrE, for example, lets you save images as WebP in the same way you would save them as JPEG. If your favorite image editor doesn’t have this feature yet, you might want to look for addons or extensions that provide it, such as this free WebPShop Photoshop plugin from Google. If none of those options exist for your image editor, you don’t need to worry. Instead of creating a WebP image from scratch, you’ll simply take an existing image in another format and convert it to WebP.

Convert Images to WebP Format

The easiest way to convert an image (or images) to WebP is to use one of the many cloud conversion tools. With these websites, all you do is upload the images in their original formats, click a button, and the tool will let you download your images in the WebP format.

A popular option is Convertio. To use it, you’ll need to:

Upload your images – you can upload up to 100 MB of images in one go.
Choose the original format of your images (e.g., JPG).
Choose the destination format (WebP).

Then, the tool will prompt you to download the WebP versions of your images.

How to Upload WebP Images to WordPress

Once you have an image in the WebP format, you can upload it to your WordPress site just like you would other image formats such as JPEG or PNG.

If you’re creating content in the WordPress editor, you can add one of the image blocks and upload the WebP image to the block.

Or, you can also upload WebP images directly to the WordPress Media Library. For more on how that works, check out our complete guide to the WordPress Media Library.

How to Automate WebP Images With an Image Optimization Plugin

If you’ve created your site with the WordPress.com plugin-enabled plans, you can also install a WordPress plugin to help you automate using WebP images on your site.

There are two ways that a plugin can help you with WebP images:

First, the plugin can simplify the process of converting images to WebP by automatically converting them when you upload them to your site.

This is convenient because it means that you can still just find or create images using formats that you’re more familiar with (like JPEG or PNG). When you upload the files to your WordPress site, the plugin will automatically convert them to WebP.

Building on that convenience, a plugin can also bulk convert all of the existing images on your site to the WebP format.

Second, an image optimization plugin can help handle the <5% of users who might not be using a browser that supports WebP images. Essentially, the plugin lets you automatically serve WebP images to visitors whose browsers have WebP support, while delivering the original image format to visitors whose browsers don’t support WebP.

This second benefit is less important now that WebP enjoys such widespread support, but it’s still useful to handle edge cases and ensure that every single visitor sees a working image.

WordPress Image Optimization Plugins That Support WebP

There are a lot of different WordPress image optimization plugins that come with WebP support. Typically, these plugins are free for a certain amount of usage per month (say, optimizing up to 200 images). If you need to optimize more images than allowed on the plugin-enabled plan, you’ll need to purchase a one-time credit bundle or subscribe to a monthly plan.

Many sites will be fine with the plugin-enabled plans. If you do need the plugin-enabled plans, you’ll typically only be looking at ~$5 per month or so.

Here are some popular options:

Not sure how to start using these plugins? Here’s a guide that shows you how to install plugins on WordPress.com.

Conclusion

The WebP image format is a great way to reduce the size of the images on your WordPress site without changing their quality. By shrinking the size of your images, you can make your website load even faster and create a better experience for your site’s visitors.

As of July 2021, WordPress now offers built-in WebP image support so that you can upload WebP images directly to your site and insert them into your content just like other image formats.

If your existing image uses a file format such as JPEG or PNG, you can use an online converter tool to convert it to WebP before you upload it to WordPress.

Or, if you created your site with the WordPress.com plugin-enabled plans, you can also use a plugin that will automatically convert images to WebP as you upload them to your site.

If you’re ready to get started with WordPress and WebP, create your fast-loading website with WordPress.com today!

How to Speed Up Your WordPress Site With WebP Images