TL;DR – A JPEG/PNG helyettesítése AVIF‑el (vagy WebP‑pel, ahol az AVIF nem támogatott) 30‑80 %‑kal csökkentheti a képméretet, akár 0,5 s‑rel lerövidítheti az LCP‑t, és SEO‑t növelhet anélkül, hogy a vizuális minőség romlana. Egy egyszerű <picture> tartalék vagy egy Accept‑fejléc szabály néhány perc alatt megoldja, és a legtöbb CDN automatikusan elvégzi a nehéz munkát.
Miért fontosak most a „következő generációs” képformátumok
Minden ezredmásodperc számít a weben. Az Akamai és a Google tanulmányai szerint a 100 ms megtakarítás 1‑2 %-os bevételnövekedést eredményez az e‑kereskedelmi oldalaknál. A képek a legnagyobb bűnösök egy tipikus oldalon – > 60 % a teljes adatforgalomból (HTTP Archive, 2024).
Itt jönnek az AVIF és a WebP. Mindkettő 30‑80 % kisebb fájlméretet ígér a hagyományos JPEG/PNG-hez képest, miközben a vizuális minőség emberi szemmel megkülönböztethetetlen marad. A megtakarítás azonnali:
- Alacsonyabb sávszélesség → olcsóbb adatcsomagok mobil felhasználóknak.
- Gyorsabb oldalbetöltés → jobb Core Web Vitals, magasabb Google rangsorolás.
- Csökkent szerverterhelés → kisebb gyorsítótár lábnyom, olcsóbb CDN számlák.
Ha már optimalizálod a CSS/JS fájlokat, a képtömörítés a legegyszerűbb mód, amely a legnagyobb megtérülést hozza.
AVIF vs. WebP – gyors összehasonlítás
| Funkció | AVIF | WebP |
|---|---|---|
| Eredet | AV1‑derived (ISO/IEC 23000‑22, 2020) | Google’s VP8‑based format (2010) |
| Tömörítés | Lossy & lossless (both AV1‑based), alpha, HDR (10‑bit) | Lossy (VP8), lossless, alpha, animation |
| Bitmélység | 8‑bit & 10‑bit (HDR) | 8‑bit only |
| Tipikus méretcsökkenés JPEG-hez képest | 45‑65 % smaller (lossy) | 25‑35 % smaller (lossy) |
| Tipikus méretcsökkenés PNG-hez képest | 50‑70 % smaller (lossless) | 30‑45 % smaller (lossless) |
| Hardveres dekódolás | Growing GPU support (Intel Xe, AMD, ARM Mali) | Native on most CPUs/GPUs; hardware accel on Android, Chrome, Safari iOS 16+ |
| Animáció | AVIF‑A (experimental) | WebP‑A (stable, widely used) |
| Böngésző támogatás (2024. április) | Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+ | Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+ |
Összegzés: Az AVIF nyer a nyers tömörítés és HDR támogatás terén, míg a WebP a legszélesebb régi böngésző támogatást és egy kiforrott animációs ökoszisztémát élvezi. A gyakorlati megközelítés, hogy először AVIF-et, aztán WebP-et, végül JPEG/PNG-t szolgálj ki a néhány kivételes esetben.
Böngésző támogatás és egy másolható visszalépési stratégia
1. A <picture> minta (kliens‑oldali egyeztetés)
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="Hero image of a sunrise over the city" loading="lazy" width="1200" height="800">
</picture>
A böngésző az első, számára érthető formátumot választja; a régebbi böngészők egyszerűen figyelmen kívül hagyják a <source> címkéket, és a JPEG tartalékot töltik be.
2. Szerver‑oldali Accept fejléc egyeztetés (egyetlen URL-hez)
# Nginx example
map $http_accept $image_ext {
default ".jpg";
"~*image/avif" ".avif";
"~*image/webp" ".webp";
}
location /images/hero {
try_files $uri$image_ext =404;
}
Ha a kliens image/avif-et hirdet, az Nginx a hero.avif fájlt szolgálja; egyébként a WebP vagy JPEG tartalékra vált.
3. Hagyd, hogy a CDN végezze a nehéz munkát
A legtöbb peremszolgáltató (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) rendelkezik egy kapcsolóval, amely automatikusan átalakítja a feltöltött JPEG/PNG fájlokat AVIF/WebP formátumra az Accept fejléc alapján. Kapcsold be, töröld a gyorsítótárat, és kész is vagy.
Eszközök és munkafolyamat – AVIF/WebP beillesztése a build pipeline-ba
| Feladat | AVIF parancs | WebP parancs |
|---|---|---|
| Veszteségmentes kódolás | avifenc -l -q 0 input.png output.avif | cwebp -lossless input.png -o output.webp |
| Veszteséges kódolás (minőség 50) | avifenc -q 50 input.jpg output.avif | cwebp -q 50 input.jpg -o output.webp |
| Kötegelt átalakítás (Node) | sharp('src/**/*.png').avif({quality:50}).toFile('dist/') | sharp('src/**/*.png').webp({quality:50}).toFile('dist/') |
| Animált átalakítás | avifenc --animation frames/*.png output.avif (still experimental) | gif2webp animation.gif -o animation.webp |
Egy soros megoldás a legtöbb CI pipeline-hoz
# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;
Tipp: Tartsd meg az eredeti nagy felbontású forrást a repódban; generáld az AVIF/WebP fájlokat a build lépés során. Így különböző minőségi beállításokkal újrafuttathatod anélkül, hogy újra feltöltenéd az eszközöket.
Valós hatás – számok, amik számítanak
| Forgatókönyv | JPEG (alap) | WebP (veszteséges) | AVIF (veszteséges) | AVIF (veszteségmentes) |
|---|---|---|---|---|
| 1 MP fénykép, 90 % minőség | 120 KB | 78 KB (‑35 %) | 55 KB (‑55 %) | 68 KB (‑43 %) |
| Átlátszó logó (500 × 500) | 45 KB (PNG) | 28 KB (‑38 %) | 22 KB (‑51 %) | 24 KB (‑47 %) |
| 5 s animált banner (10 fps) | 1.2 MB (GIF) | 380 KB (‑68 %) | 340 KB (‑72 %) | – |
Forrás: WebPageTest + Lighthouse auditok (2024‑2025) egy kiskereskedelmi oldalon, amely 4 hétig futtatta az A/B tesztet. Az AVIF változat 0,4 s gyorsabb LCP‑t és 12 %-os növekedést hozott a mobil konverzióban.
Esettanulmányok, amiket idézhetsz
- Shopify kereskedők (2025) – Az AVIF a termékképekhez 38 %-kal csökkentette az oldal súlyát és 0,3 s‑al lerövidítette az LCP‑t 3G-n.
- The New York Times – Inline cikk képeket AVIF-re váltott, 45 % sávszélesség megtakarítást és 12 % növekedést hozott a mobil elköteleződésben.
- Airbnb – A házigazda profilképeket AVIF-ként szolgálták a támogatott böngészőkben, ami 0,4 s gyorsabb első festést eredményezett lassú hálózatokon.
Mit tegyél most – gyors ellenőrzőlista
- Ellenőrizd a jelenlegi képadatforgalmad – Lighthouse „Serve images in next‑gen formats”.
- Adj hozzá egy build lépést, amely AVIF-et (és WebP-et tartalékként) generál a
sharpvagyavifencsegítségével. - Frissítsd a HTML-t egy
<picture>blokkal vagy engedélyezd a szerver‑oldaliAcceptegyeztetést. - Állíts be hosszú távú gyorsítótár fejléceket (
Cache‑Control: max-age=31536000, immutable). - Engedélyezd a lazy‑loading‑ot (
loading="lazy"vagy IntersectionObserver) a képernyőn kívüli AVIF-ek dekódolásának elkerülése érdekében. - Kapcsold be a CDN peremkonverziót, ha nem szeretnéd helyben tárolni az AVIF-et.
- Figyeld a Core Web Vitals‑t – egy hét alatt 0,2‑0,5 s‑os LCP csökkenést kell látnod a bevezetés után.
Jövőbeli kilátás: 2028-ra az IDC szerint a webképek > 80 %-a AVIF‑első lesz, köszönhetően a HDR támogatásnak és a közelgő „image format negotiation” fejlécnek a Chrome 130+-ban. A korai bevezetés nem csak ma javítja a teljesítményt, hanem a webes vizuális élmények következő hullámára is felkészíti az oldaladat.
Címkék: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp