Forse hai già familiarità con il concetto alla base di una rete CDN (Content Delivery Network), una rete distribuita ma interconnessa che distribuiscono risorse agli utenti in modo rapido ed efficiente. Quando un file viene caricato su un provider CDN, viene creato un duplicato sugli altri nodi della rete CDN in tutto il mondo. Quando un utente richiede un file, i dati vengono inviati geograficamente dal nodo più vicino a quell'utente, riducendo la latenza. La natura distribuita delle reti CDN fornisce anche ridondanza in caso di interruzioni di rete o a guasti hardware e bilanciamento del carico per mitigare i picchi di traffico.
Una CDN di immagini può offrire tutti questi vantaggi, con una differenza fondamentale: la capacità di trasformare ottimizzare i contenuti di un'immagine in base alle stringhe dell'URL utilizzato per accedervi.
Un utente caricherà un'immagine canonica ad alta risoluzione nel provider, che genererà un URL utilizzato per accedervi:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Sebbene la sintassi esatta utilizzata possa variare da un provider all'altro, almeno tutte le CDN di immagini ti consentono di modificare un'origine
le dimensioni, la codifica e la compressione
dell'immagine. Cloudinary, ad esempio,
il ridimensionamento dinamico di un
immagine caricata tramite 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 qualsiasi numero di trasformazioni aggiungendo valori separati da virgole all'URL, prima del nome e dell'estensione.
il che significa che l'immagine caricata può essere manipolata in base alle esigenze tramite l'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, una nuova versione dell'immagine viene scalata proporzionalmente a una
di larghezza di 400 px (w_400) generata e inviata. Il file appena creato viene quindi memorizzato nella cache sulla rete CDN in modo che possa essere inviato
a qualsiasi utente che richiede lo stesso URL, anziché ricrearlo su richiesta.
Non è raro che i fornitori di CDN di immagini offrano kit di sviluppo software
per facilitare l'utilizzo e l'integrazione avanzati con vari stack tecnologici, questo pattern URL prevedibile da solo ci consente di semplificare
trasformare un singolo file caricato in un attributo srcset utilizzabile senza la necessità 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="…">
Possiamo specificare manualmente il livello di compressione desiderato utilizzando quella che ora dovrebbe essere una sintassi familiare: q_, breve
per "qualità", seguito dall'abbreviazione numerica del livello di compressione:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
È raro che tu debba includere queste informazioni manualmente, tuttavia, grazie a un insieme di funzioni incredibilmente potenti Fornite dalla maggior parte delle reti CDN di immagini: compressione, codifica e negoziazione dei contenuti completamente automatiche.
Compressione automatica
Le reti CDN di immagini con potenza di calcolo hanno a disposizione una funzionalità incredibilmente potente: l'analisi il contenuto di un'immagine per determinare in modo algoritmico il suo livello di compressione e le impostazioni di codifica ideali, proprio come vorremmo ottimizzare manualmente la compressione per ognuna delle nostre immagini.
Questi algoritmi automatizzano le decisioni che potresti prendere per bilanciare dimensioni del file e qualità percettiva, analizzando il contenuto delle immagini per segni misurabili di degrado e perfezionando di conseguenza le impostazioni di compressione. Questo spesso comporta enormi riduzioni rispetto all'approccio manuale "universale" per quanto riguarda le impostazioni di compressione.
Per quanto possa sembrare complesso questo processo, l'implementazione non potrebbe essere molto più semplice: per Cloudinary, l'aggiunta di q_auto in un
L'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 reti CDN delle immagini determinano la codifica più moderna supportata dal browser tramite
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 lo stesso
tipi di media che useremmo per compilare type
attributo di <source> di un elemento <picture>.
Ad esempio, l'aggiunta del parametro f_auto all'elenco delle trasformazioni dell'immagine 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 i risultati per tutti gli utenti successivi con la stessa codifica.
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 eseguirà una
per un file che termina con .jpg, la richiesta sarà accompagnata da un'intestazione che informa il server che AVIF è supportato,
invierà un file con codifica AVIF insieme a un'istruzione esplicita per trattarlo come AVIF.
Il risultato è un processo che non solo ti libera dalla creazione di file con codifica alternativa e dalla messa a punto manuale delle impostazioni di compressione
(o la gestione di un sistema che svolge queste attività per tuo conto), ma elimina la necessità di utilizzare <picture> e l'attributo type per
per la consegna di questi file agli utenti. Pertanto, se utilizzi solo le sintassi srcset e sizes puoi comunque fornire agli utenti immagini codificate come, ad esempio, AVIF,
tornando a WebP (o JPEG-2000, solo per Safari), tornando alla codifica precedente più sensata.
Gli svantaggi dell'utilizzo di una CDN per le immagini sono più logistici che tecnici, tra cui i principali sono i costi. Sebbene sia comune per le CDN di immagini offrono piani senza costi affidabili per l'uso personale, la generazione di asset immagine richiede larghezza di banda e spazio di archiviazione per i caricamenti, l'elaborazione server per trasformare le immagini e spazio aggiuntivo per i risultati delle trasformazioni memorizzati nella cache; di conseguenza, l'utilizzo avanzato e le applicazioni ad alto traffico potrebbero richiedere un piano a pagamento.