Melyik képformátum a legjobb a weboldalakra 2026-ban

Melyik képformátum a legjobb a weboldalakra

Ha weboldalt üzemeltetsz vagy most készülsz egyet csináltatni, előbb-utóbb belefutsz abba a kérdésbe, hogy milyen formátumban töltsd fel a képeket.

JPG, PNG, WebP, AVIF, SVG. Elsőre csak betűhalmaznak tűnnek, valójában viszont rengeteg múlik rajtuk.

A képek ugyanis átlagosan egy weboldal méretének 50 és 70 százalékát teszik ki. Ez azt jelenti, hogy ha a képek nincsenek rendben, akkor az egész oldal lassú lesz, függetlenül attól, milyen jól van megírva a kód mögötte.

A lassú oldalt pedig sem a látogató, sem a Google nem szereti.

Ebben a cikkben végigmegyünk azon, melyik formátum mire való, melyiket szereti a Google, hogyan értelmezi ezeket a mesterséges intelligencia, és mennyivel kisebb fájlméretet kapsz, ha jól választasz. A végére pontosan tudni fogod, mit kell tenned, hogy az oldalad gyorsabb és láthatóbb legyen.

Miért számít egyáltalán a képformátum?

Nézzük meg, miért nem mindegy, milyen formátumban van fent egy kép a weboldaladon.

1. Sebesség

Egy átlagos termékfotó JPG-ben lehet 400 kilobájt, ugyanaz a kép WebP formátumban 120 kilobájt, AVIF-ben pedig akár 70 kilobájt is. Ha az oldaladon van 20 ilyen kép, a különbség már megabájtokban mérhető.

Ez közvetlenül kihat arra, mennyi idő alatt töltődik be az oldal. Egy lassú oldalon a látogatók nagy része el sem várja, hogy minden megjelenjen. Bezárja, és elmegy a versenytársadhoz.

2. SEO, vagyis a keresőoptimalizálás

A SEO (Search Engine Optimization), magyarul keresőoptimalizálás azt jelenti, hogy az oldaladat úgy alakítod, hogy a Google minél előrébb sorolja a találati listában.

A Google már évek óta hivatalosan is rangsorolási tényezőként kezeli az oldalsebességet. Ha lassú vagy a versenytársadnál, akkor azonos tartalom mellett ő kerül előrébb. A képek pedig az egyik legnagyobb sebességfaktor.

3. Felhasználói élmény

A gyors oldalon a látogatók tovább maradnak, többet néznek meg, és nagyobb eséllyel vásárolnak vagy kérnek ajánlatot. A lassú oldal nem csak a Google miatt baj, hanem azért is, mert konkrét bevételtől fosztja meg a céged.

4. Mobilforgalom

Ma a látogatók többsége mobilról jön. Mobilon pedig az adatkapcsolat sokszor lassabb, és minden megspórolt kilobájt számít. Egy jól megválasztott képformátummal a mobil felhasználók egyszerűen jobb élményt kapnak.

Milyen képformátumok léteznek?

Mielőtt eldöntenénk, melyik a legjobb, nézzük meg, mik közül választhatsz egyáltalán. A weben lényegében öt formátummal találkozol rendszeresen.

JPG, vagy más néven JPEG

A JPG (Joint Photographic Experts Group) a legrégebbi és legelterjedtebb fotóformátum. Akkor jó, ha sok színt és átmenetet tartalmazó képről van szó, például fotókról.

Előnye, hogy mindenhol megjelenik, minden böngésző és minden eszköz támogatja. Hátránya, hogy a tömörítés veszteséges, vagyis minden mentésnél romlik a minőség, és a fájlméret is nagyobb, mint az újabb formátumoknál.

PNG

A PNG (Portable Network Graphics) elsősorban olyan képekhez jó, ahol éles vonalak, szövegek vagy átlátszó hátterek vannak. Tipikusan logók, ikonok, képernyőfotók kerülnek PNG-be.

Előnye, hogy veszteségmentes, vagyis nem romlik a minőség. Hátránya, hogy nagy fájlméretet eredményez, főleg fotóknál. Egy fotót PNG-ben menteni szinte mindig hiba.

WebP

A WebP a Google saját fejlesztésű képformátuma, kifejezetten a webre tervezve. Egyetlen formátumban kezeli azt, amit eddig JPG-vel és PNG-vel oldottunk meg. Tud veszteségesen és veszteségmentesen is tömöríteni, és támogatja az átlátszóságot is.

