Optimizacija slika

Optimizacija slika je priprema fotografija za sajt tako da izgledaju dobro, a ne usporavaju stranicu. Obuhvata veličinu u pikselima, format datoteke, kompresiju, način učitavanja i opis slike.

Kod većine sporih sajtova koje otvorimo uzrok nije hosting ni tema nego slike. To je ujedno i najbolja vijest, jer je to dio koji se popravi za jedno popodne i vidi se odmah.

Šta se zapravo optimizuje

Pet stvari, i svaka rješava svoj problem.

Veličina u pikselima. Slika treba biti otprilike onolika koliko se prikazuje, uz rezervu za ekrane visoke gustoće. Fotografija od pet hiljada piksela u prostoru za osam stotina je čist gubitak.

Format. WebP je danas razuman izbor za sve fotografije; AVIF daje još manje datoteke i nudi se kao alternativa. PNG se zadržava samo tamo gdje treba providna pozadina, a logo i ikone idu kao SVG.

Kompresija. Smanjenje datoteke uz gubitak koji se golim okom ne vidi. Kod fotografija se obično može skinuti veliki dio težine bez vidljive razlike.

Način učitavanja. Slike koje su ispod prvog ekrana se učitavaju tek kad se dođe do njih. Glavna slika na vrhu se učitava odmah.

Opis i naziv. Alt tekst za one koji sliku ne vide, i naziv datoteke koji nešto znači umjesto IMG_4821.

Zašto to Google mjeri

Brzina i stabilnost stranice se mjere kroz Core Web Vitals, i slike utiču na dvije od tri mjere.

Prva je vrijeme do prikaza najvećeg elementa. Na većini stranica je taj najveći element upravo slika na vrhu. Kad ona ima tri megabajta, ta mjera pada bez obzira na sve ostalo.

Druga je pomjeranje sadržaja. Ako slici nisu zadane širina i visina, pregledač ne zna koliko prostora da ostavi, pa tekst poskoči kad se slika učita. Čovjek koji je taman krenuo kliknuti promaši dugme. To je jedan atribut u kodu i rješava se odmah.

Uz to postoji i obična, neizmjerena posljedica: ljudi na sporijoj vezi odustanu prije nego što stranica završi učitavanje. Kod plaćenog prometa to je dvostruki gubitak.

Kako se radi u praksi

Postupak se razlikuje po tome ko postavlja sadržaj.

Kod WordPressa se instalira dodatak koji slike automatski pretvara u moderne formate i komprimuje ih pri postavljanju. To pokrije veći dio posla. Ostaje pravilo za one koji objavljuju: slika se prije postavljanja smanji na razumnu širinu, a ne prenosi direktno s telefona.

Kod Shopifyja se dio radi sam, ali vrijedi provjeriti dimenzije fotografija proizvoda i držati ih ujednačenim.

Kod sajtova rađenih po mjeri se to najčešće rješava u kodu, tako da sistem sam pravi nekoliko veličina svake slike i pregledaču nudi onu koja odgovara ekranu. To je isti princip koji nosi i prilagođeni dizajn.

Za već postavljene slike postoje alati koji prođu sajt i prijave koje su prevelike. Google PageSpeed Insights u izvještaju navede tačno koje slike treba smanjiti i koliko bi se time uštedjelo.

Fotografije proizvoda i radova

Kod web trgovine slike nisu samo pitanje brzine nego i prodaje.

Ujednačenost je važnija od savršenstva. Iste dimenzije, ista pozadina, isti ugao. Katalog u kojem svaka slika izgleda drugačije djeluje neuredno čak i kad su pojedine fotografije dobre.

Uz to nekoliko fotografija po proizvodu, od kojih barem jedna pokazuje veličinu ili upotrebu. To smanjuje broj povrata više od bilo kojeg opisa.

Kod uslužnih firmi vrijedi isto pravilo u drugom obliku. Fotografije stvarnog posla, prije i poslije, tima na terenu. Preuzete fotografije s interneta prepoznaju se lako i ne govore ništa o vama.

