Hogyan töltődjenek be gyorsabban a képek egy weboldalon
Az az öt változtatás, amely bármely weboldalon csökkenti a képek súlyát, hatás szerinti sorrendben.
A legtöbb weboldalon a látogató által letöltött adatok nagy részét a képek teszik ki. Egyetlen optimalizálatlan telefonos fotó többet nyomhat, mint az oldal összes többi része együttvéve. A képek rendbetétele általában a legnagyobb és legolcsóbb elérhető sebességjavítás, a gyorsabb oldalak pedig jobb helyen szerepelnek a keresőben, tovább tartják ott a látogatókat, és többet konvertálnak.
1. Abban a méretben töltsd fel a képeket, amelyben megjelennek
Egy egyenesen a telefonról származó fotó 4000 pixel széles vagy még szélesebb. Egy weboldal tartalmi oszlopa ritkán szélesebb 1200 pixelnél, egy kártya vagy bélyegkép pedig ennél jóval keskenyebb. Minden felesleges pixelt letölt, majd eldob a böngésző. Feltöltés előtt méretezz át: teljes szélességű bannerekhez nagyjából 2000 pixel szélesre (hogy a nagy pixelsűrűségű kijelzőkön is éles maradjon), tartalmi képekhez 1200-1600 pixelre, kártyákhoz 600-800 pixelre. Az átméretező eszköz egy egész mappát elintéz egyszerre.
2. Tömöríts
Megfelelő méretek mellett a többit a tömörítés végzi el. Egy 80-as minőségen mentett fotó weboldalon pontosan ugyanúgy néz ki, mint a 100-as, és gyakran csak harmad akkora. A képtömörítő egyszerre több képet is kezel, és minden fájlnál megmutatja a megtakarítást.
3. Használj WebP-t
A WebP-t minden aktuális böngésző támogatja, és azonos látható minőség mellett jellemzően 25-35%-kal kisebb a JPG-nél, ráadásul az átlátszóságot is támogatja, így sok PNG-t is kiválthat. Konvertálj a JPG-ből WebP vagy a PNG-ből WebP eszközzel. Az AVIF még kisebb, de lassabban kódolható, és a feltöltési rendszerek kevésbé egységesen támogatják, ezért a gyakorlatban a WebP az alapértelmezett választás.
4. Válaszd a tartalomhoz illő formátumot
| Tartalom | Legjobb formátum |
|---|---|
| Fotók | WebP, vagy JPG, ahol a WebP-t nem fogadják el |
| Logók és ikonok | SVG, ha van; egyébként PNG vagy WebP |
| Szöveges képernyőképek | PNG vagy veszteségmentes WebP |
| Egyszerű animációk | GIF helyett egy rövid videó |
5. Segítsd a böngészőt az okos betöltésben
- Késleltetett betöltés. Az első képernyő alatti képek csak akkor töltődjenek be, amikor a látogató a közelükbe görget. A legtöbb platform ezt automatikusan elvégzi; sima HTML-ben add hozzá a loading="lazy" attribútumot azokhoz az img címkékhez, amelyek elsőre nem látszanak.
- Méretek. Adj meg minden képnek szélességet és magasságot, hogy az oldal ne ugráljon, ahogy a képek megérkeznek. Az elrendezés elcsúszása a Google Core Web Vitals mutatóinak egyike.
- A fő kép elsőként. Az oldal tetején lévő nagy képet, amely általában a Largest Contentful Paint elemnek számít, soha ne töltsd be késleltetve. A lehető leghamarabb be kell töltődnie.
Mekkora a különbség
Egy átlagos oldal tíz, egyenesen a telefonról származó fotóval akár 30 MB-ot is nyomhat. Észszerű szélességre méretezve és tömörítve ugyanez az oldal általában nagyjából 2 MB. WebP-be konvertálva inkább 1,4 MB körül van. Mobilkapcsolaton ez a különbség egy másodperc alatt megjelenő oldal és egy olyan oldal között, amelyet sok látogató inkább otthagy.
Az eredmények ellenőrzése
A Google PageSpeed Insights és a Chrome fejlesztői eszközeiben található Lighthouse panel egyaránt felsorolja a túlméretezett képeket, a WebP-be konvertálandó képeket és a Largest Contentful Paint elemet. Futtasd őket előtte és utána is, és először a legnagyobb forgalmú oldalakra koncentrálj.