Miért homályos a kép a weboldalamon? Először ezt a három dolgot nézd meg
A homályos kép a weboldalon a legtöbb esetben nem a fényképezőgép hibája, hanem azé, ahogy a kép felkerült az oldalra. Három dolog okozza szinte az összes esetet: a kép kisebb, mint amekkora helyen megjelenik, túl erősen össze van tömörítve, vagy a telefonodról feltöltött fotó óriási méretben van, és a böngésző kicsinyíti le.
A jó hír, hogy ezek nagy része magadtól is javítható. A rossz hír, hogy van olyan eset, amikor a téma mélyebbre nyúlik, és a weboldal technikai beállításaihoz kell nyúlni. Alább sorban végigmegyünk mindenen, hogy tudd, melyik a te eseted.
A kép kicsi, a hely nagy — ez a leggyakoribb hiba
Képzeld el, hogy van egy 400 pixel széles fotód a fodrász szalonról, és feltöltöd a főoldal tetejére, ahol 1600 pixel szélesen jelenik meg. A böngésző kifeszíti, és pontosan úgy néz ki, mint amikor egy kis újságfotót nagyítasz fel: életlen lesz, a részletek elmosódnak. Ez a legtöbb homályos kép oka.
A megoldás egyszerű: a kép legalább akkora legyen, amekkora helyen megjelenik, sőt a nagy felbontású kijelzők miatt inkább a kétszerese. Egy fejlécfotónál ez 1600-2000 pixel széles képet jelent. Ha a telefonodról jön a fotó, az bőven elég, csak nem szabad a kicsinyített változatot feltölteni.
Nézd meg a weboldalad szerkesztőjében, hogy a kép eredeti mérete mekkora. Ha kisebb, mint a megjelenési hely, cseréld le egy nagyobbra. Ez a javítás öt perc, és azonnal látszik.
A túl erős tömörítés életlenné teszi a fotót
A weboldal gyorsasága miatt a képeket tömöríteni kell, de van egy pont, ahol ez már látszik. Ha a fotót nagyon alacsony minőségen mented el, a részletek eltűnnek, a szélek elmosódnak, az emberek arca pedig viaszos lesz. Ez főleg a nagy felületen megjelenő képeknél feltűnő.
A JPEG képeknél érdemes a minőséget 75-85 százalék körül tartani, és utána megnézni nagyban. Ha a szöveg van a képen, vagy éles vonalak, logó, akkor JPEG helyett jobb a PNG vagy a modernebb WebP formátum. Ugyanez igaz a termékfotókra egy webshopban, ahol a vásárló a részleteket akarja látni.
Ha nem vagy biztos benne, hogy a tömörítés a bűnös, tölts fel egy képet eredeti minőségben, és hasonlítsd össze a mostanival. A különbség általában szemmel látható.
A böngésző kicsinyíti a nagy fotót — és ez nem baj, ha jól csinálod
Sokan azt hiszik, hogy ha egy 4000 pixel széles fotót feltöltenek, akkor az éles lesz. Az élesség valóban megmarad, de az oldal lassú lesz tőle, mert a böngészőnek le kell töltenie az egészet, majd lekicsinyítenie. Ez a felhasználónak rossz élmény, és a Google is nézi, milyen gyorsan töltődik az oldal.
A helyes megoldás az, hogy a szerveren több méretben is elérhető legyen ugyanaz a kép, és a böngésző a képernyő méretéhez illőt töltse le. Ezt hívják reszponzív képkezelésnek. Egy jó weboldal-építő rendszer ezt magától intézi, de a régebbi oldalakon gyakran hiányzik.
Ez már nem kézzel javítandó dolog, hanem a weboldal beállítása. Ha a képeid élesek, de az oldal lassú, érdemes ránézni a sebességre is, mert a kettő szorosan összefügg.
Amikor nem a kép a hibás, hanem a weboldal
Van egy másik eset: a kép eredeti mérete és tömörítése rendben van, mégsem éles. Ilyenkor a weboldal méretezése vagy a téma állítása a hibás. Előfordul, hogy a téma egy dobozba teszi a képet, és azt nyújtja, vagy a képet CSS-sel nagyítja fel.
Ehhez már a weboldal kódjába kell belenézni, és ez az a pont, ahol a legtöbb kisvállalkozó megáll. Nem kell mély szakértelem hozzá, csak meg kell nézni, hogy a kép elemén milyen szélesség és magasság van beállítva, és hogy a téma milyen képméretet használ.
Ha nem szeretnél ezzel bajlódni, a technikai SEO audit pont ezt nézi meg: a képek méretét, a betöltésüket és azt, hogy nem lassítják-e az oldalt. Az auditban nem csak a homályos képekre derül fény, hanem a többi apró hibára is.
A homályos kép nem csak esztétikai kérdés
Egy fodrász, étterem vagy kivitelező weboldalán a kép az első benyomás. Ha a referenciafotók életlenek, a vendég azt gondolja, hogy a munka is hanyag. Ez nem marketingeskedés, hanem egyszerű észlelés: a szem a részleteket keresi, és ha nem találja, bizalmatlan lesz.
A Google képi keresése is a képek minőségét nézi, és a gyorsaságot is, amit a képek mérete nagyban befolyásol. A Core Web Vitals hivatalos küszöbei: LCP 2,5 másodperc, INP 200 ezredmásodperc, CLS 0,1. A túl nagy képek az LCP-t rontják, mert a fő kép betöltése sokáig tart.
Ezért érdemes a képeket komolyan venni: nem elég, hogy szép legyen, élesnek és gyorsnak is kell lennie. A weboldal gyorsítás foglalkozik ezzel a területtel, ha a sebesség a gond.
Mit tudsz magadtól megtenni ma?
Ha van egy szabad órád, ezekkel a lépésekkel a legtöbb homályos képet meg tudod oldani. Nem kell hozzá fejlesztő, csak egy kis odafigyelés.
Először nézd meg a legfontosabb képeket: a fejlécfotót, a rólad szóló képet, a termékfotókat. Mérd meg, mekkora helyen jelennek meg, és hasonlítsd össze a kép eredeti méretével. Ha kisebb, cseréld nagyobbra.
Utána nézd meg a fájlméretet. Egy fejlécfotó ne legyen több pár száz kilobájtnál, de a minőség ne sérüljön. Ha nagyon nagy, tömörítsd, de ne alacsony minőségen.
Végül nézd meg telefonon is az oldalt. Ott gyakran más kép jelenik meg, és kiderülhet, hogy a mobilnézetben homályos a fotó. Ha ez így van, a téma képkezelését kell megnézni.
Gyakori kérdések
Miért homályos a kép a weboldalamon, ha a telefonon élesnek tűnik?
A telefonon a kép kicsiben jelenik meg, ott nem látszik a hiba. A weboldalon nagyobb felületen van, és ha a kép kisebb, mint a megjelenési hely, a böngésző felnagyítja, ettől lesz életlen. A megoldás, hogy nagyobb felbontású képet töltesz fel.
Elég, ha a képet utólag élesítem egy szerkesztővel?
Nem igazán. Az utólagos élesítés csak a tünetet kezeli, a valódi ok a kép mérete vagy a tömörítés. Ha a kép kicsi, hiába élesíted, nem lesz több részlet benne. Inkább az eredeti, nagyobb képet töltsd fel.
A homályos kép lassítja is az oldalt?
Önmagában a homályosság nem, de ha egy nagy fájlt kicsinyít a böngésző, az lassít. A túl nagy képek az LCP-t rontják, ami a Core Web Vitals egyik mértéke. Érdemes a képeket a megjelenési mérethez igazítani.
Miből tudom meg, hogy a weboldalam képei rendben vannak-e?
Nézd meg a legfontosabb képeket nagyban, mérd össze a megjelenési mérettel, és nézd meg telefonon is. Ha bizonytalan vagy, egy ingyenes weboldal-ellenőrzés során átnézzük a képeket és a sebességet is.