Kako ubrzati učitavanje slika na web-stranici
Pet promjena koje smanjuju težinu slika na bilo kojoj web-stranici, poredanih po učinku.
Na većini web-stranica slike čine najveći dio onoga što posjetitelj preuzima. Jedna neoptimizirana fotografija s mobitela može biti teža od ostatka stranice zajedno. Sređivanje slika obično je najveće i najjeftinije dostupno poboljšanje brzine, a brže stranice bolje se rangiraju, dulje zadržavaju posjetitelje i donose više konverzija.
1. Prenesite slike u veličini u kojoj se prikazuju
Fotografija izravno s mobitela široka je 4000 piksela ili više. Stupac sa sadržajem na web-stranici rijetko je širi od 1200 piksela, a kartica ili minijatura mnogo je uža. Svaki suvišni piksel preglednik preuzme, a zatim baci. Promijenite veličinu prije prijenosa na poslužitelj: oko 2000 piksela širine za bannere pune širine (da ostanu oštri na zaslonima visoke gustoće), 1200 do 1600 za slike u sadržaju i 600 do 800 za kartice. Alat za promjenu veličine obrađuje cijelu mapu odjednom.
2. Sažmite
Kada su dimenzije prave, sažimanje obavlja ostatak. Fotografija spremljena s kvalitetom 80 na web-stranici izgleda jednako kao ona s kvalitetom 100, a često je tri puta manja. Alat za sažimanje slika obrađuje više datoteka odjednom i za svaku prikazuje uštedu.
3. Koristite WebP
WebP podržavaju svi aktualni preglednici i obično je 25 do 35 % manji od JPG-a pri istoj vidljivoj kvaliteti, a zahvaljujući podršci za prozirnost može zamijeniti i mnoge PNG datoteke. Pretvorite slike alatom JPG u WebP ili PNG u WebP. AVIF je još manji, ali se sporije kodira i sustavi za prijenos ga rjeđe podržavaju, pa je WebP praktičan zadani izbor.
4. Odaberite pravi format za sadržaj
| Sadržaj | Najbolji format |
|---|---|
| Fotografije | WebP, ili JPG gdje WebP nije prihvaćen |
| Logotipi i ikone | SVG ako ga imate, inače PNG ili WebP |
| Snimke zaslona s tekstom | PNG ili WebP bez gubitaka |
| Jednostavne animacije | Kratak video umjesto GIF-a |
5. Pomozite pregledniku da ih pametno učita
- Odgođeno učitavanje. Slike ispod prvog zaslona trebale bi se učitati tek kada se posjetitelj pomakne blizu njih. Većina platformi to radi automatski, a u običnom HTML-u dodajte loading="lazy" oznakama img koje na početku nisu vidljive.
- Dimenzije. Svakoj slici zadajte širinu i visinu kako stranica ne bi poskakivala dok slike stižu. Pomak rasporeda jedan je od Googleovih pokazatelja Core Web Vitals.
- Glavna slika prva. Velika slika na vrhu stranice, obično ona koja se računa kao Largest Contentful Paint, nikada se ne bi smjela učitavati odgođeno. Treba se učitati što je ranije moguće.
Kolika je razlika
Tipična stranica s deset fotografija izravno s mobitela može imati 30 MB. Kada se fotografijama veličina smanji na razumnu širinu i kada se sažmu, ista stranica obično ima oko 2 MB. Nakon pretvaranja u WebP bliže je 1,4 MB. Na mobilnoj vezi to je razlika između stranice koja se pojavi u sekundi i one koju mnogi posjetitelji napuste.
Provjera rezultata
Googleov PageSpeed Insights i ploča Lighthouse u alatima za razvojne programere u Chromeu navode prevelike slike, slike koje bi trebale biti WebP i element Largest Contentful Paint. Pokrenite ih prije i poslije, a najprije se usredotočite na stranice s najviše posjeta.