WebP Image Guide: How to Use WebP Format with WordPress

by on July 28, 2022
Woman wearing brown shirt smiling taking photo using camera while sitting

Ask Your Favorite AI

Copy the link to a markdown format of this article for ChatGPT, Claude, Gemini, or your favorite AI.

We all love a good GIF, but image formats have come a long way since the introduction of the GIF in 1987. Savvy web designers have moved on to embrace JPEGs, PNGs, and now WebP.

While GIFs are enjoying a second life as fodder for Slack channels and text messages, the new WebP format is starting to take over the web.

In this post, we examine the growth of WebP and offer tips on how to use it for your website. You’ll learn:

  • How the format works
  • Benefits of WebP images
  • Limitations of using WebP
  • How to enable WebP images for WordPress

How the WebP Format Works

Originally from On2 Technologies, Google is developing WebP as an open-source image format and hopes to make it the new accepted standard for web images.

WebP offers enhanced image compression. You can reduce file sizes without losing any image quality. WebP is unique in how it supports lossy and lossless compression.

Lossless compression allows you to reduce a file size while retaining the original image quality. None of the original data is lost, so you can restore the image to its original quality and size.

Utilizing lossy compression results in even smaller file sizes. Lossy compression retains only the data required to display an image at its reduced size. You won’t be able to size back up and retain the original quality.

To take full advantage of WebP, use lossless compression for images that need to scale to different sizes, such as background images. Use lossy compression for images with fixed dimensions. If you know the max width of a featured image or product image for your site, you can save it with lossy compression to those exact dimensions.

Benefits of WebP

So what’s fueling the growth of WebP? The format offers many advantages, including ease of use and performance. Let’s explore the top advantages of using WebP for your website.

Easily Convert Existing Images

You can convert any existing PNGs, GIFs, or JPEGs from your site into a WebP file. You won’t sacrifice quality and will typically reduce the file size.

Better Compression

If you convert a PNG or JPEG to a WebP, the WebP file size will be 30 to 50% smaller than the original. Smaller images should help your pages load faster, which is why we recommend image compression as one of the best ways to speed up your WooCommerce site.

Better Site Performance

Faster loading images and pages create a better user experience. You also can boost your search engine rankings by optimizing your site for speed. Search engines place a premium on how quickly your site loads. Faster loading sites tend to rank higher than slower ones.

Serving images in a next-gen format like WebP is one of our 12 tried-and-true ways to improve your Google PageSpeed Insights Score.

Support for Transparency and Animation

Who doesn’t love an animated GIF? With WebP, you’re in luck. WebP supports animation and transparency.

Widespread Browser Support

Most modern browsers support WebP. Apple’s Safari browser was the lone holdout but finally introduced WebP support last year with Safari 14.

Limitations of WebP

The main limitation of WebP is ensuring compatibility in all the ways you’ll use an image. You could run into issues if you use your website data to feed into email campaigns or mobile applications.

Be sure to test all the places an image will appear to ensure the WebP format will work. You also could consider offering two versions of an image. Use the WebP when allowed and a fallback JPEG or PNG for when WebP is not supported.

How to Enable WebP with WordPress

WordPress started offering WebP support with version 5.8. If your server supports WebP, you should be able to upload and use WebP images like any other supported image type.

Options for using WebP images in WordPress include:

  • Manually Converting Images. Use an online tool like CloudConvert to transform images to WebP. It’s a time-consuming manual task as you’ll have to upload the files to the converter and then upload the new file to your WordPress library.
  • Image Optimization Plugin. Many image optimization plugins include options for converting and displaying images as WebP files. We highly recommend Jetpack as our top choice for this. Some alternatives to consider include the EWWW Image Optimizer plugin or the WordPress Performance Lab plugin.
  • WebP Plugin. Instead of an optimization plugin, you also can use a plugin to automatically serve your images as WebP.

Just remember that any plugins requiring special NGINX configurations are not supported on Pressable.

Faster Sites with WebP and Pressable

If you’re interested in WebP, you probably want your site to load as fast as possible. Reducing your image file sizes in half with the awesome compression of WebP is a great place to start. The other way to ensure your site works as fast as possible is to pick the right host.

At Pressable, our hosting services deliver the best performance possible for WordPress sites. Our cloud-based managed WordPress hosting service makes managing your site simple while offering 100% uptime and lightning-fast speed.

Oh, and WebP support? We’ve got that covered. Our global CDN network also supports WebP, so you can reap all the speed-enhancing benefits of using this new image format.

To learn more about how Pressable makes WordPress work better, book a custom demo today.

Read More Articles in WordPress Tutorials

Green background with female in a yellow shirt, she is pointing to the title of the post, "Full Site Editing in WordPress 6.0"
WordPress Tutorials

Your Guide to Full Site Editing with WordPress 6.0

If you love the block editor, you’ll adore Full Site Editing with WordPress 6.0. With the release of 6.0 in May, Full Site Editing made a giant leap forward. There’s a lot to be excited […]

Illustration of a paint roller updating a webpage
WordPress Tutorials

How to Update WordPress Themes While Preserving Custom CSS

You’ve just finished customizing your WordPress site, and it’s finally looking exactly how you want, colors on point, layout perfectly polished. But just as you’re ready to show it off, a notification pops up: there’s […]