How converting your images to WebP and AVIF can save you tons of GBs
Are you tired of your website feeling like a bloated behemoth? Well, it might be time to take a closer look at those images. See, images are the number one culprit when it comes to slow loading times. But don't worry, we've got two words for you: WebP and AVIF.
As website owners, we all want to provide the best and fastest browsing experience (especially since you're reading this). One way to achieve both of these goals is by optimizing images on our websites. By converting images to the WebP or AVIF format, we can save tons of GBs transmitted over the wire, which not only improves website speed but also reduces carbon emissions. In this blog post, we'll dive into the benefits of using WebP and AVIF and show you how to easily optimize your images with plugins and performance monitoring tools.
WebP is an image format developed by Google that uses both lossy and lossless compression techniques to achieve smaller file sizes. It supports both raster and animated images, and it can be used on all major web browsers, including Chrome, Firefox, and Opera.
AVIF (AV1 Image File Format) is a new image format that uses the AV1 codec, an open, royalty-free video compression format developed by the Alliance for Open Media. AVIF offers better compression than JPEG and WebP, and it can also support transparent images and HDR images. However, it is not yet supported by all browsers (I'm looking at you, Edge).
The basics
Let's start with the basics. WebP and AVIF are image formats that were specifically designed for the web. They offer superior image quality and smaller file sizes compared to traditional image formats like JPEG and PNG. This means that they load faster, which improves website speed and as a positive side effect, reduces carbon emissions.
Proven reduction in file size 📉
Don't just take our word for it. Let's look at some concrete examples. A study by Google found that using WebP images on a website resulted in a 26% reduction in file size and a 25% reduction in loading time. Similarly, AVIF images can save up to 50% more bytes than JPEG images and up to 30% more bytes than WebP images. That's a lot of GBs saved!
The picture in this blog post exists in three different versions. We're using a <picture> tag so your browser loads the fastest one supported. As you can see in the table below, the AVIF version is more than 70% smaller in this case. Impressive stuff!
| Format | File Name | Size | Reduction |
|---|---|---|---|
| JPEG | photopress-1200w.jpeg | 105 KB | - |
| WEBP | photopress-1200w.webp | 63 KB | 40% |
| AVIF | photopress-1200w.avif | 29 KB | 72% |
Alright, so how do I start?
Now, you may be thinking, "That's all well and good, but how do I actually optimize my images?" Luckily, there are plenty of tools and plugins available to make the process a breeze. If you use Cloudflare Pages like we do, you can use Cloudflare Images. If you use WordPress, the ShortPixel plugin automatically converts images to WebP and AVIF, making it easy to optimize your images without any additional work on your part.
Don't forget to monitor 🤖
Once you've set up an automatic process for converting new images, you'll need a way to verify that this process keeps working day after day. Now this post wouldn't be a proper one if I didn't casually mention that PageVitals offer exactly this type of monitoring. We run Google Lighthouse tests towards your pages every night (or more often if you like), and we'll let you know if you have too many images that could benefit from further compression. Start your free trial today.
In conclusion, once you start compressing your websites images, not only will your website load faster, but you'll also be doing your part in reducing carbon emissions. So let's get started!
