Optimizacija slika za web: praktičan vodič

Otvorite bilo koji spor sajt i u 8 od 10 slučajeva krivac su slike: fotografija sa telefona od 6 MB ubačena direktno u tekst, logo u PNG-u od pola megabajta, pozadina od 4000 piksela na ekranu od 400. Slike tipično čine 50-70% ukupne težine stranice — i zato su prvo mesto gde se ubrzava.

Pravilo #1: dimenzije pre svega

Najčešća greška nije format, nego veličina. Ako se slika prikazuje u koloni širokoj 800 piksela, fajl od 4000 piksela je 25 puta više podataka nego što treba (širina × visina — obe se skaliraju). Pre bilo kakve kompresije, smanjite dimenzije na stvarnu veličinu prikaza, najviše dvostruko veću zbog retina ekrana. Sa 4000 na 1600 piksela širine često znači sa 5 MB na 400 KB — pre ijednog drugog koraka.

Pravilo #2: pravi format za pravu namenu

• WebP — današnji standard za fotografije i grafiku na webu. U proseku 25-35% manji od JPEG-a istog vizuelnog kvaliteta, podržava i providnost. Podržavaju ga svi moderni browseri.
• AVIF — naslednik, još 20-ak% manji od WebP-a, ali sporije se enkodira. Odličan izbor ako vaš alat ume da ga napravi.
• JPEG — i dalje sasvim solidan izbor za fotografije, sa kvalitetom 75-82 razlika od originala je golim okom nevidljiva.
• PNG — samo za snimke ekrana i grafiku sa oštrim ivicama. Za fotografije je katastrofa: ista slika ume da bude 10 puta veća nego u WebP-u.
• SVG — za logotipe i ikonice: beskonačno oštar na svakoj veličini, često ispod 5 KB.

Pravilo #3: neka alat radi umesto vas

Ako koristite WordPress, plugin poput Converter for Media, ShortPixel ili Imagify automatski konvertuje postojeće i buduće slike u WebP/AVIF. Za ručnu obradu, Squoosh (besplatan Google-ov alat u browseru) pokazuje uporedni prikaz pre/posle dok pomerate klizač kvaliteta. Realan efekat: galerija od 40 slika sa 60 MB padne na 4-6 MB.

Pravilo #4: lazy loading za slike ispod prvog ekrana

Slike koje posetilac ne vidi odmah ne moraju odmah ni da se učitavaju. Dovoljno je dodati atribut loading="lazy" — WordPress to radi automatski od verzije 5.5. Pazite samo da glavna slika na vrhu stranice NEMA lazy loading, jer je ona deo LCP metrike koju Google meri.

Gde hosting ulazi u priču

I savršeno optimizovane slike neko mora brzo da isporuči. CDN ovde pravi najveću razliku: slike se serviraju sa servera najbližeg posetiocu, umesto da svaka putuje sa vašeg hostinga. Naš SEO hosting uključuje besplatan globalni CDN na svim paketima, pa galerije lete i posetiocima iz dijaspore. Kombinacija ispravnih dimenzija, WebP formata i CDN-a tipično skida 2-4 sekunde sa učitavanja stranice bogate slikama — a to su sekunde koje se direktno vide u Google rangiranju i konverzijama.