AVIF (AV1 Image File Format)
Miért számít a képformátum a marketingben?
Egy átlagos webshop-oldal adatforgalmának nagy része kép. A legnagyobb kép, jellemzően a hero-kép vagy a termékfotó, sokszor egyben az LCP-elem is, vagyis ettől függ, mikor látja a látogató „betöltöttnek” az oldalt. Kisebb kép, gyorsabb LCP, jobb Core Web Vitals, és mobilnetes látogatóknál kevesebb lemorzsolódás.
AVIF, WebP, JPEG összehasonlítás
| JPEG | WebP | AVIF | |
|---|---|---|---|
| Tömörítés hatékonysága | alap | jobb | jellemzően a legjobb |
| Átlátszóság | nincs | van | van |
| HDR, 10/12 bites szín | nincs | nincs | van |
| Kódolási sebesség | gyors | gyors | lassú |
| Böngészőtámogatás | teljes | gyakorlatilag teljes | a modern böngészők mind (Chrome, Edge, Firefox, Safari 16-tól) |
A megtakarítás képtől függ: fotóknál, színátmeneteknél nagy, éles szöveget tartalmazó képernyőképeknél kisebb. Ezért formátumot képtípusonként érdemes választani, nem vakon mindenre.
Számpélda: egy termékoldal
Tegyük fel, hogy egy kozmetikai webshop termékoldalán egy hero-kép és nyolc galériakép van. Saját méréssel, azonos látható minőségre beállítva:
- JPEG: hero 380 KB + galéria 8 × 140 KB = 1 500 KB.
- WebP: hero 250 KB + galéria 8 × 95 KB = 1 010 KB.
- AVIF: hero 170 KB + galéria 8 × 65 KB = 690 KB.
Ez oldalanként körülbelül 800 KB-tal kevesebb a JPEG-hez képest. Havi 40 000 termékoldal-megtekintésnél ez nagyjából 32 GB-tal kisebb kimenő forgalom, ami forgalomkorlátos tárhelyen is számít. A fontosabb haszon mégis az, hogy lassú 4G-n a hero-kép láthatóan hamarabb megjelenik.
Hogyan építsd be?
A biztonságos megoldás a <picture> elem, amely tartalékformátumot ad a régi böngészőknek:
<picture><source srcset="termek.avif" type="image/avif"><source srcset="termek.webp" type="image/webp"><img src="termek.jpg" alt="..." width="800" height="800"></picture>
- WordPress: a 6.5-ös verziótól feltölthető AVIF, ha a szerver képkezelő könyvtára (GD vagy Imagick) támogatja.
- CDN: több CDN és képoptimalizáló szolgáltatás automatikusan AVIF-et küld annak a böngészőnek, amelyik kéri.
- Méretek: a
widthésheightattribútum maradjon, különben a kép elcsúsztatja a tartalmat (CLS).
Gyakori hibák
- Túltömörítés: az AVIF alacsony minőségi értéken „elkenheti” a finom részleteket, ami termékfotón (anyag, bőr textúrája) bizalomvesztés.
- Tartalék nélküli beépítés: a régebbi eszközökön a kép egyszerűen nem jelenik meg.
- Már tömörített JPEG újrakódolása: a hibák összeadódnak. Lehetőleg az eredeti, nagy felbontású forrásból készüljön az AVIF.
- Csak formátumot váltani: egy 4000 px széles kép AVIF-ben is túl nagy. Előbb a megjelenítési méretre kell vágni, utána tömöríteni.
Mikor ne válts AVIF-re?
Nem minden kép nyer vele. Kis ikonoknál és logóknál az SVG jobb, mert vektoros, és bármekkora méretben éles marad. Éles szövegű képernyőképeknél a PNG vagy a veszteségmentes WebP gyakran tisztább eredményt ad hasonló méretben. Ha pedig egy kép naponta cserélődik (pl. automatikusan generált ajánlóbannerek), a lassú AVIF-kódolás a szerveren is terhet jelenthet; ilyenkor a WebP a praktikusabb. A jó gyakorlat: fotókra AVIF tartalék WebP-vel és JPEG-gel, grafikára SVG, szöveges képre PNG vagy WebP.
Röviden
Az AVIF ma a leghatékonyabb széles körben támogatott webes képformátum. A legtöbbet a nagy fotókon hozza, beépíteni pedig tartalékformátummal érdemes. A szöveg- és kódoldali tömörítéshez lásd a Brotli bejegyzést.