Forse già conosci il concetto principale di rete CDN (Content Delivery Network), una rete di server distribuiti ma interconnessi che fornisce risorse agli utenti in modo rapido ed efficiente. Quando un file viene caricato su un provider CDN, ne viene creato un duplicato sugli altri nodi della rete CDN nel mondo. Quando un utente richiede un file, i dati verranno inviati dal nodo geograficamente più vicino all'utente, riducendo la latenza. La natura distribuita delle reti CDN assicura anche ridondanza in caso di interruzioni di rete o guasti hardware, nonché il bilanciamento del carico per mitigare i picchi di traffico.
Una CDN di immagine può offrire tutti questi vantaggi, con una differenza fondamentale: la capacità di trasformare e ottimizzare i contenuti di un'immagine in base alle stringhe utilizzate dall'URL per accedervi.
Un utente caricherà un'immagine canonica ad alta risoluzione sul provider, che genererà un URL da utilizzare per accedervi:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Anche se la sintassi esatta utilizzata varia da un provider all'altro, tutte le CDN immagine consentono almeno di modificare le dimensioni, le impostazioni di codifica e compressione di un'immagine di origine. Cloudinary, ad esempio, esegue il ridimensionamento dinamico di un'immagine caricata utilizzando le seguenti sintassi: h_ seguito dall'altezza numerica in pixel, w_ seguita dalla larghezza e un valore c_ che consente di specificare informazioni dettagliate su come ridimensionare o ritagliare l'immagine.
È possibile applicare un numero qualsiasi di trasformazioni aggiungendo valori separati da virgole all'URL, prima del nome del file e dell'estensione,
il che significa che l'immagine caricata può essere manipolata in base alle esigenze tramite l'elemento src dell'elemento img che la richiede.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
La prima volta che un utente visita l'URL contenente queste trasformazioni, viene generata e inviata una nuova versione dell'immagine in scala proporzionale a una
larghezza di 400 px (w_400). Il file appena creato viene quindi memorizzato nella cache attraverso la rete CDN, in modo da poter essere inviato a qualsiasi utente che richiede lo stesso URL, anziché ricreato on demand.
Sebbene non sia raro che i provider CDN immagine offrano software development kit per semplificare l'utilizzo avanzato e l'integrazione con vari stack tecnologici, questo pattern URL prevedibile ci consente di trasformare facilmente un singolo file caricato in un attributo srcset utilizzabile senza bisogno di altri strumenti di sviluppo:
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
Siamo in grado di specificare manualmente il livello di compressione desiderato utilizzando quella che ora dovrebbe avere una sintassi familiare: q_, abbreviazione di "qualità ", seguita dall'abbreviazione numerica per il livello di compressione:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Raramente dovrai includere queste informazioni manualmente, tuttavia grazie a un insieme di funzionalità incredibilmente potenti fornite dalla maggior parte delle CDN di immagini: compressione, codifica e negoziazione dei contenuti completamente automatica.
Compressione automatica
La potenza di calcolo di cui le reti CDN hanno a disposizione le immagini consentono di offrire una funzionalità incredibilmente potente: l'analisi del contenuto di un'immagine per determinare in modo algoritmico il livello di compressione e le impostazioni di codifica ideali, proprio come io o te perfezionate manualmente la compressione per ciascuna delle nostre immagini.
Questi algoritmi automatizzano le decisioni che potresti prendere bilanciando le dimensioni del file e la qualità percettiva, analizzando i contenuti delle immagini per individuare segni misurabili di degrado e perfezionando le impostazioni di compressione di conseguenza. Questo spesso comporta riduzioni enormi delle dimensioni dei file rispetto all'approccio manuale universale per tutte le impostazioni di compressione.
Per quanto complesso possa sembrare questo processo, l'implementazione non potrebbe essere molto più semplice: per Cloudinary, l'aggiunta di q_auto in un URL immagine attiva questa funzionalità:
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
Codifica automatica e negoziazione dei contenuti
Quando ricevono una richiesta per un'immagine, le CDN di immagine determinano la codifica più moderna supportata dal browser tramite le intestazioni HTTP inviate dal browser insieme alle richieste di asset, in particolare l'intestazione Accept. Questa intestazione indica le codifiche che il browser è in grado di comprendere, utilizzando gli stessi tipi di contenuti multimediali che useremmo per compilare l'attributo type dell'attributo <source> di un elemento <picture>.
Ad esempio, l'aggiunta del parametro f_auto all'elenco delle trasformazioni di immagini nell'URL di un asset indica esplicitamente a Cloudinary di fornire la codifica più efficiente che il browser è in grado di comprendere:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Il server genera quindi una versione dell'immagine con quella codifica e memorizza nella cache il risultato per tutti gli utenti successivi con lo stesso livello di supporto del browser. La risposta include un'intestazione Content-Type per informare esplicitamente il browser della codifica del file, indipendentemente dall'estensione del file. Anche se un utente con un browser moderno richiederà un file che termina con .jpg, la richiesta sarà accompagnata da un'intestazione che informa il server che il file AVIF è supportato e il server invia un file AVIF codificato insieme a un'istruzione esplicita per trattarlo come AVIF.
Il risultato finale è un processo che non solo ti assorbe dalla creazione di file codificati alternativamente e dal perfezionamento manuale delle impostazioni di compressione (o dalla gestione di un sistema che esegua queste attività per te), ma elimina la necessità di utilizzare <picture> e l'attributo type per inviare in modo efficace questi file agli utenti. Pertanto, l'utilizzo delle sole sintassi srcset e sizes può ancora fornire agli utenti immagini codificate come, ad esempio, AVIF, che ricorre a WebP (o JPEG-2000, solo per Safari), utilizzando di nuovo la codifica legacy più sensata.
Gli svantaggi dell'utilizzo di una CDN delle immagini sono più logistici che tecnici, principalmente in termini di costi. Sebbene sia comune per le CDN di immagini offrire piani senza costi affidabili e affidabili per l'utilizzo personale, la generazione di asset immagine richiede larghezza di banda e spazio di archiviazione per i caricamenti, l'elaborazione sul server per la trasformazione delle immagini e l'ulteriore spazio per i risultati di trasformazione memorizzati nella cache. Per questo motivo, per l'utilizzo avanzato e le applicazioni con elevato traffico potrebbero essere necessari un piano a pagamento.