WebP i AVIF: moderni formati slika koji ubrzavaju sajt

$body$

Slike su na većini sajtova najteži deo stranice — često čine 50 do 70 odsto ukupne težine. Ako vam sajt sporo puca, prva stvar koju treba da pogledate nisu skripte, nego slike. A najbrži dobitak tu donose moderni formati: WebP i AVIF.

Šta su WebP i AVIF?

WebP je format koji je Google predstavio još 2010. i danas ga podržavaju svi moderni browseri. U proseku daje 25–35% manje fajlove od JPEG-a uz isti vizuelni kvalitet. AVIF je noviji format, nastao iz AV1 video kodeka, i ide korak dalje: u praksi daje fajlove i do 50% manje od JPEG-a, posebno kod fotografija sa puno detalja.

Konkretan primer: fotografija proizvoda od 1200 piksela širine koja kao JPEG teži 280 KB, kao WebP obično padne na oko 180 KB, a kao AVIF na 120–140 KB. Kada na stranici imate deset takvih slika, razlika je preko megabajta — što na mobilnoj mreži znači sekundu ili dve brže učitavanje.

Podrška u browserima

WebP radi praktično svuda: Chrome, Firefox, Safari (od verzije 14), Edge. AVIF podržavaju Chrome, Firefox, Edge i Safari od verzije 16. Za starije browsere koristi se takozvani fallback kroz <picture> element:

• Browser prvo proba AVIF verziju slike.
• Ako je ne podržava, prelazi na WebP.
• Ako ni to ne ide, dobija klasični JPEG ili PNG.

Tako nijedan posetilac ne ostaje bez slike, a moderni browseri (preko 95% saobraćaja) dobijaju najmanju verziju.

Kako da uvedete WebP i AVIF na WordPress sajt

Ne morate ručno da konvertujete stotine slika. Na WordPressu to rešavaju pluginovi poput Imagify, ShortPixel, EWWW ili Converter for Media — oni automatski naprave WebP/AVIF verzije postojećih slika i serviraju ih browserima koji ih podržavaju. WordPress od verzije 5.8 podržava direktan upload WebP fajlova, a od 6.5 i AVIF.

Ako ne koristite WordPress, konverziju možete raditi alatima poput Squoosh (besplatan, radi u browseru), cwebp i avifenc komandnih alata, ili servisima kao što su TinyPNG i Cloudinary.

Na šta da pazite

• Ne konvertujte logotipe i ikonice sa malo boja u AVIF po svaku cenu — za njih je često SVG ili optimizovan PNG bolji izbor.
• Ne dižite kvalitet na 100 — kvalitet 75–82 za AVIF i 80–85 za WebP je slatka tačka gde razliku okom ne vidite, a ušteda je najveća.
• Zadržite originale — uvek čuvajte izvorni fajl, konverzija je jednosmerna.
• Proverite CDN — dobar CDN kešira i servira i WebP i AVIF verzije bez dodatne konfiguracije.

Format je pola posla, hosting je druga polovina

I najmanja slika se sporo učitava ako server sporo odgovara. Kombinacija modernih formata, NVMe diskova i globalnog CDN-a — koji je kod nas uključen u sve hosting pakete — daje najbolji rezultat: slike se serviraju sa lokacije najbliže posetiocu, već kompresovane i keširane. Ako vam je brzina bitna i zbog Google rangiranja, pogledajte i naš SEO hosting.

Ukratko: pređite na WebP odmah, uključite AVIF gde možete, koristite fallback za stare browsere i pustite plugin da radi posao. To je najisplativija optimizacija koju sajt može da dobije za jedno popodne.

$body$