How to make your images greener with WebP
Ways you can make the new WebP image format a part of your content practice
I have a confession to make. Wagtail CMS has supported the WebP file format since Wagtail 5.1, but we haven't used it yet for any of the blog images on Wagtail.org. Yup. Not a single one.
Given all the noise we've been making about sustainability and the green benefits of the WebP image format, that's just a smidge embarrassing.
Yet, it's also not embarrassing because WebP is new enough that many of the tools used for photo editing and image creation are still working on adopting it. It's not reasonable to expect people to start uploading WebP images all the time unless they can export them from a tool they're familiar with. So, I spent a chunk of time researching which tools support WebP well and identifying the best ones for making the switch to greener images.
Why you should switch to WebP
If you're wondering what the big deal is about WebP, let me catch you up. WebP is a modern image format created by Google that reduces the size of image files without noticeably reducing the quality. WebP images can also be animated like GIFs and they can have transparent backgrounds like PNGs. Another thing they have in common with GIFs: people are already debating how WebP is pronounced (apparently it's "webpy"?).
Providing these features in a smaller file size gives designers what they need to make a webpage look fabulous while reducing the amount of data a server has to load each time the website is visited. That ultimately reduces the amount of energy and server resources needed as well, which is why optimizing images is one of the best methods for improving a website's loading speed as well as reducing carbon impact.
If having blazing fast image loading and being kinder to Planet Earth aren't quite enough to get you to switch to WebP, then you should know there are SEO benefits too. Page experience is a key part of Google's search algorithm, so websites that load faster have an edge over those that don't.
Design software that supports WebP
As of this writing, the biggest name in design to support WebP export is Adobe. After introducing a Photoshop plugin in 2023, they have now rolled out native support for WebP in Photoshop. Another proprietary design tool, Figma, offers a plugin for exporting WebP. Among open source design tools, the photo-editing tool GIMP offers native support for WebP. Inkscape, an open source vector design editor, provides native support for exporting WebP images too.
Which option you go with ultimately depends on your budget and whatever preferences the designers in your life may have. I don't have a Photoshop license or the permissions needed to add plugins to the Figma account I have access to, so I can't really comment on whether the proprietary tools are any easier than the open source ones. I can say that the MacOS version of GIMP is one of the tools I use the most, and it's one of the main tools I'm planning to use for making WebP images for Wagtail.org.
Design software that doesn't support WebP (yet)
Here are some other popular design tool options that haven't gotten around to supporting WebP yet (but they will). Canva still offers only PNG and JPEG as their main web formats for images. For folks who love to design in Powerpoint (I know you chaotic rebels exist), Microsoft Office hasn't gotten around to offering a WebP export option yet either. Google, even though they invented the WebP format, also doesn't offer WebP export in Sheets yet. Even though none of these tools offer WebP yet, there's nothing to stop you from using an image converter to change the format after an initial export.
The best options for converting images to WebP
Doing a web search for image converters, whether they support WebP or not, will return a lot of scammy-looking pages full of click-baity ads. I'm sure some of those pages are legit, and I personally don't begrudge anyone supporting their work with ads. But I also don't like sending images into a blackhole where someone might do something with them I'm not cool with. So, here (in my humble opinion) are the most useful options for converting images to WebP.
GIMP
As I said above, GIMP is an open source photo-editing tool. If most of your image editing involves cropping, resizing, or converting images, then GIMP is a solid tool. All you have to do is change the export file extension to .webp when you export an image and GIMP does the rest. There are some settings you can adjust to make the file size even smaller if you want, but sticking with the default settings works pretty well too.
Squoosh
Squoosh is a Google-created open source tool you can use to convert images to WebP and other modern file formats in your browser. All the conversion happens locally on your machine, so you don't have to worry about someone vacuuming up your images. Also, this tool has a super handy before and after viewer so that you can check whether the settings you're choosing are making the images too pixelated. Squoosh also shows you the percentage of the file size reduction, which is super satisfying to see every time you "squoosh" down an image.
WebP commandline tools
If you're comfortable using the command line, then the cwebp and dwebp tools from Google are another fantastic option for converting files to WebP. These tools are also currently the only real viable option for converting large batches of files. So if you need a whole library converted and don't want to binge-watch anime while clicking through single files, the command line is your most efficient option.
Jeremy Wagner over at Smashing Magazine has some great examples of how to use the command line tools as well as some other code-based options for incoporating WebP conversion into frontend code. He has written a whole book on WebP, so he probably knows what he's talking about.
How much carbon can you remove with WebP?
I was curious just how much carbon a switch to WebP could remove. So I plugged the URL for our Sustainability page into an open source tool called Image Carbon that measures the amount of carbon associated with images on a particular webpage. The initial measurement was 569 KB of images that produce an estimated 109.6 kg of carbon a year (assuming we had 100,000 page views per month, which is really high but let's roll with Image Carbon's optimism). That's not a lot compared to something like driving a car back and forth every day. But since every image is a PNG on that page, there's definitely room for improvement.
There were four images in the editor that I could optimize without digging into code or messing with our pattern library. So, I optimized each one with Squoosh, so mostly I could play around with figuring out just how far I could reduce the file size without making Ben (our fabulous Wagtail UX designer) wince in pain from pixelation. I reduced the image sizes by approximately 22%, 61%, 40%, and 26%. One of the images had transparency too, so this was a good chance to test the WebP transparency quality as well.
Then I remeasured our Sustainability page with Image Carbon and found that with WebP, it now had 266 KB of images that would produce 74.7 kg of carbon per year. That's a roughly 32% reduction I was able to achieve without making our designer sigh sadly every time he looked at the page. While that's not a huge reduction, it is a meaningful one that will add up to carbon savings over time.
What about AVIF?
Extra-savvy folks are probably wondering why I'm going on about WebP versus AVIF, which is an even newer image format that compresses file sizes even smaller than WebP. Here's why: AVIF is amazing but it isn't widely supported by browsers and image-creating tools yet. Of the tools I listed above, GIMP and Inkscape are the only ones that support AVIF natively. There are plugins, but the format doesn't have the broad support that WebP does right now. That will change, and you should totally be prepared for using AVIF on your websites. Fortunately, if you're using Wagtail CMS, AVIF support is already available! You just need to ask your developer to switch it on for you.
What's next for Wagtail.org
Going forward, I will be converting all of our images for upload to WebP using GIMP and/or Squoosh. I also eventually plan to investigate converting our existing image library to a newer image file format to continue reducing our carbon impact. But that type of project is definitely going to require more planning and testing and thought.
In the meantime though, we plan to make sure every new image being uploaded to Wagtail.org uses a more Earth-friendly format. This is one small step we can take right now to reduce the impact our website is having on the planet, and I hope this article helps you take this step with us.
This Week in Wagtail
A weeklyish newsletter with Wagtail tips, news, and more.
