Le immagini sono quasi sempre la parte più pesante di una pagina, e ottimizzarle bene richiede molte cose insieme: formati moderni come AVIF e WebP, dimensioni adatte a ogni spazio e a ogni schermo, qualità di compressione ragionevole, una distribuzione rapida verso utenti sparsi in luoghi diversi. Fatto a mano, o con gli strumenti di base di un CMS, è un lavoro che raramente riesce su tutte le immagini di un sito. Le CDN per immagini promettono di farlo in automatico: si carica un’immagine una sola volta, e il servizio produce al volo tutte le varianti necessarie.
In questo articolo vediamo come funzionano, cosa offrono rispetto ai plugin che ottimizzano le immagini direttamente sul server, quali sono i costi e i rischi, e come capire se per un sito conviene davvero adottarne una.
Come funziona una CDN per immagini
Una CDN per immagini è un servizio che si interpone tra il sito e il browser. Il sito conserva solo l’immagine originale, alla massima qualità disponibile. Le pagine, invece di puntare direttamente al file, puntano a un indirizzo del servizio che contiene le istruzioni per la trasformazione: la larghezza desiderata, il tipo di ritaglio, la qualità, il formato. Quando arriva la prima richiesta per una certa combinazione di parametri, il servizio scarica l’originale, lo trasforma, lo invia al browser e lo conserva nella propria cache; le richieste successive per la stessa variante vengono servite direttamente dalla cache del nodo più vicino all’utente.
Il formato viene di solito scelto automaticamente in base all’intestazione Accept inviata dal browser: chi supporta AVIF lo riceve, gli altri ricevono WebP o JPEG. È lo stesso meccanismo di negoziazione descritto nell’articolo sui formati WebP e AVIF, con la gestione corretta della cache e dell’intestazione Vary a carico del servizio. Molti servizi possono anche regolare automaticamente la qualità in base al contenuto dell’immagine, comprimendo di più dove la perdita non si nota.
<!-- La stessa immagine in quattro larghezze, formato scelto dal servizio -->
<img src="https://img.esempio.it/prodotti/divano.jpg?w=800&f=auto&q=auto"
srcset="https://img.esempio.it/prodotti/divano.jpg?w=400&f=auto&q=auto 400w,
https://img.esempio.it/prodotti/divano.jpg?w=800&f=auto&q=auto 800w,
https://img.esempio.it/prodotti/divano.jpg?w=1200&f=auto&q=auto 1200w,
https://img.esempio.it/prodotti/divano.jpg?w=1600&f=auto&q=auto 1600w"
sizes="(min-width: 1024px) 50vw, 100vw"
width="1600" height="1067" alt="Divano a tre posti in velluto verde">La sintassi dei parametri varia da un servizio all’altro: alcuni li mettono nella parte finale dell’indirizzo, altri nel percorso. Il principio è lo stesso, e si combina naturalmente con le immagini responsive: ogni voce di srcset diventa un indirizzo con una larghezza diversa, senza dover generare in anticipo alcun file.
Cosa si guadagna
- Dimensioni esatte. Ogni spazio della pagina può ricevere un’immagine della larghezza giusta, non la più vicina tra le poche dimensioni generate dal CMS. Per un nuovo layout basta cambiare i parametri, senza rigenerare migliaia di file.
- Formati moderni senza lavoro. AVIF e WebP vengono prodotti e serviti automaticamente, e quando arriverà un formato migliore basterà che il servizio lo supporti.
- Meno carico sul server. Il server d’origine non deve generare varianti al caricamento delle immagini né servirle a ogni visita: lo fa il servizio, dalla propria rete.
- Distribuzione vicina agli utenti. Le immagini vengono servite da nodi distribuiti geograficamente, con tempi di connessione e download ridotti per i visitatori lontani dal server.
- Funzioni aggiuntive. Ritaglio intelligente sul soggetto, rimozione dei metadati, conversione dei GIF animati in video, filigrane: funzioni che richiederebbero software specifico sul server.
Cosa costa, e cosa rischia
Il primo costo è economico. Le tariffe si basano di solito sul numero di trasformazioni, sul traffico servito o su entrambi, e crescono con il sito. Per un sito con poche centinaia di immagini e traffico moderato la spesa può essere minima; per un catalogo con centinaia di migliaia di prodotti e molte visite va stimata con attenzione, anche perché ogni combinazione di larghezza, formato e qualità conta come una variante distinta.
Il secondo riguarda le prestazioni della prima richiesta. Quando una variante non è ancora in cache, il servizio deve scaricare l’originale e trasformarlo, e questa richiesta può impiegare centinaia di millisecondi. Per le immagini molto visitate il problema si risolve da solo, ma per l’immagine principale di una pagina nuova, che è spesso l’elemento LCP, il primo visitatore può pagarne il costo. Alcuni servizi permettono di pregenerare le varianti principali; in alternativa si può visitare le pagine nuove subito dopo la pubblicazione.
Il terzo è il dominio. Se le immagini vengono servite da un dominio diverso da quello del sito, il browser deve aprire una connessione aggiuntiva, con risoluzione DNS, TCP e TLS: un costo che si paga proprio sull’immagine più importante. Un preconnect al dominio del servizio, come spiegato nell’articolo su preload, preconnect e fetchpriority, lo riduce; molti servizi permettono inoltre di usare un sottodominio del sito o di passare attraverso la stessa CDN che serve le pagine, eliminando la connessione aggiuntiva.
Il quarto è la dipendenza dal fornitore. Gli indirizzi delle immagini con i parametri del servizio finiscono nei contenuti, nei modelli e a volte nelle newsletter: cambiare servizio significa riscriverli. Conviene quindi generare gli indirizzi da un unico punto, per esempio una funzione del tema o un plugin, invece di inserirli a mano, e conservare sempre gli originali sul proprio sito.
Le alternative
Non sempre serve un servizio esterno. Esistono tre approcci principali, ciascuno adatto a situazioni diverse.
Il primo sono i plugin che ottimizzano le immagini sul server: comprimono gli originali, generano le varianti WebP o AVIF insieme alle dimensioni previste dal tema, e le servono con le regole di negoziazione del server. Sono prevedibili nei costi, non dipendono da servizi esterni e bastano per la maggior parte dei siti di piccole e medie dimensioni. I limiti sono lo spazio su disco, il lavoro del server al caricamento delle immagini e le dimensioni fisse.
Il secondo sono le funzioni di trasformazione delle immagini offerte da molte CDN generaliste, attivabili sul dominio del sito e spesso integrate con la cache delle pagine, come abbiamo visto parlando di Cloudflare. Il terzo sono i servizi specializzati completi, che aggiungono gestione dei file, ritaglio intelligente, trasformazioni avanzate e integrazioni con i CMS, a un costo più alto.
WordPress e le CDN per immagini
In WordPress l’integrazione avviene quasi sempre tramite un plugin del servizio, che riscrive gli indirizzi delle immagini nei contenuti e nei modelli e genera i valori di srcset con i parametri del servizio. Per chi preferisce un controllo diretto, i filtri del core permettono di intervenire sugli indirizzi delle varianti:
// Riscrive le varianti di srcset verso il servizio di trasformazione
add_filter(
'wp_calculate_image_srcset',
function ( $sources ) {
foreach ( $sources as $larghezza => $source ) {
$percorso = wp_parse_url( $source['url'], PHP_URL_PATH );
$sources[ $larghezza ]['url'] = 'https://img.esempio.it' . $percorso
. '?w=' . (int) $larghezza . '&f=auto&q=auto';
}
return $sources;
}
);Con una CDN per immagini conviene anche ridurre le dimensioni generate da WordPress al caricamento, che diventano superflue, e verificare che le funzioni automatiche del core, come l’aggiunta di fetchpriority="high" all’immagine principale e l’esclusione delle prime immagini dal lazy loading, continuino a funzionare dopo la riscrittura degli indirizzi.
Qualità e compressione
Uno degli aspetti più utili, e meno considerati, è la gestione della qualità. Scegliere un unico livello di compressione per tutte le immagini di un sito è sempre un compromesso: una fotografia con molti dettagli sopporta meno compressione di un’immagine con ampie aree di colore uniforme. Le impostazioni automatiche di molti servizi analizzano ogni immagine e scelgono il livello di compressione più aggressivo che non produce differenze percepibili, con risparmi che si aggiungono a quelli del formato. Conviene comunque verificare il risultato su alcune immagini rappresentative, soprattutto le fotografie di prodotto, dove una perdita di dettaglio può incidere sulla percezione della qualità, e fissare un minimo per le immagini più importanti.
Un esempio
Un sito di annunci immobiliari riceve ogni giorno centinaia di fotografie caricate dalle agenzie, spesso direttamente dalle fotocamere, con dimensioni di diversi megabyte. Il server genera per ogni foto sei dimensioni diverse in JPEG, occupando decine di gigabyte e rallentando il caricamento degli annunci; le pagine di ricerca, con venti annunci e le relative foto, pesano oltre quattro megabyte da mobile. Con una CDN per immagini il server conserva solo gli originali, le pagine chiedono per ogni spazio la larghezza esatta con formato e qualità automatici, e le fotografie vengono servite dai nodi più vicini. Le pagine di ricerca scendono sotto il megabyte, la generazione delle varianti sul server scompare e l’LCP delle schede degli annunci migliora sensibilmente. Il costo del servizio è compensato in parte dalla riduzione dello spazio e del traffico del server; il resto viene valutato rispetto all’aumento dei contatti generati dalle schede.
Quando conviene
Una CDN per immagini è la scelta naturale per i siti con molte immagini e molti formati di visualizzazione: negozi online con cataloghi ampi, siti editoriali con archivi fotografici, portali immobiliari, siti con contenuti caricati dagli utenti. È utile anche quando il server d’origine è limitato e non può permettersi di generare e servire molte varianti, o quando il pubblico è distribuito in più continenti.
Per un sito aziendale con qualche decina di immagini, un blog o un negozio con un catalogo contenuto, un buon plugin di ottimizzazione sul server, con formati moderni e dimensioni responsive corrette, ottiene in genere risultati molto simili senza costi ricorrenti né dipendenze esterne. Il criterio decisivo non è la tecnologia, ma il rapporto tra il lavoro che il servizio fa risparmiare e ciò che costa.
Come verificare il risultato
Dopo l’attivazione, alcuni controlli confermano che il servizio lavora come previsto. Nel pannello Network dei DevTools, le immagini devono arrivare nel formato moderno per i browser che lo supportano, con dimensioni vicine a quelle di visualizzazione e intestazioni di cache lunghe. L’immagine LCP va controllata con particolare attenzione: deve essere scoperta subito, avere priorità alta e non subire ritardi dovuti a una connessione aggiuntiva. Conviene anche guardare i report del servizio sulla percentuale di richieste servite dalla cache: una percentuale bassa indica troppe combinazioni di parametri diverse, e quindi trasformazioni frequenti, più lente e più costose.
In sintesi
Una CDN per immagini conserva un solo originale e produce al volo le varianti necessarie, nel formato migliore per ogni browser e nella dimensione giusta per ogni spazio, servendole da una rete distribuita. I vantaggi sono concreti: dimensioni esatte, formati moderni automatici, meno carico sul server, distribuzione rapida. I costi sono altrettanto concreti: tariffe che crescono con il sito, lentezza della prima trasformazione, connessioni aggiuntive se il dominio è diverso, dipendenza dagli indirizzi del fornitore.
Per i siti con molte immagini e molto traffico è spesso la soluzione più efficace; per quelli più piccoli, un plugin ben configurato sul server offre gran parte dei benefici senza costi ricorrenti. In entrambi i casi il risultato va verificato sulle pagine reali, con un’attenzione particolare all’immagine che decide l’LCP.
