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

Ö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

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

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

1. Ellenőrizd a jelenlegi képadatforgalmad – Lighthouse „Serve images in next‑gen formats”.
2. Adj hozzá egy build lépést, amely AVIF-et (és WebP-et tartalékként) generál a sharp vagy avifenc segítségével.
3. Frissítsd a HTML-t egy <picture> blokkal vagy engedélyezd a szerver‑oldali Accept egyeztetést.
4. Állíts be hosszú távú gyorsítótár fejléceket (Cache‑Control: max-age=31536000, immutable).
5. 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.
6. Kapcsold be a CDN peremkonverziót, ha nem szeretnéd helyben tárolni az AVIF-et.
7. 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