SVG, WebP ili AVIF: kako format slike ubrzava sajt i podiže SEO

Optimizacija slika za sajt je najisplativija stvar koju možeš da uradiš za brzinu učitavanja — u praksi slike čine više od polovine ukupne težine prosečne web stranice. Izbor između JPG, PNG, SVG, WebP i AVIF formata direktno određuje koliko brzo se tvoj sajt otvara, a time i kako ga Google rangira. U ovom vodiču prolazimo kroz svaki format, kada koji da koristiš i kako da ceo proces automatizuješ — istim pristupom koji koristimo u usluzi web developmenta kada optimizujemo sajtove klijenata.

Zašto su slike najveći ubica brzine

Kada sajt sporo radi, prvi osumnjičeni skoro nikad nije server ni kod — nego slike. U praksi slike čine više od polovine ukupne "težine" prosečne web stranice, a jedna hero fotografija direktno sa telefona ili foto-aparata teži 4–8 MB. Za poređenje: ceo HTML, CSS i JavaScript prosečnog sajta zajedno često teže manje od jedne takve slike. Postaviš tri neoptimizovane fotografije na početnu stranu i sajt se na mobilnoj mreži učitava duže od deset sekundi.

Google to vrlo konkretno meri kroz Core Web Vitals metrike, pre svega kroz LCP (Largest Contentful Paint) — vreme dok se ne prikaže najveći element na ekranu. Na većini sajtova taj najveći element je upravo slika. Sporije slike znače lošiji LCP, a lošiji LCP znači slabije rangiranje. Kako cela ta mehanika funkcioniše detaljno smo objasnili u tekstu o Core Web Vitals metrikama i brzini sajta.

JPG i PNG: nasleđe iz devedesetih

JPG postoji od 1992. godine, PNG od sredine devedesetih. JPG solidno kompresuje fotografije, ali pri jačoj kompresiji pravi vidljive blokove i šum oko ivica. PNG čuva transparenciju i oštre ivice, ali je za fotografije katastrofalan izbor — ista slika u PNG-u ume da bude pet do deset puta veća nego u JPG-u. Nisu to loši formati, samo su nastali za internet koji više ne postoji. Danas imamo formate koji rade isti posao sa znatno manje kilobajta.

WebP: standard za 2026. godinu

WebP je format koji je razvio Google i koji je u međuvremenu postao podrazumevani izbor za web. Pri istom vizuelnom kvalitetu, WebP fajl je tipično oko 30% manji od JPG-a. Uz to podržava i transparenciju (kao PNG) i animaciju (kao GIF), pa jedan format menja tri stara.

Podrška u browserima odavno nije tema — Chrome, Firefox, Safari i Edge čitaju WebP godinama. Ako tvoj sajt 2026. i dalje servira JPG i PNG fajlove, posetioci preuzimaju kilobajte koje niko nije morao da im pošalje, a ti to plaćaš sporijim sajtom i lošijom pozicijom na Googleu.

Primer iz prakse: hero fotografija od 2,4 MB u JPG-u, posle smanjenja na realnu širinu prikaza i konverzije u WebP, padne na 150–250 KB. Deset puta manje, bez razlike koju bi iko primetio golim okom.

AVIF: korak dalje od WebP-a

AVIF je noviji format, nastao iz AV1 video kodeka. U proseku daje još manje fajlove od WebP-a — fotografije u AVIF-u u praksi umeju da budu i upola manje od JPG ekvivalenta. Posebno dobro se drži pri jakoj kompresiji: tamo gde JPG već raspada sliku u blokove, AVIF i dalje izgleda čisto.

Dobra vest je da AVIF danas čitaju svi moderni browseri — Chrome, Firefox, Safari i Edge. Mane postoje: enkodovanje traje duže nego kod WebP-a, a neki stariji alati i CMS-ovi ga još uvek ne generišu automatski.

U praksi se AVIF servira kroz picture element: browser dobije AVIF ako ume da ga pročita, WebP kao rezervu, a JPG kao poslednju liniju odbrane. Zvuči komplikovano, ali moderne platforme to rade same — o tome malo kasnije.

SVG: za logotipe, ikonice i ilustracije

SVG je potpuno drugačija priča. To nije kompresovana fotografija nego vektorski format — matematički opis oblika, linija i boja. Zato je beskonačno oštar: isti fajl izgleda savršeno na malom telefonu, na 4K monitoru i pri bilo kom zumu.

Logo u SVG-u tipično teži 2–10 KB. Ista stvar u PNG-u, u tri veličine za retina ekrane, lako pređe 100 KB. Uz to SVG možeš da stilizuješ CSS-om — promeniš boju na hover, animiraš ikonicu — bez ijednog dodatnog fajla.

Jedno važno ograničenje: SVG je za grafiku, ne za fotografije. Fotografiju nema smisla opisivati vektorima. Logo, ikonice, ilustracije, grafikoni — SVG. Sve što je snimljeno kamerom — WebP ili AVIF.

Koji format kada: brzi vodič

