Slike su najveći single bottleneck na većini sajtova. Ne dimenzije strane HTMLa, nego nekomprimirane originalne slike koje teže 5MB svaka. Image CDN to rješava — automatski resize, WebP/AVIF konverzija, lazy load, edge caching. Ovo je usporedba glavnih alata.
Što image CDN radi
Razlika od običnog CDN-a (samo cache):
- On-the-fly resize — request
?w=400vraća sliku resize-anu na 400px, originalu je 4000px. - Format conversion — original JPEG, browser hoće WebP/AVIF, CDN serviraj convertano.
- Quality optimization — auto-quality (q=auto) bazirano na sadržaju.
- Smart cropping — fokus na lica/objekte umjesto centra slike.
- Edge cache — generirana varijanta cache-ana globalno.
- DPR (Device Pixel Ratio) — Retina ekran dobiva 2x veću sliku automatski.
Rezultat: originalna slika 5MB postane optimizirana varijanta 60-200KB s WebP/AVIF, multiple sizes za responsive.
Cloudflare Images
Cloudflare-ov managed image service. Upload original, server vraća URL za bilo koju transformaciju.
Plus: jeftino (5 USD/mj za 100.000 slika), integrirano u Cloudflare CDN, brza globalna distribucija, WebP/AVIF auto, smart cropping.
Minus: upload u njihov sustav (storage cost), API za upload nije instant migration friendly za milijun postojećih slika.
Cijena: 5 USD/mj za 100k images storage + 1 USD/100k delivered images. Skupo postaje kod 1M+ slika.
Bunny Optimizer (Bunny.net)
Edge image processor — proxy ispred tvojeg origin storage-a. Bunny ne čuva slike — vraća original, on-the-fly transformira.
Plus: jako jeftino (~9 USD/mj flat za Optimizer + traffic cost), nema migration (slike ostaju na tvojem serveru/S3), EU-headquartered (Slovenija — GDPR friendly), brza, dobra dokumentacija.
Minus: manje features od Cloudinary/Imgix-a (nema npr. video transformation, AI features).
Verdict: najbolji value-for-money za većinu sajtova.
Imgix
Premium image processing service. Najmoćniji feature set.
Plus: 100+ transformacija (faceblur, watermark, complex filters, AI-based crop), izvrstan dokumentaciju, robust API.
Minus: skupo (od 75 USD/mj). Za enterprise.
Cloudinary
Najpoznatiji image+video CDN s AI features (auto-tag, content-aware crop, background removal).
Plus: sve-u-jednom (image + video + DAM), AI features, jednostavan WP plugin.
Minus: free tier ograničen (25k transformacija/mj), brzo postaje skupo (od 99 USD/mj za production).
ShortPixel / Imagify (WP-only)
WordPress pluginovi koji pre-optimiziraju slike u WP Media Library (ne dynamic resize).
Plus: jeftino (~5-10 EUR/mj), zero config za WP, ne mijenja arhitekturu.
Minus: ne radi on-the-fly resize — original veličina se serviraju ako tema ne traži drugu. Manje fleksibilan od image CDN-a.
Self-hosted: Thumbor / imgproxy
Open-source image processors. Self-host na vlastitom serveru, full kontrola.
Plus: nema vendor lock-in, scalable kako želiš, jednokratni server cost.
Minus: moraš održavat (security patches, scaling), nema CDN out-of-the-box (treba CloudFlare ispred), DevOps overhead.
Usporedba ukratko
| Alat | Cijena/mj | Storage | EU/GDPR | Naj za |
|---|---|---|---|---|
| Cloudflare Images | 5+ USD | uključen | OK | do 500k slika |
| Bunny Optimizer | 9 USD + traffic | tvoj | odlično (EU) | best value |
| Imgix | od 75 USD | tvoj | OK | enterprise |
| Cloudinary | od 99 USD | uključen | OK | media + video apps |
| ShortPixel | 5-10 EUR | tvoj | OK | WP-only, jednostavan |
| imgproxy (self-host) | server cost | tvoj | full | kompleksne potrebe |
Praktična implementacija — Bunny Optimizer + WP
- Registriraj Bunny.net account, kreiraj Pull Zone usmjeren na tvoj sajt (origin).
- Uključi Bunny Optimizer addon u settings (postani Image Optimization tier).
- U WordPress instaliraj plugin
Bunny CDN(službeni) — automatski rewrite-a svewp-content/uploads/URLove na CDN. - Postavi default transformacije: WebP/AVIF auto, quality auto, max width 2400px.
- Test na PageSpeed Insights — slike sad serviraju iz CDN-a, optimizirane.
Practical implementacija — Cloudflare Images + Craft CMS
- Aktiviraj Cloudflare Images u dashboard-u.
- Upload slike kroz API ili migration script.
- U Craft Image Asset Volume postavi remote volume za Cloudflare Images.
- U template-ima:
{{ asset.url|cfImage({ width: 800, quality: 80 }) }}kroz custom Twig filter.
Responsive images — srcset
Image CDN bez srcset je polusna implementacija. Browser hoće različite veličine za različite ekrane:
<img src="cdn.example.com/image.jpg?w=800"
srcset="cdn.example.com/image.jpg?w=400 400w,
cdn.example.com/image.jpg?w=800 800w,
cdn.example.com/image.jpg?w=1600 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
loading="lazy" alt="...">Browser bira optimal varijantu temeljem screen-a + DPR-a. WordPress core automatski generira srcset za upload-ane slike, ali optimalno samo za originalne dimenzije.
WebP vs AVIF
- WebP — Google format od 2010, 25-35% manji od JPEG. Podržan u svim browserima od 2020.
- AVIF — noviji (2019+), 30-50% manji od WebP, ali sporiji enkodiranje (CDN to riješi cache-om). Podržan u Chrome, Firefox, Safari.
Best practice: serviraj AVIF ako podržan, fallback WebP, fallback JPEG/PNG. Image CDN to radi automatski preko Accept headera.
Lazy loading
HTML5 native: loading="lazy" attribute na img tagu. Sve moderne browser podržavaju, browser sam odlučuje kad učitat.
Za slike above-the-fold koristi loading="eager" + fetchpriority="high" (LCP optimization).
Pitfalls
- Cache invalidation — kad mijenjaš sliku, CDN cache stari. Cloudflare/Bunny imaju purge API.
- Origin overload — ako cache miss-a puno različitih size-ova, origin postaje hot. Limit allowed sizes (max 5-10 različitih varijanti).
- Hotlinking — netko može embed-at tvoju sliku na svoj sajt, jest tvoj traffic budget. Postavi referrer check ili signed URLs.
- SVG — image CDN-i ne transformiraju SVG (vector). Serviraju kao-jeste.
- PNG s transparentnošću — JPEG nema alpha kanal. WebP/AVIF imaju. Pazi pri format conversion-u.
Mjerenje impacta
Prije/poslije:
- PageSpeed Insights — LCP, total page weight, image weight, savings opportunity.
- WebPageTest — detaljan waterfall, vidiš svaki image request.
- Chrome DevTools Lighthouse — "Properly size images" i "Serve images in next-gen formats" stavke.
Realan target: 70-90% smanjenje image payload-a, 30-50% poboljšanje LCP-a.
WMD i image CDN
Sav WMD WordPress hosting podržava Bunny CDN, Cloudflare Images, i ShortPixel out-of-the-box. Setup uključen u onboarding — postavljanje Pull Zone-a, plugin instalaciju, default transformation rules. Za Craft CMS klijente integriramo Cloudflare Images ili imgproxy self-hosted (na istom serveru) ovisno o potrebama. Performance audit prije/poslije uključen — mjerimo LCP improvement.
FAQ
Bunny CDN vs Cloudflare za image? Bunny je jeftiniji i jednostavniji za pure image use case. Cloudflare ako već imaš sve ostalo na Cloudflare (DNS, WAF, R2). Oba su odlična.
Treba li mi image CDN ako koristim Cloudflare CDN? Da, ako želiš automatsku format conversion i resize. Običan CDN samo cache-a što origin servira.
Image CDN pokvario alt tagove? Ne — alt tagovi su u HTML-u, image CDN samo transformira sliku, ne HTML.
Smije li AVIF utjecat na SEO? Pozitivno (brže učitavanje = bolji Core Web Vitals = SEO boost). Google podržava AVIF u image search.
Što s Photoshop-eksportiranim slikama? Optimiziraj ih lokalno (ImageOptim, Squoosh) PA upload, plus dodaj image CDN za dodatnu kompresiju + format conversion.
Trebaš image CDN setup za WP ili Craft? WMD postavlja Bunny, Cloudflare Images ili custom imgproxy stack. Javi se preko kontakt forme.
