Kompresija slika i konverzija u WebP

Šta je kompresija slika i zašto je bitna za brzinu sajta

Kompresija slika je postupak kojim se smanjuje veličina fajla, a da oko i dalje vidi sliku onako kako treba. Razlikuju se dve vrste: bez gubitka kvaliteta (lossless), gde se podaci samo pametnije pakuju, i sa gubitkom kvaliteta (lossy), gde se odbacuju detalji koje ljudsko oko najteže primećuje. Za fotografije na sajtu skoro uvek je bolja lossy kompresija, jer se dobija višestruko manji fajl uz razliku koju retko ko primeti.

Velika slika je najčešći krivac za spor sajt. Hero slika od 4 MB može da odloži prikaz sadržaja za nekoliko sekundi, posebno na mobilnom internetu. Google to meri kroz Core Web Vitals, pre svega kroz LCP (Largest Contentful Paint), a taj podatak utiče i na poziciju u pretrazi i na to da li će posetilac uopšte sačekati da vidi stranicu.

Alati za kompresiju rade na dva načina: smanjuju dimenzije slike (širina i visina u pikselima) i smanjuju kvalitet zapisa. Oba su potrebna. Slika širine 4000 px koja se prikazuje na 800 px je čist gubitak, ma koliko dobro bila kompresovana.

Kako kompresovati slike za sajt bez gubitka kvaliteta

Postupak je jednostavan i ne zahteva poznavanje alata:

1. Izaberite širinu koja odgovara mestu gde se slika prikazuje. Za velike banner slike do 1920 px, za slike u tekstu 800 do 1200 px, za sličice 300 do 600 px.
2. Postavite kvalitet oko 80 procenata. To je tačka gde je ušteda velika, a razlika se ne vidi.
3. Izaberite format: WebP za široku podršku, AVIF kada želite najmanji fajl.
4. Preuzmite fajl i uporedite ga sa originalom na 100 procenata zumu, posebno na delovima sa tekstom i oštrim ivicama.

Praktičan trik: ako na slici ima mnogo teksta, tankih linija ili logotipa, smanjite kvalitet pažljivije ili koristite lossless kompresiju. Fotografije sa prirodnim detaljima podnose agresivniju kompresiju bez vidljivih artefakata.

WebP ili AVIF: koji format izabrati

WebP je danas siguran izbor. Podržavaju ga svi moderni pretraživači, manji je od JPEG-a pri istom vizuelnom kvalitetu i podržava providnost. AVIF ide korak dalje i često daje još manji fajl, ali kod nekih starijih uređaja i pregledača može da se ne prikaže ili da se dekodira sporije.

Praktično pravilo: koristite WebP kao osnovni format, a AVIF tamo gde vam je prioritet najmanja težina stranice i gde imate fallback. Ako ne želite da razmišljate o kompatibilnosti, WebP je dovoljan za veliku većinu sajtova.

Stručni savet: ne konvertujte već kompresovan WebP u AVIF pa nazad. Svaka nova konverzija sa gubitkom kvaliteta dodaje artefakte. Uvek polazite od originala ili od najkvalitetnijeg sačuvanog fajla.

Najčešće greške pri kompresiji slika

• Smanjivanje kvaliteta pre smanjenja dimenzija. Prvo skalirajte sliku na potrebnu širinu, pa je kompresujte. Obrnut redosled daje lošiji rezultat.
• Isti kvalitet za sve slike. Portreti i produkti traže više detalja od pozadinskih slika i ilustracija.
• Zaboravljen srcset. Jedna velika slika za sve ekrane je promašaj. Ponudite više širina pa neka pregledač izabere.
• Kompresija logotipa u lossy formatu. Za grafiku sa ostrim ivicama bolji je SVG ili PNG.
• Zanemarivanje keša i CDN-a. Najbolja kompresija ne pomaže ako se slika iznova skida pri svakom otvaranju stranice.

Stručni savet: proverite rezultat u alatu za merenje performansi, ne samo okom. Ponekad slika izgleda dobro, ali je i dalje teška jer je dimenzija ostala prevelika.

Ako imate stotine ili hiljade slika, ručna kompresija postaje zamorna. Tada pomaže automatizacija u okviru build procesa ili CMS-a, a EVI Solutions može da pomogne kada je problem veći od pojedinačnog alata.