Képoptimalizálás weboldalon
Webes képoptimalizálás: responsive images, srcset/sizes, AVIF/WebP, width/height, lazy loading és LCP-prioritás.
Röviden
A képek gyakran a legnagyobb letöltött erőforrások közé tartoznak, de a jó optimalizálás nem egyszerűen maximális tömörítés. A böngészőnek a megfelelő pixelméretű, formátumú és minőségű változatot kell kapnia a megfelelő időben.
Mit jelent a képoptimalizálás weboldalon?
A képek gyakran a legnagyobb letöltött erőforrások közé tartoznak, de a jó optimalizálás nem egyszerűen maximális tömörítés. A böngészőnek a megfelelő pixelméretű, formátumú és minőségű változatot kell kapnia a megfelelő időben.
Kép döntési fa
01
Megjelenési méret
02
srcset/sizes
03
Formátum
04
Priority
05
Layout space
Hogyan működik a gyakorlatban?
`srcset` és `sizes` több forrás közül enged választani; modern formátum csökkentheti a byte-ot; width/height vagy aspect-ratio stabilizálja a layoutot; viewport alatti képnél lazy loading csökkenti a kezdeti hálózati munkát. LCP hero képnél viszont a késleltetett felfedezés káros.
- Ne küldj 3000 px képet 320 px megjelenítéshez.
- Responsive source kiválasztásához a sizes értéknek a tényleges layoutot kell leírnia.
- Dekoratív és tartalmi képek accessibility kezelése eltér.
- Hero/LCP és below-the-fold képek prioritása ne legyen azonos.
Gyakorlati fejlesztői szemlélet
A kép pipeline része legyen a komponensrendszernek: méretvariáns, minőség, CDN transform, placeholder és alt logika. Ezzel nem egyesével kell minden feltöltött képet kézzel menteni.
Gyakori hibák és félreértések
- Minden képet lazy-loadolni.
- Csak formátumváltástól várni a teljes performance javulást.
- CSS backgroundként elrejteni fontos LCP képet úgy, hogy későn fedezhető fel.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy