Miért fontos a megfelelő méret?
Egy tipikus blogcikkhez feltöltött, közvetlenül egy iPhone-ról származó fotó akár 2–4 MB is lehet, 4032×3024-es felbontással. Ha ez változatlan formában kerül fel a szerverre, az alábbiakat okozza:
- lassú oldalbetöltés (Google Core Web Vitals: LCP — rossz érték),
- felesleges sávszélesség-használat, különösen mobilon,
- a böngészőnek le kell skáláznia (kicsinyítenie) a nagy képet megjelenítés közben, így az extra felbontás még vizuálisan sem nyújt többet, viszont lassítja a renderelést.
Pixelméret: milyen nagy képekre van tényleg szükség?
A webes méretezés alapja a CSS-pixel: egy Retina-kijelzőn 2 fizikai pixel felel meg 1 CSS-pixelnek. A főbb ökölszabályok:
- Tartalmi kép, egy kb. 700 px széles konténerbe: ide 1400 px széles fájlt tölts fel.
- Hero / banner, teljes szélesség: ideálisan 1920 px (egy 960 px-es layoutnál ez elegendő a 2× Retina kijelzőkhöz), de indokolt esetben 2560 px-ig is el szoktak menni.
- Thumbnail (bélyegkép) / blogkártya: 2 × 400 = 800 px.
Vigyázat a JPG-vel: a JPG formátum 8 pixeles blokkokban dolgozik, így a nem 8-cal osztható méretek minimális hatékonyságcsökkenést okozhatnak. Ez a gyakorlatban ritkán számít, de a precíz optimalizálásnál érdemes figyelembe venni.
Fájlméret: célszámok
| Típus | Célméret |
|---|---|
| Blogcikk belső fotója | 60–150 KB |
| Hero / nagy banner | 150–300 KB (WebP/AVIF) |
| Thumbnail / kártya | 20–50 KB |
| Webáruházi termékfotó | 100–200 KB |
Egy modern weboldal (2026-os Google-benchmark alapján) ideális esetben összesen 500–800 KB-ot céloz meg oldalanként. Ha csak két képed kitesz 2 MB-ot, a többi elemnek (szkriptek, stílusok, betűtípusok) már nem marad „hely”.
Kompromisszumok: minőség vs. fájlméret
A JPG formátumnál a minőségi szintet (Q) jelöljük: a Q75–85 a legtöbb esetben ideális választás — vizuálisan szinte azonos a Q95-tel, de a mérete csak a fele vagy harmada.
A WebP esetében a Q80 már teljesen megfelelő.
A Képkonverter WebP-konverziója automatikusan optimalizálja a képeket — a WebP JPG-re eszközzel pedig vissza tudod alakítani őket, ha egy régebbi weboldal vagy CMS csak a JPG-t fogadja el.
Lépésről lépésre: így méretezd át a cikkek képeit
- Nyisd meg a Kép átméretező oldalát.
- Húzd be a képet (az iPhone-fotók HEIC formátumát is automatikusan kezeljük).
- Állítsd be a szélességet 1400 px-re (a magasság arányosan módosulni fog).
- Ha WebP formátumot szeretnél, konvertáld át a JPG-ből WebP-re eszközzel.
- Töltsd fel a weboldalra, és a HTML-ben mindenképp add meg a
widthésheightattribútumokat:
<img src="cikk-foto.webp" alt="Leírás" width="1400" height="933" loading="lazy" />A width és height megadásával elkerülhető az oldal elemeinek ugrálása (Cumulative Layout Shift, azaz CLS) betöltés közben — ez jelentősen javítja a Core Web Vitals pontszámot.
Ne feledd: lazy loading (lusta betöltés)
A loading="lazy" attribútum kihagyása ronthatja az oldal teljesítményét, hiszen a böngésző ilyenkor rögtön letölti a képet, függetlenül attól, hogy látszik-e. A lusta betöltéssel a képek csak akkor töltődnek be, amikor a felhasználó oda görget.
Fontos: a hero-képet (ami az LCP, azaz a legnagyobb tartalom) NEM szabad lazy-loadolni! A hajtás felett (a képernyőn elsőként) megjelenő képeket mindig „eager” (azonnali) betöltéssel kell hagyni.
GYIK
Kell 2×-es Retina-képet feltöltenem?
Igen, de csak akkor, ha a kép konténere ezt indokolja (például egy 400 px széles dobozba 800 px széles képet töltesz fel). A túlságosan nagy, 3×-os képek gyakran már nem adnak észrevehető minőségbeli pluszt, viszont feleslegesen lassítják az oldalbetöltést.
Érdemes SVG-t használni ikonoknál?
Igen, mindig! A vektoros SVG minden felbontáson tökéletesen éles, és általában kisebb a fájlmérete. A vektoros grafikák raszterizálásához az SVG PNG-re konvertálónk a megfelelő eszköz.
Mi a legjobb formátum weboldalra?
Az AVIF vagy a WebP. A JPG-t csak akkor használd, ha egy harmadik féltől származó szolgáltatás (CMS, régi WordPress-bővítmények, közösségi média platformok) kizárólag azt támogatja.