Cloudflare Image Transformations - Ridimensiona E Ottimizza Al Volo

Se Cloudflare Images è il luogo in cui vivono le tue immagini, le Cloudflare Image Transformations sono il motore che le rende veloci. Ridimensionano, comprimono e convertono le tue immagini in formati moderni nel momento in cui vengono richieste, usando solo l’originale che hai già. Nessun passaggio di build, nessuna miniatura pre-generata, nessuna copia separata che ingombra il tuo storage. Chiedi la dimensione e il formato che vuoi nell’URL, e Cloudflare li produce all’edge e li mette in cache.

Questa guida è il complemento pratico alla mia panoramica sull’hosting di immagini su Cloudflare. Spiega i due modi per eseguire le trasformazioni, i parametri che contano, quanto costa nel 2026 e come automatizzare il tutto su WordPress e PrestaShop.

In breve

• Le trasformazioni ridimensionano, comprimono e convertono le immagini in WebP/AVIF su richiesta a partire da un singolo originale
• Due metodi: un semplice formato URL (/cdn-cgi/image/...) e un Cloudflare Worker per il pieno controllo
• format=auto serve automaticamente AVIF o WebP in base a ciò che il browser supporta
• I prezzi sono generosi: le prime 5.000 trasformazioni uniche al mese sono gratuite, poi 0,50 $ per 1.000
• Le trasformazioni non richiedono più un piano Pro, un cambiamento significativo rispetto agli anni precedenti
• Puoi trasformare immagini dalla tua origine o da Cloudflare R2 , e automatizzare tutto con il mio plugin e Worker gratuiti

Come funzionano le Cloudflare Image Transformations

Tradizionalmente, servire immagini responsive significava generare ogni dimensione in anticipo. Carichi una foto e il tuo CMS crea una miniatura, una versione media, una versione grande e così via, ciascuna archiviata come file separato. Questo spreca storage, rallenta i caricamenti e tuttavia non corrisponde mai del tutto alla dimensione esatta di cui un dato dispositivo ha bisogno.

Le Image Transformations capovolgono tutto questo. Archivi un originale. Quando il browser di un visitatore richiede una dimensione specifica, Cloudflare genera quella dimensione al volo, la ottimizza e mette in cache il risultato all’edge. Il visitatore successivo che ha bisogno della stessa versione ottiene istantaneamente la copia in cache. Non generi né archivi mai un derivato, eppure ogni dispositivo riceve un’immagine adattata al suo schermo e al supporto dei formati.

Il risultato per i tuoi visitatori: una foto da 1 MB arriva come AVIF da 100 a 200 KB, dimensionata esattamente per il loro viewport, consegnata da una posizione edge vicina.

Metodo 1: Image Transformations tramite il formato URL

Il modo più semplice per trasformare un’immagine è avvolgere il suo URL in un percorso speciale sulla tua zona:

1https://example.com/cdn-cgi/image/<options>/<source-image-url>

Un esempio reale che ridimensiona a 800 px di larghezza, imposta la qualità a 75 e seleziona automaticamente il formato migliore:

1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg

Per usarlo, abilita Transformations per la tua zona nella dashboard di Cloudflare (sotto Images). Una volta abilitata, qualsiasi immagine di quella zona può essere trasformata semplicemente costruendo l’URL. È il modo più rapido per iniziare e non richiede codice.

Le opzioni più utili sono:

Metodo 2: Image Transformations tramite un Cloudflare Worker

Per un vero controllo, trasformi all’interno di un Cloudflare Worker usando la proprietà cf.image su una richiesta fetch. Questo ti consente di applicare logica: scegliere le dimensioni in base al dispositivo, limitare quali immagini possono essere trasformate, o riscrivere i link delle immagini di un’intera pagina.

 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};

L’approccio con Worker è ciò che alimenta i miei stessi strumenti, perché può riscrivere l’output HTML finale di un sito, comprese le immagini iniettate da temi, plugin e persino CSS inline, che un approccio basato solo su URL non può raggiungere da solo. Se vuoi imparare i Worker in modo più ampio, la documentazione ufficiale dei Worker è un ottimo punto di partenza.

Trasformare immagini da R2 o da una sorgente remota

Non sei limitato alle immagini della stessa zona. Le trasformazioni possono prelevare da un’origine remota, il che le rende un partner perfetto per l’archiviazione di oggetti Cloudflare R2 . Conserva i tuoi originali in un bucket R2, trasformali alla consegna e non paghi nulla per l’egress perché R2 non addebita costi di egress. Tratto questo schema specifico in dettaglio nella mia guida all’hosting di immagini su Cloudflare R2 .

Quando trasformi immagini che non sono sulla tua zona, ricorda di consentire il dominio sorgente nelle impostazioni di trasformazione, altrimenti Cloudflare si rifiuterà di prelevarle.

Prezzi delle Cloudflare Image Transformations

L’economia qui è favorevole, soprattutto per i siti piccoli e medi. In base ai prezzi ufficiali di Images per il 2026:

