Optimalizácia obrázkov
Optimalizácia obrázkov je proces zmenšovania veľkosti súborov obrázkov a ich efektívneho doručovania bez viditeľnej straty kvality, čím sa zlepšuje rýchlosť stránky a zážitok používateľa.
Obrázky zvyčajne tvoria 50-70 % celkovej veľkosti súboru webovej stránky, čo robí optimalizáciu obrázkov jednou z najefektívnejších úprav výkonu, aké môžete vykonať. Cieľom je dodať najmenší možný súbor, ktorý stále dobre vyzerá na zariadení a displeji používateľa. Moderná optimalizácia obrázkov zahŕňa niekoľko techník.
Responzívne obrázky poskytujú rôzne veľkosti na základe obrazovky používateľa (telefón nepotrebuje 4K obrázok). Lazy loading odkladá načítanie obrázkov, kým sa priblížia do zorného poľa. Kompresia zmenšuje veľkosť súboru odstránením nepotrebných údajov.
V praxi
- E-commerce web previedol 10 000 produktových obrázkov z JPEG na WebP a znížil celkovú šírku pásma obrázkov o 45 %, čím ušetril 500 USD mesačne iba na nákladoch na CDN
- Realitný web implementoval responzívne obrázky, na mobile zobrazoval fotky široké 400 px namiesto 2400 px verzií pre desktop, čím znížil čas načítania na mobile o 4 sekundy
- Cestovateľský blog znížil svoju domovskú stránku z 15 MB na 1,2 MB pomocou lazy loadinga galériových obrázkov a použitia moderných formátov, čím zlepšil skóre Google PageSpeed z 28 na 92
- Novinová agentúra implementovala CDN pre obrázky, ktoré automaticky formátuje a nastavuje veľkosť obrázkov, čím eliminovala potrebu manuálnej optimalizácie fotiek redaktormi pred publikovaním
Nie ste si istí, či sa to týka aj vás?
Senior inžinier prejde vaše stránky, vašu prítomnosť vo vyhľadávaní a spôsob, akým dotazy k vám prichádzajú, a potom zapíše tri veci, ktoré sa oplatí opraviť ako prvé. Dokument si necháte v každom prípade.