A weboldal képek a legerősebb és egyben legveszélyesebb elemei egy weboldalnak. Erősek, mert pillanatok alatt bizalmat és hangulatot közvetítenek — egy jó fotó többet mond el a szolgáltatásodról, mint három bekezdés szöveg. Veszélyesek, mert egyetlen rosszul méretezett, tömörítetlen kép is másodperceket adhat a betöltési időhöz, ami közvetlenül rontja a Google-találhatóságodat és a látogatók türelmét is próbára teszi. Ebben a cikkben végigmegyünk azon, hogyan válaszd ki, méretezd és optimalizáld a képeidet úgy, hogy szépek is legyenek és gyorsak is.
Miért olyan fontosak a képek?
A látogatók nagy része néhány másodperc alatt dönt arról, marad-e az oldaladon. Ebben a döntésben a képek visznek főszerepet: egy profi fotó a csapatodról, a termékedről vagy a helyszínedről azonnal hitelességet ad. Ugyanakkor a képek a leggyakoribb okai is annak, ha egy weboldal lassan tölt be — egy átlagos weboldalon a letöltött adatmennyiség jelentős része kép. Ez a kettősség a lényeg: a képek eladnak, de lassíthatnak is, ha nem figyelsz oda a méretükre és formátumukra.
Képméret és optimalizálás: amit tudnod kell
Válaszd a megfelelő formátumot
- WebP — ma ez a legjobb alapértelmezett választás fotókhoz és illusztrációkhoz is: azonos minőség mellett jellemzően 25–35%-kal kisebb fájlméretet ad, mint a JPEG.
- JPEG — jó alternatíva, ha a WebP valamiért nem elérhető; fotóknál, összetett, sok színátmenetes képeknél használd.
- PNG — csak akkor, ha átlátszóságra van szükség (pl. logó), mert fotóknál feleslegesen nagy fájlokat eredményez.
- SVG — ikonokhoz, logókhoz ideális: vektoros, így bármilyen méretben éles marad, és a fájlmérete jellemzően minimális.
Méretezd a képet a tényleges megjelenési mérethez
Az egyik leggyakoribb hiba, hogy valaki egy 4000 pixel széles fotót tölt fel egy 800 pixel széles blokkba — a böngésző ilyenkor a felhasználó helyett tölti le a felesleges pixeleket. Néhány gyakorlati irányszám:
- Teljes szélességű hero-kép: 1600–1920 px szélesség elegendő a legtöbb monitorra.
- Tartalmi / blog kép: 800–1200 px szélesség általában bőven elég.
- Termékfotó galériában: 600–900 px, a nagyított nézethez külön, nagyobb verzió is készíthető.
- Csapattag / arckép: 400–600 px négyzetes vágásban.
Ökölszabály: a feltöltött kép szélessége soha ne legyen nagyobb, mint amekkorára ténylegesen megjelenik a legszélesebb kijelzőn — a plusz pixelek csak sávszélességet és betöltési időt visznek.
Tömörítsd a képet feltöltés előtt
A méretezés mellett a tömörítés a másik kulcslépés. Egy jól tömörített kép szabad szemmel szinte megkülönböztethetetlen az eredetitől, de a fájlmérete töredéke lehet. Néhány elterjedt, ingyenes eszköz:
- Squoosh (squoosh.app) — böngészőben futó, ingyenes eszköz, ahol vizuálisan is összehasonlíthatod az eredeti és a tömörített képet.
- TinyPNG / TinyJPG — gyors, drag-and-drop tömörítés, JPEG, PNG és WebP formátumhoz is.
- Beépített exportálás — a legtöbb képszerkesztő (pl. Photoshop, Affinity Photo) „mentés webre" funkciója is jó eredményt ad.
Ha weboldaladat nálunk készítjük, ez a lépés automatikusan megtörténik: minden feltöltött kép a megfelelő formátumra és méretre optimalizálva kerül fel, így neked erre nem is kell gondolnod.
A sebesség és a képek kapcsolata
A weboldal betöltési sebessége közvetlenül befolyásolja, hányan maradnak az oldaladon, és azt is, hogyan rangsorolja a Google a találatok között. A képek jellemzően a legnagyobb egyedi tényezők a betöltési időben — ezért ha egy oldal lassú, szinte mindig érdemes először a képeket megvizsgálni. Erről bővebben is írtunk: miért lassú a weboldalad, és hogyan javíthatod. Néhány gyors, gyakorlati fogás:
- Lusta betöltés (lazy loading) — a görgetési ponton kívül eső képek csak akkor töltődjenek be, amikor a látogató odaér.
- Reszponzív képek — mobilon kisebb, asztali gépen nagyobb változat töltődjön be, ne ugyanaz a fájl mindenhol.
- Ne halmozz felesleges háttérképeket — minden extra dekoratív kép plusz letöltést jelent, amit a látogató fizet meg türelemben.
Alt-szöveg: SEO és akadálymentesség
Az alt-szöveg (alternatív szöveg) a kép mögé írt rövid leírás, amit a böngésző akkor jelenít meg, ha a kép valamiért nem töltődik be, és amit a képernyőolvasók felolvasnak a látássérült felhasználóknak. Emellett a Google is ebből érti meg, mi látható a képen — hiszen a keresőrobot nem „lát", csak olvas. Jó alt-szöveg írásához:
- Legyen konkrét és leíró, pl. „modern nappali szoba szürke kanapéval" ahelyett, hogy „kép1.jpg".
- Ne zsúfold tele kulcsszavakkal — egy természetes mondat mindig jobb, mint egy kulcsszólista.
- Tisztán dekoratív képeknél (pl. háttérminta) hagyhatod üresen, hogy a képernyőolvasó átugorja.
- Minden termékfotóhoz, csapatképhez és blogillusztrációhoz érdemes írni egyet — ez apró, de valódi SEO-előny.
Jogtiszta források: honnan szerezz képet?
A kép jogi háttere legalább annyira fontos, mint a mérete. Egy jogosulatlanul használt fotó miatt akár jogi felszólítást is kaphatsz — ez sajnos nem ritka eset kisvállalkozásoknál sem.
Amit érdemes használnod
- Saját fotó — a legjobb választás, ha van rá lehetőséged: hitelesebb, egyedi, és semmilyen jogi kockázatot nem hordoz. Egy telefonnal készült, jól megvilágított fotó gyakran meggyőzőbb, mint egy sablonos stockkép.
- Ingyenes stockoldalak — pl. Unsplash, Pexels, Pixabay: kereskedelmi célra is szabadon felhasználható, jó minőségű fotókat kínálnak, jellemzően forrásmegjelölés nélkül is (érdemes az adott oldal licencfeltételét egyszer átolvasni).
- Fizetős stockoldalak — pl. Shutterstock, Adobe Stock, Freepik prémium csomagjai: cserébe egyedibb, kevésbé elcsépelt válogatást és megbízható licencet kapsz.
- AI-generált képek — egyre elterjedtebb megoldás, ha nincs pontosan illő stockfotó; ellenőrizd az adott szolgáltatás felhasználási feltételeit kereskedelmi célra.
Amit soha ne tegyél
A leggyakoribb és legkockázatosabb hiba: ne tölts le képet egyszerűen a Google Képek találatai közül. A Google Képek kereső csak megjeleníti mások tartalmát, nem ad hozzá felhasználási jogot — a kép mögötti valódi jogtulajdonos bármikor felszólíthat a levételére, vagy kártérítést követelhet. Ugyanez igaz más weboldalakról, közösségi médiából vagy konkurens cégek oldaláról „kimentett" képekre is.
Gyakori hibák weboldal képeknél
- Tömörítetlen, több megabájtos fotók feltöltése — az egyik leggyakoribb oka a lassú oldalnak.
- Torzított arányú képek — amikor a kép szélessége és magassága nem illik a keretbe, és a rendszer „belenyomja", elnyújtva vagy összenyomva a tartalmat.
- Hiányzó alt-szöveg — kihagyott SEO- és akadálymentességi lehetőség.
- Jogosulatlan képhasználat — internetről „kimentett" fotók engedély nélkül.
- Túl sok dekoratív kép — amikor a látvány kedvéért feláldozzák a sebességet, pedig a kettő együtt is működhet, ha figyelsz az optimalizálásra.
- Nem reszponzív képek — amikor mobilon ugyanaz a hatalmas asztali kép töltődik be, feleslegesen lassítva a mobilos élményt; erről bővebben: mobilbarát weboldal.
Gyors checklist feltöltés előtt
- A kép WebP formátumban van, vagy legalább jól tömörített JPEG-ként?
- A szélessége nem nagyobb, mint a tényleges megjelenési méret?
- Átment egy tömörítő eszközön (pl. Squoosh, TinyPNG)?
- Van hozzá leíró alt-szöveg?
- A forrása jogtiszta — saját fotó, licencelt stockkép vagy megfelelő AI-generált tartalom?
Ha ezt az öt pontot minden feltöltött képnél végigfutod, már a legtöbb hibát elkerülted. Ha pedig szeretnéd, hogy ez a folyamat automatikusan, minden alkalommal helyesen történjen — erre valók a jól megépített weboldal-rendszerek.
Hogyan segítünk mi ebben?
Amikor nálunk készül egy weboldal Budapesten, minden feltöltött kép automatikusan a megfelelő formátumra és méretre optimalizálódik, alt-szöveggel együtt — így nem kell külön eszközökkel bajlódnod, az oldalad pedig gyors marad. Ha kíváncsi vagy, a jelenlegi oldalad képei mennyire lassítják a betöltést, az ingyenes AI weboldal-elemzésünk ezt is megmutatja.