A fájlméret nagyjából 25-35 százalékkal kisebb, mint ugyanannak a képnek a JPG változata. Ma már gyakorlatilag minden modern böngésző támogatja.

AVIF

Az AVIF (AV1 Image File Format) a legújabb a sorban. Még a WebP-nél is jobban tömörít, ugyanazt a képminőséget akár 50 százalékkal kisebb fájlméretben adja vissza, mint a JPG.

A támogatottsága már szinte teljes, a modern böngészők értik. Egyetlen hátránya, hogy a feldolgozása lassabb, vagyis a kép létrehozása több időt vesz igénybe, mint egy WebP-é. A megjelenítésnél már nincs különbség.

SVG

Az SVG (Scalable Vector Graphics) nem hagyományos képformátum, hanem vektoros. Vagyis nem pixelekből, hanem matematikai leírásból épül fel a kép.

Logókhoz, ikonokhoz, egyszerű grafikákhoz tökéletes, mert bármekkorára nagyítható minőségromlás nélkül, és nagyon kicsi a fájlmérete. Fotókhoz viszont nem alkalmas.

Mennyivel kisebbek az új formátumok?

Hogy ne csak elméletben beszéljünk erről, nézzünk meg egy gyakorlati példát.

Vegyünk egy átlagos termékfotót, ami 1500 pixel széles és jó minőségű. Ugyanaz a kép a különböző formátumokban nagyjából így néz ki:

PNG-ben körülbelül 1800 kilobájt, vagyis 1,8 megabájt.

JPG-ben körülbelül 400 kilobájt.

WebP-ben körülbelül 130 kilobájt.

AVIF-ben körülbelül 70 kilobájt.

Ugyanaz a kép, ugyanolyan minőségben, mégis 25-szörös különbség van a legrosszabb és a legjobb verzió között.

Ha az oldaladon mondjuk 30 kép van, akkor PNG-vel egy oldalbetöltés 54 megabájt forgalmat jelent, AVIF-fel viszont csak körülbelül 2 megabájtot. Ez nem apróság. Ez a különbség dönti el, hogy az oldalad 1 másodperc alatt vagy 8 másodperc alatt töltődik be.

Melyik formátumot szereti a Google?

A Google több hivatalos állásfoglalásban is leírta, hogy a modern képformátumokat preferálja. Konkrétan a WebP-t és az AVIF-et ajánlja, és a PageSpeed Insights nevű mérőeszközük is külön figyelmeztet, ha JPG vagy PNG van olyan helyen, ahol modern formátumot lehetne használni.

Ennek két oka van.

Az egyik, hogy a Google komolyan veszi a felhasználói élményt, és a sebesség ennek központi része. A 2021 óta hivatalosan is bevezetett Core Web Vitals mérőszámrendszer egyik fő eleme az LCP (Largest Contentful Paint), magyarul a legnagyobb tartalmi elem betöltési ideje. Ez a legtöbb oldalon egy kép, és a formátum közvetlenül befolyásolja az eredményt.

A másik ok, hogy a Google saját maga fejlesztette a WebP-t, és aktívan támogatja az AVIF-et is. Tehát nem csak ajánlja, hanem maga is tolja ezeknek a formátumoknak az elterjedését.

Ez gyakorlatban azt jelenti, hogy ha modern formátumokat használsz, akkor jobb értékeléseket kapsz a Google mérőeszközeiben, ami közvetlenül kihat a keresési helyezésedre.

Hogyan értelmezi a mesterséges intelligencia a képeket?

Ez egy érdekes és egyre fontosabb kérdés. A mesterséges intelligencia, vagyis az AI (Artificial Intelligence) ma már nem csak szövegeket olvas, hanem képeket is értelmez. A Google képkereső, a ChatGPT, a Bing AI és a többi modern rendszer mind támaszkodik képfelismerésre.

Itt két dolgot érdemes szétválasztani.

Mit lát a kép tartalmából

Ahhoz, hogy egy AI értelmezni tudjon egy képet, először dekódolnia kell. Ehhez támogatnia kell a formátumot. A JPG és a PNG itt évek óta szabvány, minden rendszer érti. A WebP-t ma már szintén szinte minden komoly képfeldolgozó AI támogatja. Az AVIF támogatottsága még valamivel gyengébb, de rohamosan javul.

