The Best Image Format, from AVIF to WebP to JPG with Core Web Vitals and Progressive Enhancement

Опубликовано: 24 Июнь 2025
на канале: Tejas Kumar

1,310

Let's continue the conversation? / tejaskumar_

TL;DW: WebP is great for non-photographs, while AVIF's compression on photographic images is groundbreaking.

We look at a comparison between these formats and how they affect LCP (Largest Contentful Paint), while considering Core Web Vitals. LCP is one of multiple Core Web Vitals though, and the others ought not be ignored.

Another attribute of AVIF that makes it special, arguably even over WebP, is that it is the photo version of the AV1 video codec, which as an open source and royalty-free video codec by the Alliance for Open Media.

Chapters

00:00 - Intro
00:19 - Why AVIF
03:04 - AVIF vs. WebP
04:46 - Let's Build Something (Testing AVIF)
06:49 - Progressive Enhancement (HTML Picture Element)
07:55 - Progressive Enhancement (image-set in CSS)
10:23 - Progressive Enhancement (Server Headers)
11:00 - Conclusion