A rövid válasz
2026-ban a WebP a biztonságos alapválasztás, az AVIF pedig a tömörítési bajnok — bár a lassabb kódolási idő miatt nem minden környezetben érdemes alkalmazni. A legtöbb weboldal számára a legjobb megoldás az AVIF + WebP + JPG tartalék (fallback) kombináció, a <picture> elem használatával.
Tömörítési arány
Hasonló vizuális minőség esetén:
| Formátum | Méret a JPG-hez képest |
|---|---|
| JPG (baseline) | 100% |
| WebP (lossy) | kb. 70–75% |
| AVIF | kb. 50–60% |
Az AVIF tehát akár 20–30%-kal is kisebb lehet a WebP-nél — különösen fotók és nagy felbontású képek esetén. Grafikák és logók esetében a különbség kisebb.
Böngészőtámogatás (2026)
- AVIF: Chrome, Edge, Firefox, Opera, Safari 16.4+ — tehát gyakorlatilag minden modern böngésző. A régebbi Safari-verziók (14–16.2) és az Internet Explorer nem támogatják.
- WebP: Minden modern böngésző, sőt, még a 2010-es évek eleji IE-verziók egy része is.
Ma már mindkettőt biztonságosan lehet használni — az AVIF esetében az egyetlen reális kockázatot a nagyon régi iOS-verziók jelentik.
Kódolási sebesség
Ez az AVIF gyengéje: a kódolása lassabb, akár 3–5-ször több időt is igénybe vehet, mint a WebP-é. Statikus oldalaknál (build idején történő képgenerálásnál) ez nem probléma; dinamikus, felhasználói feltöltésen alapuló rendszereknél (pl. fotógalériák) viszont számolni kell vele, mivel a szerverterhelés is nagyobb.
Mikor melyiket?
| Forgatókönyv | Ajánlás |
|---|---|
| Fotók, galériák, hero-képek | Elsődlegesen AVIF, fallbackként WebP |
| Logók, ikonok, UI-grafikák | WebP (vagy SVG, ha vektoros) |
| E-mail mellékletek, SMS, régebbi űrlapok | JPG — itt a kompatibilitás a legfontosabb |
| Régi böngészők támogatása | WebP, az AVIF csak kiegészítőként |
| Szerveroldali erőforráskorlátok (pl. sok felhasználói feltöltés) | WebP — gyorsabb a kódolása |
Így építsd be a weboldaladba
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Leírás" width="1200" height="630" />
</picture>A <picture> elem használatával a böngésző maga választja ki a számára legjobb formátumot — ennek ellenére érdemes megtartani a JPG-verziót is, mint végső tartalék (fallback) megoldást.
Konvertálás: hogyan alakítsd át a JPG-jeidet?
A Képkonverter ingyenes, szerver nélküli (böngészőben futó) konvertálást kínál:
- AVIF JPG-re — ha egy AVIF fájlt olyan szoftverben kell megnyitnod, amely még nem támogatja.
- WebP JPG-re — a klasszikus kompatibilitási megoldás.
- JPG WebP-re — a legelterjedtebb méretcsökkentési megoldás a weben.
Mivel a konverzió közvetlenül a böngészőben történik, a képeid nem kerülnek fel semmilyen külső szerverre — ez adatvédelmi szempontból kiemelten fontos, például ügyfélfotók esetén.
GYIK
Az AVIF lehet veszteségmentes is?
Igen: az AVIF támogatja a veszteséges (lossy) és a veszteségmentes (lossless) módot is, sőt, 12 bites színmélységet is biztosít. A WebP esetében a veszteséges tömörítés egy régebbi, VP8-alapú algoritmust használ.
Sávosodás (banding) sötét színeknél?
Az AVIF jobban kezeli a sötét színátmeneteket, így kevésbé szembetűnő a sávosodás. Ha mégis ezt tapasztalod a jelenlegi képeidnél, érdemes JPG-t WebP-re konvertálni.
Szükséges CDN vagy gyorsítótárazás (cache) a WebP/AVIF-hez?
A modern CDN-ek automatikusan kezelik ezeket, de a Cache-Control fejlécet érdemes hosszú TTL-re állítani a konvertált verzióknál.