Magát a kép tartalmát egyik formátum sem teszi jobban vagy rosszabbul felismerhetővé. Egy macska a JPG-ben is macska, az AVIF-ben is macska. A formátum nem javít a felismerésen, viszont ha a tömörítés túl agresszív, és emiatt elmosódott vagy zajos lesz a kép, az már ronthat a felismerés pontosságán. Ez bármelyik formátumnál igaz.

Hogyan olvassa a szöveget a képen

Ha a képen szöveg is van, például egy infografikán vagy egy termékcímkén, akkor az AI úgynevezett OCR-rel (Optical Character Recognition), magyarul optikai karakterfelismeréssel olvassa ki. Itt számít a kép élessége és felbontása.

Általános szabály, hogy a veszteségmentes vagy enyhén tömörített WebP és PNG jobban olvasható szöveggel szolgál, mint egy erősen tömörített JPG. AVIF esetén, ha jól van beállítva a minőség, szintén megbízhatóan olvasható a szöveg.

Ami viszont a legfontosabb és sokan elfelejtik: az AI rendszerek nemcsak magát a képet nézik, hanem a hozzá tartozó alt szöveget is. Az alt attribútum az HTML-ben a képhez rendelt leírás, amit akkor is elolvas a Google és bármelyik AI, ha magát a képet nem tudja értelmezni. Egy jól megírt alt szöveggel többet érsz el a SEO szempontjából, mint a képformátum váltogatásával.

Akkor melyiket válasszam?

Nézzük meg gyakorlati helyzetekre lebontva.

Fotók, termékképek, blog illusztrációk

Itt egyértelműen WebP vagy AVIF a nyerő. Ha gyors megoldást szeretnél, ami minden böngészőben működik és látványos méretcsökkenést hoz, válaszd a WebP-t. Ha még tovább akarod feszíteni a sebességet és nem ijedsz meg attól, hogy néhány nagyon régi böngésző esetleg nem támogatja, akkor AVIF.

A jó hír, hogy ma már szinte minden modern weboldal motorja, így a WordPress is, képes automatikusan kiszolgálni a megfelelő formátumot a böngésző alapján.

Logók, ikonok, egyszerű grafikák

Itt SVG. Mindig SVG. A logód SVG-ben pár kilobájt, miközben tűéles minden képernyőn, akármekkorára nagyítva. Ha valamiért nem tudsz SVG-t használni, akkor PNG, de soha ne JPG-ben tárold a logót.

Képernyőfotók, technikai ábrák

Itt PNG vagy WebP. A képernyőfotókon általában éles vonalak, szövegek vannak, amiket a JPG nagyon csúnyán tömörít. WebP veszteségmentes módban szinte ugyanazt tudja, mint a PNG, csak kisebb fájlmérettel.

Bannerek, fejléc képek

Itt ugyanaz, mint a fotóknál. WebP vagy AVIF. Mivel ezek általában a legnagyobb méretű képek az oldalon, itt számít a legtöbbet a jó formátum választása.

Mit tegyél, ha már fent vannak a régi képek?

Sok cég nem új oldalt indít, hanem egy meglévő weboldal képeit szeretné rendbe tenni. Erre van pár dolog, amit lépésről lépésre érdemes végigcsinálni.

1. Mérd fel, mi van fent

Először nézd meg, milyen formátumban vannak a képeid és mekkorák. A Google PageSpeed Insights vagy a GTmetrix nevű ingyenes eszközök megmutatják, melyik kép mekkora és milyen formátumú.

2. Vágd a megfelelő méretre

Az egyik leggyakoribb hiba, hogy a kép sokkal nagyobb, mint amekkora helyen megjelenik. Egy 4000 pixel széles fotót tölt fel valaki, miközben az oldalon csak 600 pixel széles helyen jelenik meg. Ilyenkor hiába tömöríted, akkor is feleslegesen sok adatot küldesz át.

Erre van egy ingyenes eszközünk, amivel pillanatok alatt a megfelelő méretre vághatod a képet: ingyenes kép vágás.

3. Tömörítsd

A vágás után jön a tömörítés. Egy jól tömörített kép szabad szemmel ugyanúgy néz ki, csak töredéke a méretnek. Erre is készítettünk egy ingyenes megoldást: ingyenes kép tömörítő. Ezzel pár kattintással lehúzhatod a kép méretét anélkül, hogy a látogatók bármit is észrevennének.

4. Cseréld le a formátumot, ha kell

