2 min read
Are you using WebP or AVIF?

First impressions matter, especially online. For websites showcasing stunning visuals, ensuring lightning-fast image loading is paramount. Slow loading times can leave a lasting negative impact on potential visitors, driving them away before they even experience your content.
While techniques like lazy loading, CDNs, edge servers, caching, and precise image sizing are crucial, there's another often-overlooked factor: image format.
Take a look at the following image...

Images on this website have been optimized! So, they are smaller than their originals.
Check out the original JPEG file of the above image here
Original JPEG
3.2 MB
Choosing the optimal format for your images, combined with other optimization methods, can significantly boost your website's performance and keep your audience engaged. Here are two powerful options to consider:
Developed by Google in 2010, WebP has become a game-changer for website image optimization. Its magic lies in offering superior compression compared to traditional formats like JPEG and PNG, while maintaining impressive image quality. This translates to significantly smaller file sizes, leading to faster loading times and a smoother user experience.
Here's what makes WebP stand out:
I've been using this format for my website since it's widely supported by most browsers and easy to convert.

This image is 23% smaller than its original.
Actual image here
WebP (converted)
2.5 MB
Meet AVIF, a rising star in the world of image formats. It offers:

This is AMAZING! The image is now 54% smaller!
Actual image here
AVIF (converted)
1.5 MB

| Format | File size | Quality | Support | Alpha channel |
|---|---|---|---|---|
| WebP | Small | Good | Most browsers | Yes |
| AVIF | Smallest | Best | Some browsers | Yes |
| JPEG | Medium | Good | All browsers | No |
| PNG | Large | Good | All browsers | Yes |
Yes, in the future when all browsers and devices support AVIF format, but..
For most websites today, WebP is the clear winner. Its widespread adoption and proven performance make it a safe and effective choice. However, staying informed about emerging technologies like AVIF is crucial. As browser support expands and its capabilities mature, AVIF might become the preferred format in the future.
That's it! Let me know what you think.