Formati slika u 2026.: kada AVIF nadmašuje WebP, a kada ne

Stanje formata slika u 2026.

AVIF je dovoljno dugo bio "budućnost" da sada djeluje kao sadašnjost. Podrška preglednika prešla je 95% globalne pokrivenosti krajem 2024., CDN-ovi su dodali automatsko transkodiranje u AVIF, a većina alata za optimizaciju slika sada standardno isporučuje AVIF. WebP je u međuvremenu postao siguran rezervni format — sveprisutan, brz za enkodiranje i dovoljno dobar za većinu slučajeva upotrebe.

Pitanje više nije je li AVIF teoretski bolji. Jest. Pitanje je čine li praktični kompromisi — vrijeme enkodiranja, zrelost alata, ponašanje u rubnim slučajevima — prelazak isplativim za vaše konkretno opterećenje.

Ovaj članak prolazi kroz stablo odlučivanja. Ako poslužujete tisuće slika koje učitavaju korisnici, odgovor je drukčiji nego ako ručno podešavate desetak glavnih marketinških vizuala. Ako vam je važna brzina enkodiranja, odgovor se ponovno mijenja.

Gdje AVIF uvjerljivo pobjeđuje

AVIF koristi intra-frame kompresiju AV1 video kodeka, što znači da koristi prednosti godina optimizacije za pokretni video. Rezultat su dosljedno manje datoteke nego kod WebP-a pri jednakoj perceptivnoj kvaliteti, osobito za fotografski sadržaj.

U ponovljenim testovima na raznolikim skupovima slika, AVIF datoteke su 20-30% manje od WebP-a pri istom SSIM rezultatu. Za fotografije visoke rezolucije — fotografije proizvoda, uredničke slike, sve iznad 1200px širine — ta se razlika brzo zbraja. WebP od 2MB postaje AVIF od 1.4MB. Pomnožite to sa stotinu slika na stranici i uštede propusnosti postaju značajne.

AVIF također bolje obrađuje glatke gradijente i područja niskog kontrasta nego WebP. WebP-ovo nasljeđe VP8-a znači da može uvesti banding na nebu, u sjenama i drugim suptilnim tonalnim prijelazima. AVIF-ovo sofisticiranije transformacijsko kodiranje to izbjegava. Ako vaše slike uključuju mnogo gradijenata — dizajnerske radove, ilustracije, zalaske sunca — AVIF će izgledati čišće uz manje veličine datoteka.

Podrška preglednika sada je dovoljno snažna da AVIF može biti primarni format za većinu web-mjesta. Safari je dodao podršku u verziji 16.4 (ožujak 2023.), što je bio posljednji veliki izuzetak. Globalna podrška je iznad 95% početkom 2026. Preostali jaz čine stariji Android uređaji i naslijeđeni poslovni preglednici, zbog čega vam je i dalje potreban rezervni format.

Gdje WebP i dalje ima smisla

Brzina enkodiranja najveće je praktično ograničenje. Enkodiranje AVIF-a je 5-10x sporije od WebP-a, ovisno o postavkama kvalitete i implementaciji enkodera. Za sadržaj koji generiraju korisnici — profilne fotografije, privitke na forumima, sve što se učitava u stvarnom vremenu — ta latencija je važna. WebP enkodiranje koje traje 200ms postaje AVIF enkodiranje od 2 sekunde. Ako prijenose obrađujete sinkrono, to je kašnjenje koje korisnik izravno osjeća.

Rješenje je ili enkodirati asinkrono (učitati izvornik, poslužiti placeholder, enkodirati u pozadini) ili ostati na WebP-u za sadržaj koji generiraju korisnici, a AVIF rezervirati za kurirane materijale koje kontrolirate. Mnoga web-mjesta rade oboje: AVIF za marketinške slike, WebP za korisničke prijenose.

WebP također ima zreliji ekosustav alata. Svaka biblioteka za slike, CMS dodatak i CDN godinama podržavaju WebP. Podrška za AVIF sustiže zaostatak, ali rubni slučajevi i dalje postoje. Neke starije ImageMagick verzije proizvode AVIF izlaz loše kvalitete. Neki CDN-ovi dodatno naplaćuju AVIF transkodiranje. Ako radite u ograničenom okruženju — naslijeđeni CMS, ograničen budžet, tijesni rokovi — WebP je put najmanjeg otpora.

Naposljetku, WebP je i dalje manji od JPEG-a u gotovo svakom slučaju, a enkodiranje je dovoljno brzo za upotrebu u stvarnom vremenu. Ako je vaša trenutačna polazna točka JPEG i još niste prešli na moderne formate, WebP je sigurniji prvi korak. AVIF uvijek možete dodati kasnije kao progresivno poboljšanje.

