Kako da se slike na sajtu brže učitavaju
Pet izmena koje smanjuju težinu slika na bilo kom sajtu, poređanih po efektu.
Na većini sajtova slike čine najveći deo onoga što posetilac preuzima. Jedna neoptimizovana fotografija sa telefona može biti teža od cele ostale stranice zajedno. Sređivanje slika je obično najveće i najjeftinije dostupno ubrzanje, a brže stranice se bolje rangiraju, duže zadržavaju posetioce i donose više konverzija.
1. Otpremajte slike u veličini u kojoj se prikazuju
Fotografija direktno sa telefona široka je 4000 piksela ili više. Kolona sa sadržajem na sajtu retko je šira od 1200 piksela, a kartica ili sličica još mnogo uža. Svaki višak piksela pretraživač preuzme, pa ga odbaci. Promenite veličinu pre otpremanja: oko 2000 piksela širine za banere pune širine (da ostanu oštri na ekranima visoke gustine), od 1200 do 1600 za slike u sadržaju i od 600 do 800 za kartice. Alat za promenu veličine obrađuje ceo folder odjednom.
2. Kompresujte
Kada su dimenzije prave, kompresija završava ostatak posla. Fotografija sačuvana sa kvalitetom 80 na veb stranici izgleda isto kao ona sa kvalitetom 100, a često je tri puta manja. Kompresor slika obrađuje više fajlova odjednom i prikazuje uštedu za svaki fajl.
3. Koristite WebP
WebP podržava svaki aktuelni pretraživač i obično je od 25 do 35% manji od JPG fajla pri istom vidljivom kvalitetu, a uz to podržava providnost, pa može da zameni i mnoge PNG fajlove. Konvertujte alatom JPG u WebP ili PNG u WebP. AVIF je još manji, ali se sporije kodira i sistemi za otpremanje ga ređe podržavaju, pa je WebP praktičan podrazumevani izbor.
4. Izaberite pravi format za sadržaj
| Sadržaj | Najbolji format |
|---|---|
| Fotografije | WebP, ili JPG tamo gde WebP nije prihvaćen |
| Logotipi i ikone | SVG ako ga imate, u suprotnom PNG ili WebP |
| Snimci ekrana sa tekstom | PNG ili WebP bez gubitaka |
| Jednostavne animacije | Kratak video umesto GIF-a |
5. Pomozite pretraživaču da ih pametno učita
- Odloženo učitavanje. Slike ispod prvog ekrana treba da se učitaju tek kada posetilac skroluje blizu njih. Većina platformi to radi automatski; u običnom HTML-u dodajte loading="lazy" img tagovima koji na početku nisu vidljivi.
- Dimenzije. Svakoj slici zadajte širinu i visinu, kako stranica ne bi poskakivala dok slike pristižu. Pomeranje rasporeda je jedan od Googleovih Core Web Vitals pokazatelja.
- Glavna slika prva. Velika slika na vrhu stranice, obično ona koja se računa kao Largest Contentful Paint, nikada ne sme da se učitava odloženo. Treba da se učita što je ranije moguće.
Kolika je razlika
Tipična stranica sa deset fotografija direktno sa telefona može imati 30 MB. Kada im se promeni veličina na razumnu širinu i kada se kompresuju, ista stranica obično ima oko 2 MB. Posle konverzije u WebP, bliže 1,4 MB. Na mobilnoj vezi to je razlika između stranice koja se pojavi za sekundu i stranice koju mnogi posetioci napuste.
Provera rezultata
Googleov PageSpeed Insights i panel Lighthouse u Chromeovim alatkama za programere navode prevelike slike, slike koje bi trebalo da budu u WebP formatu i element Largest Contentful Paint. Pokrenite ih pre i posle i prvo se posvetite stranicama sa najviše poseta.