Performance
AVIF and WebP: what really changes against PNG
AVIF and WebP lighten photos, not flat illustrations: here 916 PNG covers weigh 64 MB against 1.9 MB in SVG for the same drawings.
Key points
- AVIF beats WebP on photographs, and the vector format beats both on flat illustrations.
- The 916 PNG covers of this blog weigh 64,305,140 bytes, the same set in SVG 1,897,836 bytes.
- The right markup is a picture with AVIF, WebP and a fallback img carrying width and height.
AVIF and WebP cut the weight of photographs; on a flat illustration the vector format stays lighter than both. The covers of this blog show it: 64 MB of PNG against 1.9 MB of SVG for the same 916 drawings.
Four formats, four jobs
| Format | Compression | Support | Use case |
|---|---|---|---|
| AVIF | lossy, more efficient | Chrome 85, Firefox 93, Safari 16.4 | photos and hero images |
| WebP | lossy or lossless | Chrome 32, Firefox 65, Safari 14 | photos with a wide fallback |
| PNG | lossless | every browser | screenshots and sharp text |
| SVG | vector | every browser | flat illustrations and covers |
The difference between AVIF and WebP shows on photographs, where AVIF reaches the same detail with fewer bytes. On a flat drawing the vector format wins because it holds no pixels: the SVG cover here is 33 times lighter than the PNG.
The command
cwebp -q 70 -m 6 cover.png -o cover.webp
avifenc --min 20 --max 30 cover.png cover.avifcwebp converts to WebP at quality 70 with method 6, the slowest and smallest setting. avifenc sets the quantiser between 20 and 30: lower numbers keep more detail and produce larger files.
The markup that works
The browser takes the first source it can decode, so AVIF arrives where it is supported and PNG stays as the fallback. width and height on the img reserve the space and keep CLS still.
The limitation
Here the covers ship only as PNG and SVG: the WebP and AVIF variants answer 404, so the measurement describes the cost of the current format, not a generated comparison. AVIF also takes seconds to encode each image and costs more CPU to decode on slow phones.
Where to continue
In the EneUI catalogue: 111,985 components, 1,556 blocks and the record image auto slider, a carousel that loads images and therefore pays for every byte saved. The guides: responsive images with srcset and when lazy loading does not help; the comparison Brotli versus gzip covers text compression, which stays separate from image compression.
Frequently asked questions
Is AVIF always better than WebP?
No. AVIF wins on photographs at the same perceived quality, but WebP decodes faster and has wider support on older browsers. Keep both in the picture element and let the browser choose.
Can I convert an SVG to WebP to save bytes?
Usually not. SVG describes shapes and stays small while the illustration is simple; turning it into raster pixels adds weight, as the cover at 2,114 bytes against 69,757 shows.
How long does AVIF encoding take?
From one to several seconds per image on a normal machine, against a few hundred milliseconds for WebP. Encode at build time or once, never per request.
Do WebP and AVIF fix layout shift?
No. The format does not tell the browser how much space to reserve: you need width and height on the img or an aspect-ratio in CSS, or the layout still moves.
Do I still need PNG?
Yes, as a fallback for browsers that read neither AVIF nor WebP, and for images with text or hard transparency, where lossy compression shows.