Da ne bude teorije bez zaključka, evo pregleda koji možeš odmah da primeniš:

• Fotografije (hero sekcije, proizvodi, blog): AVIF sa WebP rezervom — ili samo WebP ako želiš najjednostavnije rešenje
• Logo, ikonice, ilustracije, grafikoni: SVG — minimalna veličina, uvek savršeno oštar
• Slike sa transparencijom (npr. proizvod na providnoj pozadini): WebP ili AVIF umesto PNG-a
• Screenshotovi i slike sa dosta teksta: WebP, po potrebi u lossless varijanti
• Animacije: animirani WebP ili kratak video (MP4/WebM) umesto GIF-a — GIF je apsurdno velik za ono što prikazuje
• JPG i PNG: samo kao rezerva za stare sisteme i za mesta gde moderni formati nisu podržani, npr. email newsletteri

Responsive slike i lazy loading

Format je pola posla — druga polovina su dimenzije. Nema nikakvog smisla da telefon sa ekranom širine 400 piksela preuzima sliku široku 2400 piksela. Za to služi srcset atribut: pripremiš istu sliku u nekoliko širina (npr. 480, 960 i 1600 px), a browser sam bira najmanju koja je dovoljna za taj ekran. Pošto Google već godinama indeksira prvenstveno mobilnu verziju sajta, upravo mobilno iskustvo određuje rangiranje — zato smo mobile-first pristupu dizajnu posvetili poseban tekst.

Druga tehnika je lazy loading: atribut loading="lazy" kaže browseru da sliku ispod prvog ekrana učita tek kada korisnik doskroluje do nje. Ugrađen je u sve moderne browsere, ne treba nikakav plugin. Jedno upozorenje: hero sliku — onu koja je LCP element — nikada ne učitavaj lazy, jer time usporavaš upravo ono što Google najviše meri.

Alt tekst i SEO slika

Brzina nije jedini način na koji slike utiču na SEO. Google Images je za mnoge biznise ozbiljan izvor saobraćaja: nameštaj, enterijeri, frizure, hrana, proizvodi — ljudi bukvalno biraju i kupuju kroz pretragu slika.

Da bi Google razumeo šta je na slici, treba mu tekst. Alt atribut piši opisno i prirodno, na srpskom: "kuhinja po meri od hrastovog drveta" umesto "IMG_4521". Isto važi za ime fajla — kuhinja-hrast-po-meri.webp govori Googleu nešto, DSC04521.jpg ne govori ništa. Alt tekst je istovremeno i pitanje pristupačnosti: čitači ekrana ga izgovaraju korisnicima koji sliku ne vide.

Ovo spada u tehničku SEO higijenu koja se radi jednom, a donosi efekat godinama — upravo tip posla koji pokrivamo kroz SEO optimizaciju sajta.

Alati za konverziju (i kako da ne moraš ručno)

Ručna konverzija

• Squoosh (squoosh.app) — besplatan Googleov alat koji radi u browseru: ubaciš sliku, izabereš WebP ili AVIF i uživo porediš kvalitet pre i posle
• TinyPNG — klasik za brzu kompresiju, danas podržava i WebP i AVIF izlaz
• ImageOptim (Mac) i slični alati — za lokalnu obradu većeg broja fajlova odjednom

Automatski: WordPress i moderni frameworci

Ako je sajt na WordPressu, ne moraš ništa da konvertuješ ručno: pluginovi kao ShortPixel, Imagify ili Converter for Media automatski pretvore sve postojeće i sve buduće slike u WebP/AVIF i serviraju pravu verziju svakom browseru.

Moderni frameworci idu korak dalje. U Next.js-u, na primer, Image komponenta automatski generiše WebP ili AVIF, pravi više veličina za srcset i uključuje lazy loading — programer samo ubaci sliku, sve ostalo se dešava samo. Sličan posao rade i CDN servisi poput Cloudflarea ili Cloudinaryja, koji konvertuju slike u letu.

Praktična checklista i zaključak

Ako želiš da sve ovo primeniš na svom sajtu, evo redosleda:

1. Provuci sajt kroz PageSpeed Insights i vidi koliko te slike trenutno koštaju
2. Logo i ikonice zameni SVG verzijama
3. Sve fotografije konvertuj u WebP, ili AVIF sa WebP rezervom
4. Smanji dimenzije na realnu širinu prikaza — retko kad treba više od 1600–2000 px
5. Dodaj srcset za najveće slike na stranici
6. Uključi lazy loading za sve slike osim hero slike
7. Napiši opisne alt tekstove i imena fajlova na srpskom
8. Automatizuj proces pluginom ili frameworkom, da o ovome više nikad ne razmišljaš

Format slike deluje kao tehnička sitnica, ali je u praksi razlika između sajta koji se otvori dok trepneš i sajta koji posetioci napuste pre nego što se učita. Ako želiš da ti neko pregleda sajt i sredi slike, performanse i tehnički SEO — javi nam se, procena stanja je besplatna i ni na šta te ne obavezuje.