Una “trasformazione unica” è una combinazione distinta di opzioni applicata a un’immagine originale in un mese. Richiedere mille volte la stessa versione width=800,format=auto di una foto conta comunque come una singola trasformazione unica, perché le altre 999 sono servite dalla cache. Per questo il numero reale di trasformazioni resta basso anche su siti molto trafficati: hai molte meno combinazioni distinte di immagine-e-dimensione che visualizzazioni di pagina.

Il grande cambiamento che vale la pena ripetere: le trasformazioni erano un tempo dietro un piano Pro a pagamento. Ora sono disponibili nel piano gratuito, fino a quel limite mensile di 5.000. Per un piccolo blog o portfolio, l’ottimizzazione delle immagini al volo è ora di fatto gratuita.

Automatizzare su WordPress e PrestaShop

Costruire URL di trasformazione a mano va bene per poche immagini, ma un sito reale ne ha centinaia, generate dinamicamente. Questa è la parte difficile, ed è esattamente ciò che risolvono i miei strumenti gratuiti.

• Plugin WordPress. Il mio plugin Cloudflare Image Resizing (GitHub ) riscrive i link delle tue immagini perché passino automaticamente attraverso le trasformazioni.
• Cloudflare Worker. Il mio Cloudflare Image Resizing Worker riscrive l’HTML finale per una copertura completa, comprese le immagini iniettate da plugin e temi e le immagini referenziate nel CSS.

Per procedure complete da copiare e incollare, leggi Cloudflare Image Resizing per WordPress e Cloudflare Image Resizing per PrestaShop . Tra il plugin e il Worker, ogni immagine del tuo sito finisce ottimizzata senza che tu tocchi un solo template.

Se preferisci archiviare e gestire la tua libreria di immagini direttamente tramite il prodotto Cloudflare Images, Easy Cloudflare Images è la mia app desktop gratuita per caricare e ottimizzare immagini su Windows, macOS e Linux.

Un rapido test prima/dopo

Il modo onesto di giudicare un’ottimizzazione è misurarla.

1. Scegli una pagina ricca di immagini ed eseguila su PageSpeed Insights . Annota il Largest Contentful Paint e il peso totale delle immagini.
2. Abilita le trasformazioni e applica width e format=auto alle immagini di quella pagina (tramite il metodo URL, il Worker o il mio plugin).
3. Riesegui il test. Dovresti vedere il payload delle immagini calare nettamente e l’LCP migliorare, spesso portando un punteggio insufficiente nel verde.

Quel miglioramento misurabile è ciò che tende a fare la differenza sia per l’esperienza utente sia per il posizionamento nelle ricerche.

Punti chiave

• Le Cloudflare Image Transformations generano su richiesta immagini ottimizzate e dimensionate correttamente a partire da un singolo originale
• Il metodo URL (/cdn-cgi/image/...) è il punto di partenza più rapido; un Worker ti dà il pieno controllo programmatico
• format=auto gestisce per te la negoziazione AVIF/WebP, con un fallback sicuro per i browser più vecchi
• Le prime 5.000 trasformazioni uniche al mese sono gratuite, poi 0,50 $ per 1.000, senza costi di egress
• Le trasformazioni ora funzionano nel piano gratuito, senza abbonamento Pro richiesto
• Abbina le trasformazioni a R2 per una libreria multimediale senza egress, e automatizza tutto con il mio plugin e Worker

Domande frequenti

Qual è la differenza tra Cloudflare Images e Image Transformations? Cloudflare Images è il prodotto più ampio che archivia, ottimizza e distribuisce le immagini. Image Transformations è la funzione di ridimensionamento e ottimizzazione al suo interno. Puoi usare le trasformazioni su immagini archiviate in Cloudflare Images, in R2 o sulla tua origine, senza necessariamente archiviarle nel prodotto Images.

Mi serve un piano a pagamento per usare le trasformazioni di immagini? No, non più. Le trasformazioni sono disponibili nel piano gratuito fino a 5.000 trasformazioni uniche al mese. Oltre, paghi 0,50 $ per 1.000, e non ci sono costi di egress.

Cosa fa format=auto? Indica a Cloudflare di ispezionare l’header Accept del browser e servire il formato più efficiente supportato, di solito AVIF o WebP, e di ricadere sul formato originale (come JPEG o PNG) per i browser che non supportano i formati moderni.

Posso trasformare immagini che non sono ospitate su Cloudflare? Sì. Le trasformazioni possono prelevare da un’origine remota, incluso un bucket Cloudflare R2 o un server esterno, purché tu consenta quella sorgente nelle impostazioni di trasformazione.

Cosa conta come trasformazione unica ai fini della fatturazione? Una combinazione distinta di opzioni applicata a un’immagine originale in un mese di fatturazione. Le richieste ripetute per la stessa versione trasformata sono servite dalla cache e contate una sola volta, il che mantiene bassi i costi reali.

Come applico questo a un intero sito WordPress o PrestaShop? Usa il mio plugin WordPress gratuito per una configurazione automatizzata rapida, oppure distribuisci il mio Cloudflare Worker per una copertura completa che riscrive ogni link di immagine, compresi quelli nel CSS. Entrambi sono documentati nelle mie guide per piattaforma passo passo.