How AVIF Reduced My Website Image Sizes by Up to 70% (And Improved Core Web Vitals)

Modern websites rely heavily on images, but images are also one of the biggest reasons pages load slowly.

While optimizing one of my projects, I decided to replace traditional JPG and PNG files with AVIF. The results were surprisingly good.

• Smaller image sizes
• Faster page loading
• Better Core Web Vitals
• Lower bandwidth usage
• No noticeable quality loss

Here's what I learned.

---

What is AVIF?

AVIF (AV1 Image File Format) is a modern image format based on the AV1 video codec.

Compared with traditional formats like JPG and PNG, AVIF delivers significantly better compression while preserving excellent visual quality.

For many websites, switching to AVIF can reduce image sizes by 40–70% depending on the content.

---

Why I Tested AVIF

My website contains hundreds of images.

Even after compressing JPG files, page speed could still be improved.

I wanted a format that could:

• Reduce download size
• Improve Google Core Web Vitals
• Preserve image quality
• Support transparency
• Work in modern browsers

AVIF checked every box.

---

Results After Converting Images

Here are the improvements I observed.

Metric	Before	After
Average Image Size	Higher	Much Smaller
Page Speed	Improved	✅
Bandwidth Usage	Reduced	✅
Visual Quality	Nearly identical	✅

Although results vary depending on the image, AVIF consistently delivered better compression than JPG and PNG.

---

Browser Support

Modern browsers already support AVIF, including:

• Google Chrome
• Microsoft Edge
• Firefox
• Opera
• Safari (latest versions)

This makes AVIF a practical choice for modern websites.

---

Bulk Conversion Matters

Converting one image is easy.

Converting hundreds manually isn't.

To simplify this workflow, I built a browser-based tool that converts multiple images to AVIF in one go.

The conversion runs directly in your browser, making it fast and easy for batch optimization.

🔗 https://iloveimagetool.com/bulk-images-to-avif-converter

---

Learn More

If you'd like a complete guide explaining AVIF, browser compatibility, compression techniques, SEO benefits and best practices, I also wrote a detailed article here:

📖 https://iloveimagetool.com/blog-single?slug=what-is-avif-complete-guide-to-the-modern-image-format

---

Final Thoughts

AVIF isn't a replacement for every image format, but for websites focused on performance, it's becoming one of the best options available.

If you're working on web performance, SEO, or Core Web Vitals, AVIF is definitely worth testing.

I'm curious:

Have you started using AVIF in production?
https://iloveimagetool.com/blog-single?slug=what-is-avif-complete-guide-to-the-modern-image-format