Kako pospešiti nalaganje slik na spletni strani
Pet sprememb, ki zmanjšajo težo slik na katerikoli spletni strani, razvrščenih po učinku.
Na večini spletnih strani slike predstavljajo večino tega, kar obiskovalec prenese. Ena sama neoptimizirana fotografija s telefona lahko tehta več kot vsa preostala stran skupaj. Ureditev slik je običajno največja in najcenejša možna izboljšava hitrosti, hitrejše strani pa se bolje uvrščajo v iskalnikih, dlje zadržijo obiskovalce in prinesejo več konverzij.
1. Naložite slike v velikosti, v kateri so prikazane
Fotografija neposredno s telefona je široka 4000 slikovnih pik ali več. Stolpec z vsebino na spletni strani je redko širši od 1200 slikovnih pik, kartica ali sličica pa še precej ožja. Vsako odvečno slikovno piko brskalnik prenese in nato zavrže. Velikost spremenite pred nalaganjem: približno 2000 slikovnih pik širine za pasice čez celo širino (da ostanejo ostre na zaslonih z visoko gostoto), 1200 do 1600 za slike v vsebini in 600 do 800 za kartice. Orodje za spreminjanje velikosti obdela celo mapo naenkrat.
2. Stisnite
Pri pravih merah preostalo opravi stiskanje. Fotografija, shranjena s kakovostjo 80, je na spletni strani videti enako kot fotografija s kakovostjo 100, pogosto pa ima le tretjino velikosti. Stiskanje slik obdela več datotek hkrati in pri vsaki pokaže prihranek.
3. Uporabite WebP
WebP podpirajo vsi aktualni brskalniki in je pri enaki vidni kakovosti običajno 25 do 35 % manjši od JPG, podpora za prosojnost pa ga naredi primernega nadomestka tudi za številne datoteke PNG. Pretvorite z orodjem JPG v WebP ali PNG v WebP. AVIF je še manjši, vendar se počasneje kodira in ga sistemi za nalaganje manj enotno podpirajo, zato je WebP praktična privzeta izbira.
4. Izberite pravi format za vsebino
| Vsebina | Najboljši format |
|---|---|
| Fotografije | WebP ali JPG, kjer WebP ni sprejet |
| Logotipi in ikone | SVG, če ga imate, sicer PNG ali WebP |
| Posnetki zaslona z besedilom | PNG ali WebP brez izgub |
| Preproste animacije | Kratek video namesto GIF-a |
5. Pomagajte brskalniku, da jih nalaga pametno
- Odloženo nalaganje. Slike pod prvim zaslonom naj se naložijo šele, ko se jim obiskovalec približa s pomikanjem. Večina platform to naredi samodejno; v navadnem HTML-ju dodajte loading="lazy" oznakam img, ki na začetku niso vidne.
- Mere. Vsaki sliki določite širino in višino, da stran ne poskakuje, ko slike prihajajo. Premik postavitve je eden od Googlovih kazalnikov Core Web Vitals.
- Glavna slika najprej. Velika slika na vrhu strani, ki običajno šteje kot Largest Contentful Paint, se nikoli ne sme nalagati odloženo. Naložiti se mora čim prej.
Kako velika je razlika
Običajna stran z desetimi fotografijami neposredno s telefona lahko tehta 30 MB. Če jim spremenite velikost na smiselne širine in jih stisnete, ima ista stran običajno približno 2 MB. Po pretvorbi v WebP pa bližje 1,4 MB. Na mobilni povezavi je to razlika med stranjo, ki se prikaže v sekundi, in stranjo, ki jo številni obiskovalci zapustijo.
Preverjanje rezultatov
Googlov PageSpeed Insights in plošča Lighthouse v orodjih za razvijalce v Chromu navedeta prevelike slike, slike, ki bi morale biti v formatu WebP, in element Largest Contentful Paint. Zaženite ju pred spremembami in po njih ter se najprej posvetite stranem z največ obiska.