We’ve all heard the tired adage, “a picture is worth a thousand words,” and it rings true in more ways than one in the digital age. In a fast-paced, content-filled world, images speak to us in a special way.
How you display these images—whether it’s in a big matted photo frame on a gallery wall at an art museum, or perhaps on a tiny screen in your hand—matters. We want high-quality experiences for everyone.
And while we love to see beautiful photos and informational graphics on the websites we visit, it potentially comes at a tradeoff. In short, users will wait around for something to load for a little bit, but not forever. And if it doesn’t look good, well, it hurts your brand.
In this post, I recap how I saw an opportunity to improve loading performance by adding WebP to WordPress.
What is WebP?
Web engineers have long worked on solving this problem. While you might consider GIFs and JPEGs to be a standard, for a variety of reasons we often use newer formats like PNGs, MP4, JPEG2000 in many instances—as they typically compress to smaller sizes with less artifacts.
The new kid on the block is WebP, a modern image format that provides superior lossless and lossy compression for images on the web. It’s finally landed in all browsers, and a big push has been made to encourage developers, platforms, browsers and the like to support it. It’s an even better solution to the problem.
It was designed to support both lossy and lossless compression and load faster than other formats (JPEG, PNG, and GIF). In fact, this format can be up to 34% smaller than similar JPEG images. around a 34% smaller in file size than and allows for faster websites without needing to sacrifice high quality images.
We at XWP desire to make the web a faster place and I was able to use some of my WordPress+ time to research the issues, engineer a solution, and get support for shipping this as part of WordPress Core.
Been looking into why WordPress doesn’t support webp image format today. If you don’t know, the format makes for much smaller file sizes and is designed for use on the web. The reason it is not in core seems to be related to safari not supporting it. https://t.co/RmALRHoygg 🤔
— Jonny Harris (@thespacedmonkey) March 3, 2020
WebP support in WordPress has landed. https://t.co/fF9qLjjPDC Worked really hard on this one and I am proud of it. Massive props to @roundearth for landing this. Heres to making the web’s images much smaller!
— Jonny Harris (@thespacedmonkey) May 4, 2021
XWP’s own @thespacedmonkey has helped bring WebP support to the latest #WordPress core release. Awesome job, Jonny! Learn more about the update here: https://t.co/nwDGobKI6k
— XWP (@XWP) May 5, 2021
As of WordPress 5.8, WordPress can now handle the upload and editing of WebP, an image format developed by Google specifically for the web.
The work to get WebP supported by WordPress was a collaboration between a member of the Google open source team, Adam Silverstein and a member of XWP engineering team Jonny Harris.
Brief History of WebP
There have been existing plugins that would allow for the upload of WebP files such as WebP Express and Imagify. Even some CDN’s like Cloudinary would automatically serve files to WebP for you on the fly. (Side note: XWP has been working over the past several years with Cloudinary, a featured WordPress VIP technology partner. The development of their enterprise-grade media plugin makes navigating through these technical details a breeze for teams.)
However, the biggest limitation of adding support for WebP to WordPress core has been browser support. Previously, many of the biggest browsers including Chrome, Edge, and Firefox, all supported it, with the biggest holdout being Safari, which is popular on both desktop (Macs) and mobile (iOS/iPad OS). But with iOS 14 (released September 16, 2020), Apple finally added support for webp. With Safari finally on board, about 95% of browsers now support the WebP format, and a wide range of users will be able to view WebP files.
Those using older browsers will not be able to view WebP files, so those who wish to continue supporting legacy browsers for a while may want to hold off on uploading WebP files natively. With WordPress 5.8 also dropping support for IE11, it’s unlikely that those running legacy browsers may already struggle with aspects of using your site.
Plugin Support
It is likely that many plugins will need to be updated to support WebP fully. The Jetpack and Web Stories plugins (both of which XWP helps create) have already been hard at work to add support, and it is likely that other plugins will need to test and tweak their media implementations to ensure that the plugin is compatible with the upload and use of WebP image files.
The Future
As the WebP format has performance benefits, Adam Silverstein has opened a ticket to automatically convert all image sub sizes to WebP. This is a different behaviour than what currently happens in WordPress when an image is uploaded. Currently in WordPress, if a user uploads a jpeg all image sub sizes are saved in the same format as the original file. Additionally, Adam has written a plugin (that you can check out here) that changes this behavior and forces all image sub sizes to save as WebP files.
And, of course, we’re not done: There’s even more we can do with the media space. While AVIF (for example) doesn’t yet have widespread adoption across all browsers, similar aspects that make WebP great also make it great. We hope that browser makers and developers play with these new tools so that users (that’s you!) will get a faster, better web—which is core to what we do at XWP.
We appreciate the contributors to open source projects, including WordPress Core (one of the largest open source projects on the web.) Oftentimes, the XWP team is itching to do these kinds of projects, so we encourage them to explore where we can make a meaningful impact.
And it’s great when we can find something that is both meaningful and achievable: Our WordPress+ program directly funds our staff who also happen to dedicate some of their time to open source projects, such as Core. Contributions like this in the arenas of performance, media, security, APIs and the like are high on our list of priorities to see the web continue to improve. We want a more performant web.
“More performant” means less bandwidth used, less battery consumed, and less frustration and less bouncing from a site. When sites load faster, we can get to the things we care about faster—and WebP is a great way to help all users experience this kind.