Ha az oldalad még JPG és PNG képekkel van tele, érdemes megfontolni a WebP-re váltást. WordPress oldalon ezt egy bővítmény automatikusan elintézi, egyedi rendszernél a fejlesztő néhány óra alatt megoldja.

Gyakori tévhitek a képformátumokról

Néhány dolog, amivel rendszeresen találkozunk az ügyfeleknél, és nem mind igaz.

"A nagyobb kép szebb"

Nem. A weben a kép pontosan addig szép, amíg élesen kitölti azt a helyet, ahova szánták. Ennél nagyobb felbontás csak felesleges adat, ami lassítja az oldalt.

Egyetlen kivétel a Retina, vagyis a nagy felbontású kijelzők támogatása. Ott érdemes a megjelenítési méret kétszeresével dolgozni, de annál nagyobb felbontásra ott sincs szükség.

"A WebP rontja a minőséget"

Nem. A WebP ugyanúgy tud veszteségmentes lenni, mint a PNG, és veszteséges módban is jobb minőséget ad, mint a JPG ugyanakkora fájlméret mellett.

"A Google nem szereti a WebP-t, mert nem mindenhol látszik"

Pont az ellenkezője igaz. A Google maga fejlesztette ezt a formátumot, és kifejezetten kéri, hogy használd. A támogatottság ma már a böngészők több mint 95 százalékánál biztosított.

"A fájlnév nem számít"

De igen. A Google a fájlnévből és az alt szövegből próbálja kitalálni, mit ábrázol a kép. Egy DSC_0438.jpg nevű fájl semmit nem mond. Egy piros-borbely-szek-ergonomikus.jpg sokat segít.

Hogyan kapcsolódik mindez a weboldalad sikeréhez?

Lehet, hogy elsőre úgy tűnik, ez csak egy technikai részletkérdés. Pedig nem az.

A képek határozzák meg az oldalad sebességének nagy részét. A sebesség határozza meg, hogy a látogató ott marad-e. És az is, hogy a Google előrébb sorol-e a versenytársaidnál.

Egy webáruháznál ez konkrét pénzben mérhető. Több másodperc betöltési idő, több elveszett vásárló. Egy szolgáltatói oldalon kevesebb ajánlatkérés. Egy blognál kevesebb látogató, kevesebb hirdetési bevétel.

Tehát amikor azt mondjuk, hogy érdemes WebP-t vagy AVIF-et használni, és érdemes a képeket vágni és tömöríteni, akkor nem csak technikai szépségről beszélünk. Hanem arról, hogy az oldalad valóban dolgozzon érted.

Mire figyelj, ha most készíttetsz weboldalt?

Ha most állsz neki egy új oldalnak vagy webáruháznak, kérdezd meg a fejlesztődet, hogy:

Milyen formátumban szolgálja ki a képeket?

Van-e automatikus tömörítés és átméretezés?

Beállítja-e a lazy loading megoldást, vagyis hogy a képek csak akkor töltődjenek be, amikor a látogató tényleg odagörget?

Generál-e különböző méretű változatokat ugyanabból a képből, hogy mobilon kisebb verzió töltődjön be?

Ezek ma már alapvető elvárások egy minőségi oldalnál. Mi a weboldal készítés során minden esetben beállítjuk ezeket, és a webáruház készítés projekteknél különösen nagy hangsúlyt fektetünk rá, mert egy webshopnál sokszor több száz vagy ezer kép van fent, és ott a sebesség konkrétan a forgalom és a bevétel kérdése.

Összefoglalás

Ha csak egy mondatot kéne megjegyezned ebből a cikkből, az a következő lenne: a fotókhoz használj WebP-t vagy AVIF-et, a logókhoz SVG-t, és minden képet vágj a megfelelő méretre, mielőtt feltöltöd.

A Google a modern formátumokat szereti, mert gyorsabb oldalt eredményeznek. A felhasználók is ezt szeretik, mert nem kell várniuk. Az AI rendszerek pedig akkor tudják jól értelmezni a képeidet, ha élesek, jó minőségűek, és van mellettük értelmes alt szöveg és fájlnév.

Ha a meglévő képeidet szeretnéd rendbe tenni, használd nyugodtan az ingyenes kép vágó és ingyenes kép tömörítő eszközeinket. Ha pedig új oldalra vagy webáruházra van szükséged, ahol mindez alapból jól van beállítva, nézd meg a weboldal készítés és webáruház készítés oldalainkat.

A képek apróságnak tűnnek, de az oldalad sikere sokszor pont ezeken az apróságokon múlik.