Sebesség

Hogyan optimalizáljam a képeket a weboldalra?

Frissítve: 2026. október 27.2 perc olvasásSzerző: Farkas-Nagy Balázs

Röviden

A képeket a megjelenítési méretükre kell kicsinyíteni, modern formátumban (WebP vagy AVIF) tömöríteni, és csak akkor betölteni, amikor a látogató odagörget. Egy fotó weboldalra általában 100-300 kilobájt alatt tartható látható minőségromlás nélkül, a fő képnél pedig méretet és alternatív szöveget is meg kell adni.

Tartalomjegyzék

Négy lépés
1. Méretezés
2. Modern formátum
3. Késleltetett betöltés
4. Méret és alternatív szöveg

A képek adják a legtöbb weboldal méretének nagy részét, ezért itt lehet a legkevesebb munkával a legtöbbet gyorsítani. Egy telefonnal készült fotó 3-8 megabájt is lehet, miközben a weboldalon 100-300 kilobájtban ugyanolyan jól mutat.

Négy lépés

1. Méretezés

A képet ne nagyobb felbontásban töltsd fel, mint amekkorában megjelenik. Egy teljes szélességű fejléckép esetén 1920 pixel széles kép általában bőven elég, egy szövegközi képnél 800-1200 pixel. Retina kijelzőkre a megjelenítési méret kétszerese javasolt.

2. Modern formátum

Formátum	Mire jó
WebP	Fotók és grafikák, a JPG-nél jellemzően 25-35 százalékkal kisebb. Minden modern böngésző támogatja.
AVIF	Még jobb tömörítés, de lassabb a kódolása. Jól használható fotókhoz.
SVG	Logók, ikonok, egyszerű grafikák. Bármekkorára nagyítható, minimális méretben.
JPG, PNG	Tartaléknak jó, de a WebP szinte minden esetben jobb választás.

3. Késleltetett betöltés

A képernyőn kívüli képeket csak akkor kell betölteni, amikor a látogató odagörget. Ezt a böngésző beépítetten tudja:

<img src="munka-1.webp" width="1200" height="800" loading="lazy" alt="Felújított fürdőszoba Szegeden">

A fő (hero) képet viszont ne töltsd késleltetve, mert az lassítja az oldal megjelenését. Arra inkább a fetchpriority="high" jelzés való.

4. Méret és alternatív szöveg

A width és height megadása lefoglalja a kép helyét, így nem ugrál az oldal betöltés közben.
Az alt szöveg leírja a kép tartalmát a látássérült látogatóknak és a keresőknek. Legyen konkrét, ne kulcsszóhalmaz.
A fájlnév is legyen beszédes: szegedi-furdoszoba-felujitas.webp jobb, mint IMG_4821.jpg.

WordPressben a feltöltéskor automatikusan WebP-be konvertáló és több méretet készítő megoldás sokat segít, de a túl nagy eredeti képek feltöltését így is érdemes elkerülni.

Hasznos volt ez a válasz?

Következő lépés

Nem találtad a választ? Kérdezd meg közvetlenül.

Foglalj egy 30 perces, ingyenes konzultációt, és konkrétumokkal, kötelezettség nélkül átbeszéljük a helyzeted. Ha inkább írnál, egy munkanapon belül válaszolok.

Írok inkább →