Praktično stablo odlučivanja

Evo kako odabrati:

• Kurirane marketinške slike, glavni vizuali, uredničke fotografije: Koristite AVIF kao primarni format, s WebP-om kao prvim rezervnim formatom i JPEG-om kao završnim rezervnim formatom. Uštede u veličini datoteka opravdavaju trošak enkodiranja, a vi kontrolirate pipeline.
• Sadržaj koji generiraju korisnici i učitava se u stvarnom vremenu: Koristite WebP. Brzina enkodiranja važnija je od posljednjih 20% učinkovitosti kompresije, a višesekundna kašnjenja si ne možete priuštiti.
• Ilustracije, grafike ravnih boja, snimke zaslona: AVIF je bolji od WebP-a, ali PNG je često konkurentan za jednostavne grafike s velikim ravnim područjima. Testirajte oboje. Ako je vaš PNG već malen i dobro se komprimira, migracija formata možda nije vrijedna truda.
• Minijature i male slike: WebP je obično sasvim dobar. Apsolutne uštede u bajtovima kod AVIF-a su male (WebP od 10KB postaje AVIF od 8KB), a brzina enkodiranja važnija je pri velikoj skali.
• Podrška za naslijeđene preglednike je kritična: Ostanite na WebP-u kao primarnom modernom formatu. AVIF-ova pokrivenost od 95% izvrsna je, ali ako poslužujete korisničku bazu sa starijim uređajima ili poslovnim okruženjima, WebP-ova gotovo univerzalna podrška sigurniji je izbor.

Ako niste sigurni, najsigurniji obrazac je poslužiti AVIF preglednicima koji ga podržavaju, uz WebP rezervu i JPEG kao završnu rezervu. Element <picture> to čini jednostavnim:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Ovaj pristup daje vam najbolje od oba svijeta: maksimalnu kompresiju za moderne preglednike i sigurne rezervne opcije za starije.

Postavke enkodiranja koje su važne

Ako prihvatite AVIF, postavke enkodiranja imaju veći utjecaj na kvalitetu izlaza nego kod WebP-a. AVIF-ova fleksibilnost znači da postoji više načina za dobivanje lošeg rezultata.

Dvije najvažnije postavke su kvaliteta i brzina. Kvaliteta je jednostavna: veći brojevi znače slike boljeg izgleda i veće datoteke. Za AVIF je postavka kvalitete 75-85 obično najbolja ravnoteža za fotografski sadržaj. Ispod 70 počinju se vidjeti primjetni artefakti. Iznad 90 veličine datoteka naglo rastu bez značajnih dobitaka u kvaliteti.

Brzina određuje koliko vremena enkoder troši na optimizaciju izlaza. Sporije enkodiranje proizvodi manje datoteke, ali se povrati brzo smanjuju. Većina enkodera koristi ljestvicu od 0-10, gdje je 0 najsporije, a 10 najbrže. Postavka brzine 6-8 dobar je kompromis: enkodiranje je dovoljno brzo za skupnu obradu, a veličine datoteka unutar su 10-15% teorijskog minimuma.

Ako enkodirate AVIF na poslužitelju, koristite noviju verziju libavif ili avifenc. Stariji enkoderi (prije 2024.) proizvode primjetno lošiji izlaz pri istoj veličini datoteke. Format još sazrijeva, a poboljšanja enkodera bila su značajna.

Što je s JPEG XL-om?

JPEG XL je tehnički superioran i AVIF-u i WebP-u. Bolje komprimira, brže enkodira, podržava kompresiju bez gubitaka i obrađuje širi raspon vrsta slika. Također je mrtav format.

Google je uklonio podršku za JPEG XL iz Chromea 2022., navodeći nisku prihvaćenost i složenost. Apple nikada nije dodao podršku. Od 2026. JPEG XL podržan je samo u Firefoxu i Safari Technology Previewu, što znači da nije održiv za produkcijsku upotrebu. Osim ako dobavljači preglednika ne promijene smjer — što je malo vjerojatno — JPEG XL ostat će format za entuzijaste i arhivske tijekove rada, a ne za web.

Put migracije

Ako prelazite s JPEG-a na moderne formate, najsigurniji put je:

1. Provedite reviziju trenutačnog pipelinea za slike. Utvrdite odakle slike dolaze (CMS, korisnički prijenosi, CDN), kako se obrađuju i koje formate trenutačno poslužujete. Zašto je obrada slika u pregledniku dobitak za privatnost pokriva neke kompromise oko toga gdje se obrada slika odvija.
2. Počnite s WebP-om. Brz je za enkodiranje, široko podržan i odmah smanjuje veličine datoteka. To je prvi korak s niskim rizikom.
3. Dodajte AVIF za kurirani sadržaj. Kada WebP pouzdano radi, dodajte AVIF za slike visoke vrijednosti kod kojih je veličina datoteke najvažnija. Testirajte vremena enkodiranja i provjerite podržava li ga vaš CDN ili servis za slike.
4. Pratite podršku preglednika. Pokrivenost AVIF-a sada je izvrsna, ali ako vaša analitika pokazuje značajan postotak korisnika na starijim preglednicima, zadržite WebP kao primarni format.
5. Izmjerite učinak. Koristite praćenje stvarnih korisnika za praćenje vremena učitavanja stranice i Largest Contentful Paint prije i nakon migracije. Kako čitati Lighthouse izvješće bez panike koristan je vodič za tumačenje metrika performansi.

Cilj nije koristiti najnoviji format zato što je nov. Cilj je posluživati manje slike bez žrtvovanja kvalitete, što poboljšava brzinu stranice i smanjuje troškove propusnosti. AVIF to u većini slučajeva radi bolje od WebP-a, ali praktična ograničenja — brzina enkodiranja, alati, podrška preglednika — znače da je WebP i dalje pravi izbor za neka opterećenja.

Ključni zaključci

• AVIF je 20-30% manji od WebP-a pri jednakoj kvaliteti, osobito za fotografski sadržaj i slike s gradijentima.
• Enkodiranje AVIF-a je 5-10x sporije od WebP-a, što ga čini nepraktičnim za korisničke prijenose u stvarnom vremenu osim ako enkodirate asinkrono.
• Podrška preglednika za AVIF globalno je iznad 95%, ali gotovo univerzalna podrška WebP-a čini ga sigurnijim rezervnim formatom.
• Za kurirane marketinške slike koristite AVIF kao primarni format uz WebP i JPEG rezervne formate. Za sadržaj koji generiraju korisnici ostanite na WebP-u.
• JPEG XL je tehnički superioran, ali nema održivu podršku preglednika i ne bi se trebao koristiti za produkcijska web-mjesta.

FAQ

Q: Mogu li posluživati AVIF bez rezervnog formata?

A: Još ne. Podrška za AVIF je iznad 95%, ali to i dalje ostavlja milijune korisnika na starijim preglednicima. Uvijek uključite WebP ili JPEG rezervu koristeći element <picture>. Preglednik će automatski odabrati najbolji format koji podržava.

Q: Podržava li AVIF prozirnost?

A: Da. AVIF podržava alfa kanal, što ga čini održivom zamjenom za PNG u slučajevima kada vam treba prozirnost. Veličine datoteka obično su manje nego kod PNG-a, iako je enkodiranje sporije.

Q: Trebam li ponovno enkodirati sve postojeće slike u AVIF?

A: Samo ako uštede propusnosti opravdavaju trud. Počnite sa stranicama s velikim prometom i velikim slikama gdje je učinak najvidljiviji. Za stranice s malo prometa ili male slike ROI je minimalan. Prvo se usredotočite na novi sadržaj, zatim selektivno popunite postojeći.

Q: Koji je najbolji alat za skupno enkodiranje AVIF-a?

A: avifenc (dio libavif) najrašireniji je alat naredbenog retka. Za GUI alate, Squoosh (web-based) i ImageOptim (Mac) podržavaju AVIF. Većina modernih CDN-ova i servisa za slike (Cloudflare, Cloudinary, imgix) može automatski transkodirati u AVIF.

Q: Radi li AVIF s responzivnim slikama i srcset?

A: Da. Koristite element <picture> s više elemenata <source> za rezervne formate, i srcset unutar svakog <source> za responzivno određivanje veličine. Preglednik će odabrati najbolji format i veličinu na temelju podrške i širine viewporta.

<!-- tool-cta:start -->

💡 Isprobajte ovo: Usporedite ta dva formata na vlastitim resursima pomoću Image Converter, koji može izvesti i AVIF i WebP kako biste mogli izmjeriti stvarnu veličinu i kvalitetu.

<!-- tool-cta:end -->

Izvori

• AVIF vs WebP: sveobuhvatna usporedba — Detaljna analiza učinkovitosti kompresije i postavki kvalitete za različite vrste slika.
• Mogu li koristiti AVIF? — Aktualni podaci o podršci preglednika za format slike AVIF.
• libavif GitHub repozitorij — Referentna implementacija enkodera i dokumentacija za AVIF.
• Web Almanac: Images — Godišnje izvješće o prihvaćenosti formata slika i performansama na webu.