Slike so največje ozko grlo na večini spletnih mest. Ne dimenzije HTML strani, temveč nestisnjene originalne slike, ki tehtajo 5 MB. Image CDN to rešuje – samodejno spreminjanje velikosti, pretvorba WebP/AVIF, leno nalaganje, predpomnjenje robov. To je primerjava glavnih orodij.

Kaj počne slikovna CDN?

Razlika od običajne CDN mreže (samo predpomnilnik):

1. Spreminjanje velikosti sproti — zahteva ?w=400 vrne sliko, spremenjeno na 400px, originalna velikost je 4000px.
2. Pretvorba formata — originalni JPEG, brskalnik želi pretvoriti WebP/AVIF, CDN strežnik.
3. Optimizacija kakovosti – samodejna kakovost (q=auto) glede na vsebino.
4. Pametno obrezovanje – osredotočanje na obraze/predmete namesto na sredino slike.
5. Predpomnilnik robov – globalno ustvarjena različica predpomnilnika.
6. DPR (razmerje slikovnih pik naprave) – zaslon Retina samodejno dobi 2-krat večjo sliko.

Rezultat: originalna 5MB slika postane optimizirana 60-200KB različica z WebP/AVIF, več velikosti za odzivnost.

Slike Cloudflare

Storitev upravljanja slik Cloudflare. Naložite izvirnik, strežnik vrne URL za vsako transformacijo.

Plus: poceni (5 USD/mesec za 100.000 slik), integrirano s Cloudflare CDN, hitra globalna distribucija, samodejno obrezovanje WebP/AVIF, pametno obrezovanje.

Minus: nalaganje v njihov sistem (stroški shranjevanja), API za nalaganje ni prijazen za takojšnjo migracijo milijona obstoječih slik.

Cena: 5 USD/mesec za shranjevanje 100.000 slik + 1 USD/100.000 dostavljenih slik. Pri več kot milijonu slik postane drago.

Optimizator zajčkov (Bunny.net)

Edge slikovni procesor – posrednik pred vašim izvornim shranjevanjem. Bunny ne shranjuje slik – vrne izvirnik in ga sproti preoblikuje.

Plus: zelo poceni (~9 USD/mesec pavšalna cena za Optimizer + stroški prometa), brez migracije (slike ostanejo na vašem strežniku/S3), sedež v EU (Slovenija – prijazno do GDPR), hitro, dobra dokumentacija.

Slabost: manj funkcij kot Cloudinary/Imgix (npr. brez pretvorbe videa, funkcije umetne inteligence).

Razsodba: najboljše razmerje med ceno in kakovostjo za večino spletnih mest.

Slika

Vrhunska storitev obdelave slik. Najzmogljivejši nabor funkcij.

Plus: več kot 100 transformacij (zameglitev obrazov, vodni žig, kompleksni filtri, obrezovanje na osnovi umetne inteligence), odlična dokumentacija, robusten API.

Minus: drago (od 75 USD/mesec). Za podjetja.

Oblačno

Najbolj znana mreža za dostavo slik in videoposnetkov s funkcijami umetne inteligence (samodejno označevanje, obrezovanje glede na vsebino, odstranjevanje ozadja).

Plus: vse v enem (slika + video + DAM), funkcije umetne inteligence, preprost vtičnik WP.

Slabost: brezplačna stopnja omejena (25 tisoč transformacij/mesec), hitro postane draga (od 99 USD/mesec za produkcijo).

ShortPixel / Imagify (samo za WP)

Vtičniki za WordPress, ki predhodno optimizirajo slike v knjižnici WP Media Library (ne dinamično spreminjajo velikost).

Plus: poceni (~5-10 EUR/mesec), nič konfiguracije za WP, ne spreminja arhitekture.

Slabost: ni možnosti spreminjanja velikosti sproti – prikazana je originalna velikost, razen če tema zahteva drugo. Manj prilagodljivo kot CDN za slike.

Samostojno gostovanje: Thumbor / imgproxy

Odprtokodni procesorji slik. Samostojno gostovanje na lastnem strežniku, popoln nadzor.

Plus: brez vezave na prodajalca, prilagodljivost po želji, enkratni stroški strežnika.

Slabosti: vzdrževanje (varnostni popravki, skaliranje), brez vnaprej nastavljene CDN mreže (potrebujete CloudFlare), režijski stroški DevOps.

Primerjava na kratko

Praktična izvedba — Bunny Optimizer + WP

1. Registrirajte račun Bunny.net in ustvarite Pull Zone, ki kaže na vašo spletno stran (izvor).
2. V nastavitvah omogočite dodatek Bunny Optimizer (postanite raven Image Optimization).
3. Namestite vtičnik Bunny CDN (uradni) v WordPress – samodejno prepiše vse URL wp-content/uploads/ v CDN.
4. Nastavi privzete transformacije: samodejno WebP/AVIF, samodejno kakovost, največja širina 2400px.
5. Test na PageSpeed Insights – slike se zdaj prikazujejo iz CDN-ja, optimizirane so.

