Ha lassú egy weboldal, az első gyanúsított szinte mindig a kép. Egy telefonnal készült fotó könnyen 4–6 megabájt, miközben a weboldalon 150–300 kilobájtban is tökéletesen mutatna. A különbség a mobilnetes látogatóknál másodpercekben mérhető.
1. Megfelelő méret
A leggyakoribb hiba, hogy egy 4000 pixel széles képet töltünk fel, amely a weboldalon legfeljebb 800 pixel szélesen jelenik meg. A böngésző ilyenkor is a teljes képet tölti le. A WordPress szerencsére több méretet is készít minden feltöltött képről, és a `srcset` attribútummal mindig a kijelzőhöz illőt kínálja fel – ha a sablon helyesen használja.
2. Modern formátum
- WebP: a JPG-nél jellemzően 25–35%-kal kisebb, hasonló minőség mellett. Ma már minden modern böngésző támogatja.
- AVIF: még kisebb fájlméret, különösen fotóknál. A régebbi böngészők miatt érdemes tartalék formátummal használni.
- SVG: logókhoz és ikonokhoz ideális, mert bármekkora méretben éles.
3. Tömörítés
Egy jó tömörítő a szem számára láthatatlan információkat távolítja el. Webes fotóknál a 75–85%-os minőség általában tökéletes kompromisszum. WordPressben ezt egy képoptimalizáló bővítmény automatikusan elvégzi minden feltöltéskor.
4. Lusta betöltés – okosan
A `loading="lazy"` attribútummal a böngésző csak akkor tölti be a képet, amikor a látogató a közelébe görget. Ez remek a lejjebb lévő képeknél.
Fontos kivétel: a nyitóképet (hero) soha ne töltsd lustán! Ez rontja az LCP mutatót. Az első képernyő képe kapjon kiemelt prioritást (`fetchpriority="high"`).
5. Méretek megadása
Minden képnél legyen megadva a szélesség és a magasság, így a böngésző előre lefoglalja a helyét, és nem ugrál a tartalom betöltés közben.
6. Alt szöveg
Az alternatív szöveg nem csak a keresőoptimalizálásnak szól: a képernyőolvasót használó látogatók ebből tudják meg, mi van a képen. Írd le röviden és tényszerűen, mit ábrázol.
Ellenőrzőlista
- Feltöltés előtt nagyjából a megjelenési méretre kicsinyítve.
- WebP vagy AVIF formátum.
- Automatikus tömörítés bekapcsolva.
- Nyitókép kiemelt prioritással, a többi lusta betöltéssel.
- Szélesség, magasság és alt szöveg minden képen.
Ha az oldalad képei még mindig lassítják a betöltést, a sebességoptimalizálás során a teljes képkezelést átnézzük és rendbe tesszük.
