Dacă Cloudflare Images este locul unde stau imaginile tale, Cloudflare Image Transformations este motorul care le face rapide. Redimensionează, comprimă și convertește imaginile tale în formate moderne în momentul în care sunt solicitate, folosind doar originalul pe care îl ai deja. Niciun pas de build, nicio miniatură pregenerată, nicio copie separată care să-ți aglomereze stocarea. Ceri dimensiunea și formatul dorit în URL, iar Cloudflare le produce la edge și le pune în cache.
Acest ghid este companionul practic al prezentării mele despre găzduirea imaginilor pe Cloudflare. Explică cele două moduri de a rula transformările, parametrii care contează, cât costă în 2026 și cum automatizezi totul pe WordPress și PrestaShop.
Pe scurt
- Transformările redimensionează, comprimă și convertesc imaginile în WebP/AVIF la cerere, dintr-un singur original
- Două metode: un format URL simplu (
/cdn-cgi/image/...) și un Cloudflare Worker pentru control complet format=autolivrează automat AVIF sau WebP în funcție de ce acceptă browserul- Prețurile sunt generoase: primele 5.000 de transformări unice pe lună sunt gratuite, apoi 0,50 $ pentru 1.000
- Transformările nu mai necesită un plan Pro, o schimbare semnificativă față de anii anteriori
- Poți transforma imagini din originea ta sau din Cloudflare R2 și poți automatiza totul cu pluginul și Worker-ul meu gratuite
Cum funcționează Cloudflare Image Transformations
În mod tradițional, livrarea de imagini responsive însemna generarea în avans a fiecărei dimensiuni. Încarci o fotografie, iar CMS-ul tău creează o miniatură, o versiune medie, una mare și așa mai departe, fiecare stocată ca un fișier separat. Asta risipește spațiu de stocare, încetinește încărcările și tot nu se potrivește niciodată exact cu dimensiunea de care are nevoie un anumit dispozitiv.
Transformările de imagini răstoarnă această abordare. Stochezi un singur original. Când browserul unui vizitator solicită o anumită dimensiune, Cloudflare generează acea dimensiune din mers, o optimizează și pune rezultatul în cache la edge. Următorul vizitator care are nevoie de aceeași versiune primește instantaneu copia din cache. Tu nu generezi sau stochezi niciodată o derivată, și totuși fiecare dispozitiv primește o imagine adaptată ecranului și suportului său de formate.
Rezultatul pentru vizitatorii tăi: o fotografie de 1 MB ajunge ca un AVIF de 100 până la 200 KB, dimensionat exact pentru fereastra lor de vizualizare, livrat dintr-o locație edge apropiată.
Metoda 1: transformări de imagini prin formatul URL
Cel mai simplu mod de a transforma o imagine este să-i încadrezi URL-ul într-o cale specială pe propria zonă:
1https://example.com/cdn-cgi/image/<options>/<source-image-url>
Un exemplu real care redimensionează la 800px lățime, setează calitatea la 75 și selectează automat cel mai bun format:
1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg
Pentru a folosi asta, activează Transformations pentru zona ta în tabloul de bord Cloudflare (sub Images). Odată activată, orice imagine din acea zonă poate fi transformată pur și simplu construind URL-ul. Este cel mai rapid mod de a începe și nu necesită cod.
Cele mai utile opțiuni sunt:
| Opțiune | Ce face |
|---|---|
width, height | Dimensiunile țintă în pixeli |
fit | Cum se încadrează în casetă: scale-down, contain, cover, crop, pad |
quality | Nivelul de compresie, de la 1 la 100 (75 este o valoare implicită rezonabilă) |
format=auto | Livrează AVIF/WebP când e suportat, altfel formatul original |
gravity | Punctul focal la decupare (de ex. auto, face sau coordonate) |
dpr | Raportul de pixeli al dispozitivului pentru ecrane retina |
sharpen, blur | Efecte opționale de postprocesare |
Metoda 2: transformări de imagini printr-un Cloudflare Worker
Pentru control real, transformi în interiorul unui Cloudflare Worker
folosind proprietatea cf.image într-o cerere fetch. Asta îți permite să aplici logică: alegi dimensiunile în funcție de dispozitiv, restricționezi care imagini pot fi transformate sau rescrii linkurile de imagini ale unei pagini întregi.
1export default {
2 async fetch(request) {
3 const options = {
4 cf: {
5 image: {
6 width: 800,
7 quality: 75,
8 format: "auto",
9 fit: "scale-down",
10 },
11 },
12 };
13
14 // The image you want to transform
15 const imageURL = "https://example.com/uploads/photo.jpg";
16 return fetch(imageURL, options);
17 },
18};
Abordarea Worker este cea care alimentează propriile mele instrumente, fiindcă poate rescrie ieșirea HTML finală a unui site, inclusiv imaginile injectate de teme, pluginuri și chiar CSS inline, lucru pe care o abordare doar prin URL nu îl poate atinge singură. Dacă vrei să înveți Workers mai pe larg, documentația oficială Workers este un excelent punct de plecare.
Transformarea imaginilor din R2 sau dintr-o sursă la distanță
Nu ești limitat la imaginile de pe aceeași zonă. Transformările pot prelua dintr-o origine la distanță, ceea ce le face un partener perfect pentru stocarea de obiecte Cloudflare R2 . Păstrează-ți originalele într-un bucket R2, transformă-le la livrare și nu plăti nimic pentru egress, deoarece R2 nu percepe taxe de egress. Tratez acest tipar specific în detaliu în ghidul meu despre găzduirea imaginilor pe Cloudflare R2 .
Când transformi imagini care nu sunt pe propria zonă, nu uita să permiți domeniul-sursă în setările tale de transformare, altfel Cloudflare va refuza să le preia.
Prețurile Cloudflare Image Transformations
Economia de aici este prietenoasă, mai ales pentru site-urile mici și mijlocii. Pe baza prețurilor oficiale Images pentru 2026:
| Treaptă | Cost |
|---|---|
| Primele 5.000 de transformări unice / lună | Gratuit |
| Peste 5.000 | 0,50 $ pentru 1.000 de transformări unice |
| Lățime de bandă egress | 0 $ (gratuit) |
O „transformare unică" este o combinație distinctă de opțiuni aplicată unei singure imagini originale într-o lună. Solicitarea aceleiași versiuni width=800,format=auto a unei fotografii de o mie de ori se contorizează tot ca o singură transformare unică, deoarece celelalte 999 sunt servite din cache. De aceea numărul real de transformări rămâne mic chiar și pe site-uri aglomerate: ai mult mai puține combinații distincte de imagine-și-dimensiune decât vizualizări de pagină.
Schimbarea majoră care merită repetată: transformările stăteau în trecut în spatele unui plan Pro plătit. Acum sunt disponibile în planul gratuit, până la acea limită lunară de 5.000. Pentru un blog mic sau un portofoliu, optimizarea imaginilor din mers este acum efectiv gratuită.
Automatizarea pe WordPress și PrestaShop
Construirea manuală a URL-urilor de transformare e în regulă pentru câteva imagini, dar un site real are sute, iar acestea sunt generate dinamic. Aceasta este partea grea și este exact ceea ce rezolvă instrumentele mele gratuite.
- Plugin WordPress. Pluginul meu Cloudflare Image Resizing (GitHub ) rescrie linkurile imaginilor tale ca să treacă automat prin transformări.
- Cloudflare Worker. Cloudflare Image Resizing Worker-ul meu rescrie HTML-ul final pentru o acoperire completă, inclusiv imaginile injectate de pluginuri și teme și imaginile referite în CSS.
Pentru parcurgeri complete, gata de copiat și lipit, citește Cloudflare Image Resizing pentru WordPress și Cloudflare Image Resizing pentru PrestaShop . Între plugin și Worker, fiecare imagine de pe site-ul tău ajunge optimizată fără să atingi vreun șablon.
Dacă preferi să stochezi și să gestionezi biblioteca ta de imagini direct prin produsul Cloudflare Images, Easy Cloudflare Images este aplicația mea desktop gratuită pentru încărcarea și optimizarea imaginilor pe Windows, macOS și Linux.
Un test rapid înainte-și-după
Modul onest de a judeca orice optimizare este să o măsori.
- Alege o pagină bogată în imagini și rulează-o prin PageSpeed Insights . Notează Largest Contentful Paint și greutatea totală a imaginilor.
- Activează transformările și aplică
widthșiformat=autoimaginilor acelei pagini (prin metoda URL, Worker sau pluginul meu). - Rulează din nou testul. Ar trebui să vezi cum încărcătura de imagini scade brusc și LCP se îmbunătățește, mutând adesea un scor nereușit în verde.
Acea îmbunătățire măsurabilă este cea care tinde să facă diferența atât în experiența utilizatorului, cât și în clasamentele de căutare.
Concluzii cheie
- Cloudflare Image Transformations generează imagini optimizate, dimensionate corect, la cerere, dintr-un singur original
- Metoda URL (
/cdn-cgi/image/...) este cel mai rapid start; un Worker îți oferă control programatic complet format=autose ocupă în locul tău de negocierea AVIF/WebP, cu o rezervă sigură pentru browserele mai vechi- Primele 5.000 de transformări unice pe lună sunt gratuite, apoi 0,50 $ pentru 1.000, fără taxe de egress
- Transformările funcționează acum pe planul gratuit, fără abonament Pro
- Combină transformările cu R2 pentru o bibliotecă media fără egress și automatizează totul cu pluginul și Worker-ul meu
Întrebări frecvente
Care este diferența dintre Cloudflare Images și Image Transformations? Cloudflare Images este produsul mai larg care stochează, optimizează și livrează imagini. Image Transformations este capacitatea de redimensionare și optimizare din interiorul lui. Poți folosi transformările pe imagini stocate în Cloudflare Images, în R2 sau pe propria origine, fără a le stoca neapărat în produsul Images.
Am nevoie de un plan plătit pentru a folosi transformările de imagini? Nu, nu mai e cazul. Transformările sunt disponibile în planul gratuit până la 5.000 de transformări unice pe lună. Dincolo de asta, plătești 0,50 $ pentru 1.000 și nu există taxe de egress.
Ce face format=auto? Îi spune Cloudflare să inspecteze antetul Accept al browserului și să livreze cel mai eficient format pe care îl suportă, de obicei AVIF sau WebP, și să revină la formatul original (precum JPEG sau PNG) pentru browserele care nu suportă formatele moderne.
Pot transforma imagini care nu sunt găzduite pe Cloudflare? Da. Transformările pot prelua dintr-o origine la distanță, inclusiv un bucket Cloudflare R2 sau un server extern, atâta timp cât permiți acea sursă în setările tale de transformare.
Ce se contorizează ca transformare unică pentru facturare? O combinație distinctă de opțiuni aplicată unei singure imagini originale într-o lună de facturare. Solicitările repetate pentru aceeași versiune transformată sunt servite din cache și contorizate o singură dată, ceea ce menține costurile reale scăzute.
Cum aplic asta pe un întreg site WordPress sau PrestaShop? Folosește pluginul meu WordPress gratuit pentru o configurare rapidă și automată, sau implementează Cloudflare Worker-ul meu pentru o acoperire completă care rescrie fiecare link de imagine, inclusiv pe cele din CSS. Ambele sunt documentate în ghidurile mele pas cu pas pentru fiecare platformă.
Comentarii