Praktična izvedba — Cloudflare Images + Craft CMS

1. Aktivirajte Cloudflare Images na nadzorni plošči.
2. Naložite slike prek API-ja ali migracijskega skripta.
3. V razdelku Craft Image Asset Volume nastavite oddaljeni nosilec za Cloudflare Images.
4. V predlogah: {{ asset.url||cfImage({ width: 800, quality: 80 }) }} prek filtra Twig po meri.

Odzivne slike — srcset

CDN slik brez srcset je polovičarska implementacija. Brskalniki želijo različne velikosti za različne zaslone:

Brskalnik izbere optimalno varianto glede na zaslon + DPR. Jedro WordPressa samodejno ustvari srcset za naložene slike, vendar optimalno le za originalne dimenzije.

WebP proti AVIF

• WebP – Googlov format od leta 2010, 25–35 % manjši od JPEG. Podprt v vseh brskalnikih od leta 2020.
• AVIF — novejši (2019+), 30–50 % manjši od WebP, vendar počasnejše kodiranje (CDN to rešuje s predpomnilnikom). Podprto v Chromu, Firefoxu in Safariju.

Najboljša praksa: postrežite AVIF, če je podprt, rezervni WebP, rezervni JPEG/PNG. Image CDN to stori samodejno prek glave Accept .

Počasno nalaganje

Izvorno za HTML5: atribut loading="lazy" v oznaki img . Vsi sodobni brskalniki ga podpirajo, brskalnik se sam odloči, kdaj bo naložil.

Za slike nad pregibom uporablja loading="eager" + fetchpriority="high" (optimizacija LCP).

Pasti

• Razveljavitev predpomnilnika – ko spremenite sliko, predpomnilnik CDN zastara. Cloudflare/Bunny imata API za čiščenje.
• Preobremenitev izvora – če predpomnilnik zgreši veliko različnih velikosti, se izvor pregreje. Omejite dovoljene velikosti (največ 5–10 različnih različic).
• Vroče povezave – nekdo lahko vdela vašo sliko na svoje spletno mesto in s tem zmanjša vaš proračun za promet. Nastavite preverjanje napotiteljev ali podpisane URL-je.
• SVG – slikovne CDN-je ne preoblikujejo SVG-ja (vektorja). Ponujajo ga takšnega, kot je.
• PNG s prosojnostjo – JPEG nima alfa kanala. WebP/AVIF ga ima. Bodite previdni pri pretvorbi formata.

Merjenje vpliva

Pred/po:

• Vpogledi v PageSpeed – LCP, skupna teža strani, teža slik, priložnosti za prihranek.
• WebPageTest — podroben slap, vidite vsako zahtevo za sliko.
• Chrome DevTools Lighthouse – elementa »Pravilna velikost slik« in »Prikaz slik v formatih naslednje generacije«.

Realističen cilj: 70–90-odstotno zmanjšanje slikovne obremenitve, 30–50-odstotno izboljšanje LCP.

WMD in slikovna CDN

Vsa gostovanja WMD WordPress podpirajo Bunny CDN, Cloudflare Images in ShortPixel takoj po namestitvi. Nastavitev je vključena v uvajanje – nastavitev Pull Zone, namestitev vtičnikov, privzeta pravila transformacije. Za stranke Craft CMS integriramo Cloudflare Images ali imgproxy, ki je gostovan na istem strežniku, odvisno od vaših potreb. Vključena je revizija delovanja pred/potem – merimo izboljšanje LCP.

Pogosta vprašanja

Bunny CDN proti Cloudflare za slike? Bunny je cenejši in enostavnejši za uporabo izključno s slikami. Cloudflare, če že imate vse ostalo na Cloudflareju (DNS, WAF, R2). Oba sta odlična.

Ali potrebujem CDN za slike, če uporabljam Cloudflare CDN? Da, če želite samodejno pretvorbo formata in spreminjanje velikosti. Navaden CDN samo s predpomnilnikom, ki ga streže Origin.

Je CDN slik pokvaril oznake alt? Ne – oznake alt so v HTML-ju, CDN slik pa pretvori samo sliko, ne pa HTML-ja.

Ali lahko AVIF vpliva na SEO? Pozitivno (hitrejše nalaganje = boljši ključni spletni kazalniki = izboljšanje SEO). Google podpira AVIF pri iskanju slik.

Kaj pa slike, izvožene iz Photoshopa? Optimizirajte jih lokalno (ImageOptim, Squoosh), naložite jih v programsko opremo (PA) in dodajte CDN za dodatno stiskanje in pretvorbo formata slik.

Potrebujete nastavitev CDN-ja za slike za WP ali Craft? WMD nastavi Bunny, Cloudflare Images ali sklad imgproxy po meri. Stopite v stik z nami prek kontaktnega obrazca .