Slike u pretrazi

Pretraga slika je kanal koji se najčešće zaboravi, a kod nekih branši donosi stvarne posjete: smještaj, ugostiteljstvo, namještaj, građevinski radovi.

Za to trebaju tri stvari. Alt tekst koji opisuje šta je na slici, običnim riječima. Naziv datoteke koji govori isto. I to da slika stoji u sadržaju koji se tiče te teme, a ne sama za sebe.

Uz to pomaže da slike budu dovoljno velike da ih Google uopšte prikaže u rezultatima; premale se preskaču.

Kako izgleda provjera

Provjera traje petnaest minuta i ne traži poseban alat.

Otvorite svoju naslovnicu u Chromeu, kliknite desnim dugmetom i odaberite pregled, pa karticu Network. Osvježite stranicu i pogledajte ukupnu težinu. Ako prelazi nekoliko megabajta, sortirajte po veličini i vidjeće se koje su slike krivac.

Zatim pokrenite PageSpeed Insights za istu adresu. U izvještaju stoji spisak slika koje su veće nego što treba, s procjenom koliko bi se uštedjelo.

Na kraju provjerite na telefonu, na mobilnoj vezi. Ono što se na kancelarijskoj vezi učita za sekundu na slabijoj vezi traje mnogo duže, a većina vaših posjetilaca je upravo tamo.

Kod trgovina se to množi

Kod web trgovine slike nisu jedna po stranici nego desetine po kategoriji.

Stranica kategorije s pedeset proizvoda učitava pedeset fotografija. Ako je svaka teška pet stotina kilobajta umjesto pedeset, razlika je dvadeset pet megabajta na jednoj stranici.

Zato se kod trgovina prvo rješavaju sličice u pregledu kategorije, pa tek onda velike fotografije na stranicama proizvoda. Sličica ne treba biti u punoj rezoluciji; treba biti tačno onolika koliko se prikazuje.

Uz to vrijedi provjeriti šta radi dodatak za povećavanje slike. Dio njih učitava punu fotografiju odmah, umjesto tek kad je neko klikne.

Greške koje najčešće viđamo

Prva je fotografija prenesena direktno s telefona, u punoj veličini.

Druga su slike bez zadanih dimenzija, pa sadržaj poskakuje dok se učitava.

Treća je lazy loading uključen i na glavnoj slici na vrhu, čime se usporava upravo ono što se mjeri.

Četvrta je PNG format za obične fotografije, gdje datoteka bude nekoliko puta veća nego što treba.

Peta su nazivi datoteka kao IMG_4821 i alt tekstovi kojih nema.

Šesta je pretjerana kompresija, pa fotografije proizvoda izgledaju mutno. Ovo je jedina greška u suprotnom smjeru i kod trgovina košta prodaju.

Lista za provjeru

• Koliko teži vaša naslovnica ukupno, i koliki dio toga su slike?
• Odgovara li širina slika prostoru u kojem se prikazuju?
• Koristite li WebP ili AVIF umjesto starih formata?
• Imaju li slike zadane širinu i visinu u kodu?
• Učitava li se glavna slika na vrhu odmah, a ostale tek kad zatrebaju?
• Imaju li slike alt tekst i naziv datoteke koji nešto znači?
• Jesu li fotografije proizvoda ujednačene po dimenzijama i pozadini?
• Koristite li vlastite fotografije ili preuzete?

Pojmovi koje ćete čuti uz optimizaciju slika

• WebP i AVIF: moderni formati koji daju manje datoteke od JPG-a.
• Lazy loading: učitavanje slike tek kad posjetilac dođe do nje.
• Responsive slike: više veličina iste slike, od kojih pregledač bira odgovarajuću.
• Alt tekst: opis slike za čitače ekrana i za pretragu.
• CLS: mjera pomjeranja sadržaja, na koju slike bez dimenzija direktno utiču.
• CDN: mreža koja slike poslužuje bliže posjetiocu i time ubrzava učitavanje.