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, including Jetpack, already include options for converting and displaying images as WebP files. Check your plugin’s documentation to see how to enable the options for your site.
- WebP Plugin. Instead of an optimization plugin, you also can use a plugin to automatically serve your images as WebP.
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 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.
Jessica Frick
Jessica serves as the Director of Operations for Pressable and is dedicated to creating the best managed WordPress hosting experience possible. She's been using WordPress since 2008 and has been serving in WordPress-focused roles since 2010. When she's not working, you can find her spending time with her family, serving in her community, watching hilarious dog videos online, or brewing a pitcher of iced tea.
