Kad mjerimo brzinu stranica koje nismo mi radili, isti krivac se ponavlja gotovo uvijek: fotografije koje su na stranicu prebačene ravno iz fotoaparata ili mobitela. Slika od pet megabajta i osam tisuća piksela širine prikazuje se u okviru od 800 piksela — preglednik mora skinuti cijelu, pa je smanjiti. Posjetitelj na mobilnoj mreži za to plaća sekundama čekanja.
Koliko velika slika zapravo treba biti
Pravilo je jednostavno: slika treba biti otprilike dvostruko šira od prostora u kojem se prikazuje (zbog ekrana visoke rezolucije), i ni piksel više. U praksi to znači:
- Fotografija preko cijele širine ekrana (hero): 1920–2400 px širine
- Slika unutar članka ili u pola širine: 1200–1600 px
- Kartica u galeriji ili portfoliju: 800–1000 px
- Logotip, ikona, mala sličica: 300–600 px
- Ciljana veličina datoteke: ispod 200 KB za velike fotografije, ispod 100 KB za manje
Koji format odabrati
JPEG je i dalje solidan izbor za fotografije, PNG koristite samo kad vam treba prozirna pozadina (logotipi, ikone), a SVG za logotipe i grafike jer je vektorski pa je oštar u svakoj veličini i obično najmanji.
WebP je danas standard koji podržavaju svi aktualni preglednici i tipično daje 25–35 % manju datoteku od JPEG-a uz istu vidljivu kvalitetu. Ako imate izbor, spremajte u WebP. Za portrete i fotografije s glatkim prijelazima kvalitetu postavite oko 80 % — razlika golim okom nije vidljiva, a datoteka se prepolovi.
Kako to napraviti bez posebnog programa
Ne treba vam Photoshop. Za povremenu upotrebu dovoljni su besplatni online alati za smanjivanje i pretvorbu u WebP; za veći broj slika odjednom koristite bilo koji besplatni program za skupnu obradu koji odjednom promijeni dimenzije cijele mape.
Radite uvijek na kopijama, a originale u punoj rezoluciji sačuvajte odvojeno — jednom smanjena slika ne može se vratiti u izvornu kvalitetu, a originali će vam zatrebati za tisak ili budući redizajn.
Tri stvari koje rade programeri, a vi ih trebate tražiti
Uz pripremljene slike, na strani izrade postoje tri postavke koje bitno utječu na brzinu i koje bi svaka stranica trebala imati:
- Lazy loading — slike koje su ispod prvog ekrana učitavaju se tek kad posjetitelj doskrola do njih
- Zadane dimenzije (width i height) u kodu — sprječavaju 'skakanje' sadržaja tijekom učitavanja, što Google mjeri kao vlastitu metriku
- Opisni alt tekst na svakoj slici — potreban je slijepim korisnicima i pomaže u pretraživanju slika na Googleu
Provjerite rezultat
Nakon zamjene slika pokrenite Google PageSpeed Insights za svoju stranicu i pogledajte mobilnu ocjenu. Kod stranica opterećenih neoptimiziranim fotografijama sam ovaj zahvat često donese najveći pojedinačni skok u brzini — bez ikakve izmjene dizajna ili sadržaja.