Slike su tipično 50-70% težine prosječne web stranice. Stari JPEG i PNG formati dolaze iz 90-ih (JPEG 1992, PNG 1996) i još uvijek se koriste — usprkos tome što moderniji formati daju 25-50% manje fajlova za istu vizualnu kvalitetu. WebP i AVIF su standardna 2026 odgovor — podržani u svim modernim browserima, automatski generirani od ozbiljnih hosting platformi, i daju trenutačan skok na PageSpeed/Core Web Vitals rezultatima.
Ovaj vodič pokazuje što je razlika između formata, kako ih implementirati na WordPressu i drugim CMS-ovima, koje alate koristiti, i kakav rezultat realno očekivati.
Brze brojke — koliko stvarno dobivaš
Ista 1920×1080 fotografija, standardna scena (sunset, ljudi, krajobraz):
| Format | Težina | vs JPEG | Browser podrška 2026 |
|---|---|---|---|
| JPEG (q85) | ~280 KB | baseline | 100% |
| WebP (q85) | ~180 KB | -35% | 98% (svi moderni) |
| AVIF (q85) | ~140 KB | -50% | 94% (chrome/firefox/safari) |
| JPEG XL | ~120 KB | -57% | ~10% (samo Safari 17+) |
Za PNG (sa transparentnostima) razlike su još veće: WebP ~70% manji, AVIF ~80% manji od PNG-a.
Skala na realnom sajtu: shop s 200 product slika × 40% manja težina = ~10 MB ušteda po stranici. Mobilni LCP padne sa 3.5s na 1.8s. Core Web Vitals "Good" pasterizira se.
WebP vs AVIF — kad koji
WebP — sigurni izbor 2026
- Podržan od svih browsera od 2020 (Safari dodao 2020, Edge i Firefox 2019).
- Enkodiranje je brzo — par sekundi po fotografiji.
- Podržava transparency, animacije (PNG/GIF zamjena).
- Slabija kompresija od AVIF, ali bolja od JPEG.
AVIF — bolja kompresija, sporiji encoding
- Podržan od 94% globalnih browsera 2026 (Chrome 85+, Firefox 86+, Safari 16.1+).
- Enkodiranje ~10× sporije od WebP-a — tipa 5-10 sekundi po slici.
- Bolja kompresija na visokoj kvaliteti, posebno za fotografije.
- Ne podržava sve napredne funkcije (sporiji adoption od optimization plugin-a).
Praktičan 2026 pristup: generiraj oba, posluži prvo AVIF browserima koji podržavaju, fallback WebP, fallback JPEG/PNG za stare browsere. <picture> element to handla automatski.
<picture>
<source srcset="slika.avif" type="image/avif">
<source srcset="slika.webp" type="image/webp">
<img src="slika.jpg" alt="opis" width="800" height="600">
</picture>WordPress implementacija — 3 pristupa
Pristup 1: Plugin koji automatski konvertira
- Smush — free do 50 slika/mjesec, pro neograničeno (€60/god). WebP konverzija, lazy load.
- ShortPixel — pay-per-use, ~€10 za 5000 slika. Najbolja AVIF podrška.
- Imagify — slično ShortPixel-u, by WP Rocket team.
- EWWW Image Optimizer — free osnovne funkcije, lokalna konverzija (besplatno) ili cloud ($).
- Optimole — CDN-bazirana optimizacija, automatska AVIF/WebP konverzija na njihovom edge-u.
Plugin uploada svaku novu sliku → konvertira → posluži najbolju za browser. Postojeće slike se konvertiraju u batch processu.
Pristup 2: LiteSpeed Cache + QUIC.cloud
Ako tvoj hosting koristi LiteSpeed (kao WMD), LiteSpeed Cache plugin ima ugrađen image optimizer (besplatan, ali traži QUIC.cloud account):
- Automatska WebP konverzija pri prvom requestu.
- AVIF u beta funkciji.
- Bez plugin overhead-a, integrirano s page cacheom.
- QUIC.cloud daje free kvotu (~1000 slika/mjesec), pro plan-ovi za više.
Ovo je standardni 2026 setup za WMD klijente — bez dodatnih plugin-a, zero config.
Pristup 3: CDN sa edge image transformation
- Cloudflare Polish + Mirage — Pro plan ($25/mj) automatski konvertira u WebP/AVIF na edge-u.
- Bunny CDN Image Optimizer — $9.5/mj, AVIF support.
- Imgix, Cloudinary — image-focused CDN, transformacije u URL-u (npr.
?w=800&format=avif).
Najmoćnije za sajtove sa puno transformacija (responsive images, lazy thumbnails), ali skuplje za male sajtove.
Manualna konverzija (DIY)
Za jednokratni batch (npr. portfolio photographer prebacuje 5000 fotki):
cwebp (Google)
# Single file
cwebp -q 80 input.jpg -o output.webp
# Batch — sve JPG-ove u folderu
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; doneavifenc (libavif)
avifenc --min 25 --max 35 --speed 6 input.jpg output.avif
for f in *.jpg; do avifenc --min 25 --max 35 --speed 6 "$f" "${f%.jpg}.avif"; doneSquoosh (online + CLI)
squoosh.app Google-ov image converter u browseru. Najbolji UX za testiranje kvaliteta vs veličine prije batch-a.
ImageMagick / GraphicsMagick
magick input.jpg -quality 80 output.webp
magick input.jpg -quality 60 output.avifPlus: ostalih 5 stvari koje treba uz format-konverziju
1. Responsive images (srcset)
Posluži manje slike mobilnim posjetiteljima. WordPress core to automatski radi od 4.4+, ali provjeri da tvoja tema podržava (wp_get_attachment_image() generira srcset).
2. Lazy loading
Slike izvan viewport-a ne učitavaj dok korisnik ne scroll-a. WP od 5.5+ ima native loading="lazy" atribut. Provjeri u HTML output-u da je tu.
3. Width i height atributi
Bez njih browser ne zna koliko prostora rezervirati → CLS (Cumulative Layout Shift) skače. Uvijek imaj width="..." height="..." ili CSS aspect-ratio.
4. Dimenzije = stvarne dimenzije
Ne uploadaj 4000×3000 sliku ako ćeš je prikazat 800×600. Skali prije uploada (ili plugin to radi za tebe). Tipičan WP shop ima 50%+ slika nepotrebno velikih.
5. Kvaliteta-vs-veličina kompromis
q=85 za fotografije, q=90 za product slike (gdje detail bitan), q=70-75 za hero pozadinske. Razlika između q=85 i q=95 vizualno minimalna, 2× veći fajl. Testiraj na pravom devicu prije commit-a.
Što ne raditi
- Dvaput kompresijar. Ne re-save WebP-a kao novi WebP — gubiš kvalitetu (lossy je lossy).
- Ne brisati originale. Drži JPEG/PNG originale za slučaj da želiš re-encodirat u novom formatu.
- Ne konvertirat PNG-ove sa transparentnostima u JPEG. Izgubiš alpha. WebP/AVIF podržavaju transparentnost.
- Ne ignoriraj alt tekstove. Image SEO + accessibility. Niti jedan converter to ne radi za tebe.
Što WMD pristup daje out-of-the-box
- LiteSpeed Cache + QUIC.cloud predkonfiguriran na WP paketima — WebP/AVIF konverzija nakon prvog upload-a.
- NVMe storage — image read brz, ne usporava generaciju thumbnailova.
- HTTP/3 (QUIC) — paralelni download slika brži, posebno na mobilnim mrežama.
- Brotli kompresija na ostalim resourcima — HTML/CSS/JS isto manji.
- Pomoć pri batch konverziji ako migriraš veliki shop — support može pokrenut server-side cwebp/avifenc na originalima.
Najčešća pitanja
Trebam li držati i JPEG i WebP i AVIF na serveru?
Da, za <picture> fallback. Ali većina plugin-a radi to automatski — uploadaš JPEG, plugin generira ostale formate u wp-content/uploads/ pored.
Što ako koristi Safari 14 ili stariji?
Safari 14- ne podržava AVIF (samo Safari 16.1+). Tvoj <picture> fallback automatski daje WebP ili JPEG. ~6% korisnika globalno još na Safari 14-, postupno opada.
Hoće li slike biti lošije kvalitete?
Pri istom "quality" parametru (npr. q=85) WebP i AVIF su vizualno identični JPEG-u za 99% scena, ali manji. Možeš ići i niže kvalitete (q=75) za dodatnu kompresiju bez vidljive razlike.
Što sa SEO? Google indeksira WebP/AVIF slike?
Da. Google Bot razumije WebP od 2017, AVIF od 2021. Image Search prikazuje sve formate normalno.
