Le reti CDN (Content Delivery Network) per le immagini sono eccellenti per ottimizzare le immagini per il web. Il passaggio del tuo sito web a una CDN per immagini può comportare un risparmio del 40-80% sulle dimensioni dei file immagine e, nella maggior parte dei casi, può ottimizzare le immagini meglio di uno script di ottimizzazione delle immagini in fase di build.
Che cos'è una CDN per immagini?
Le CDN per immagini sono specializzate nella trasformazione, nell'ottimizzazione e nella pubblicazione di immagini. Puoi anche considerarle come API per accedere e manipolare le immagini utilizzate sul tuo sito. Per le immagini caricate da una CDN di immagini, un URL immagine indica non solo quale immagine caricare, ma anche parametri come dimensioni, formato e qualità. In questo modo puoi creare varianti di un'immagine per diversi casi d'uso.
Le CDN per immagini sono diverse dagli script di ottimizzazione delle immagini in fase di build, in quanto creano nuove versioni delle immagini quando necessario. Di conseguenza, le CDN sono generalmente più adatte alla creazione di immagini altamente personalizzate per i singoli client rispetto agli script di build.
In che modo le CDN di immagini utilizzano gli URL per indicare le opzioni di ottimizzazione
Gli URL delle immagini utilizzati dalle CDN per immagini trasmettono informazioni importanti su un'immagine e sulle trasformazioni e ottimizzazioni che devono essere applicate. I formati degli URL variano a seconda della CDN di immagini che utilizzi, ma a livello generale hanno tutti caratteristiche simili. Di seguito sono riportate alcune delle funzionalità più comuni.
Origine
Una CDN per immagini può risiedere sul tuo dominio o sul dominio della CDN per immagini. Le CDN di immagini di terze parti in genere offrono la possibilità di utilizzare un dominio personalizzato a pagamento. L'utilizzo del tuo dominio semplifica il passaggio alle CDN per immagini in un secondo momento, perché non saranno necessarie modifiche agli URL.
L'esempio precedente utilizza il dominio della CDN per immagini ("example-cdn.com") con un sottodominio personalizzato, anziché un dominio personalizzato.
Immagine
In genere, le CDN per immagini possono essere configurate in modo da recuperare automaticamente le immagini dalle loro posizioni esistenti quando necessario. Questa funzionalità viene spesso ottenuta includendo l'URL completo dell'immagine esistente nell'URL dell'immagine generata dalla CDN per immagini. Ad esempio, potresti vedere un URL simile al seguente: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Questo URL recupera e ottimizza l'immagine presente in https://flowers.com/daisy.jpg.
Il formato file richiesto (JPG, nell'esempio) potrebbe non essere lo stesso del formato file immagine restituito (WebP, nell'esempio). L'intestazione HTTP content-type indica al browser il formato dell'URL in modo che possa elaborarlo correttamente. Ciò può causare confusione se il file viene salvato sul disco e utilizzato da un altro programma che si aspetta che il formato corrisponda all'estensione del file.
Un altro modo ampiamente supportato per caricare immagini su una CDN di immagini è inviarle in una richiesta POST HTTP all'API della CDN di immagini.
L'uso di un token di sicurezza
Un token di sicurezza impedisce ad altre persone di creare nuove versioni delle tue immagini. Con questa funzionalità attivata, ogni nuova versione di un'immagine richiede un token di sicurezza univoco.
Se qualcuno tenta di modificare i parametri dell'URL dell'immagine, ma non fornisce una chiave di sicurezza valida, non potrà creare una nuova versione. La CDN per immagini si occupa dei dettagli della generazione e del monitoraggio delle chiavi di sicurezza per te.
Trasformazioni
Le CDN per immagini offrono decine e, in alcuni casi, centinaia di trasformazioni di immagini diverse. Queste trasformazioni sono specificate nella stringa dell'URL e non esistono limitazioni all'utilizzo di più trasformazioni contemporaneamente. Per le prestazioni web, le trasformazioni delle immagini più importanti sono le dimensioni, la densità dei pixel, il formato e la compressione. Queste trasformazioni sono il motivo per cui il passaggio a una CDN per immagini in genere riduce le dimensioni dei file immagine del tuo sito.
Poiché di solito esiste un'impostazione oggettivamente migliore per le trasformazioni delle prestazioni, alcune CDN per immagini supportano una modalità "automatica" per queste trasformazioni. Ad esempio, invece di specificare che le immagini devono essere trasformate nel formato WebP, puoi consentire alla CDN di selezionare e pubblicare automaticamente il formato ottimale. Una CDN per immagini può determinare il modo migliore per trasformare un'immagine utilizzando, tra gli altri, i seguenti indicatori:
- Suggerimenti client (ad esempio, larghezza dell'area visibile, DPR e larghezza dell'immagine)
- L'intestazione
Save-Data - L'intestazione della richiesta User-Agent
- L'API Network Information
Ad esempio, la CDN per immagini potrebbe pubblicare AVIF su un browser Chrome, WebP su un browser Edge e JPEG su un browser molto vecchio. Le impostazioni automatiche sono molto utilizzate perché ti consentono di sfruttare l'esperienza delle CDN per immagini nell'ottimizzazione delle immagini senza dover modificare il codice per adottare nuove tecnologie quando la CDN per immagini inizia a supportarle.
Tipi di CDN per immagini
Esistono due categorie principali di CDN per immagini: autogestite e gestite da terze parti.
CDN per immagini autogestite
Le CDN autogestite possono essere una buona scelta per i siti con personale tecnico che ha dimestichezza con la manutenzione della propria infrastruttura.
- Thumbor è la CDN per immagini autogestita più popolare. È open source e l'utilizzo è senza costi, ma ha meno funzionalità rispetto alla maggior parte delle CDN commerciali e la sua documentazione è un po' limitata. I siti che utilizzano thumbor includono Wikipedia, Square e 99designs. Consulta Come installare la CDN per immagini Thumbor per istruzioni sulla configurazione.
- Immaginario
- Imagor
CDN di immagini di terze parti
Le CDN per immagini di terze parti forniscono CDN per immagini come servizio. Allo stesso modo in cui i provider cloud forniscono server e altre infrastrutture a pagamento, le CDN di immagini forniscono l'ottimizzazione e la pubblicazione delle immagini a pagamento. Poiché le CDN per immagini di terze parti gestiscono la tecnologia di base, in genere puoi iniziare a utilizzarne una abbastanza rapidamente, anche se una migrazione completa per un sito di grandi dimensioni potrebbe richiedere più tempo. In genere, i prezzi delle CDN per immagini di terze parti si basano su livelli di utilizzo e la maggior parte delle CDN per immagini offre un livello senza costi o una prova senza costi per consentirti di provare il prodotto.
Scegli una CDN per le immagini
Esistono molte buone opzioni per le CDN di immagini. Alcuni hanno più funzionalità di altri, ma tutti possono aiutarti a risparmiare byte sulle immagini e, di conseguenza, a caricare le pagine più velocemente. Oltre ai set di funzionalità, altri fattori da considerare nella scelta di una CDN per immagini sono il costo, l'assistenza, la documentazione e la facilità di configurazione o migrazione.
Effetti su Largest Contentful Paint (LCP)
Le immagini sono una parte fondamentale dell'esperienza utente su molti siti web, quindi sono un fattore importante per il Largest Contentful Paint di un sito. Ecco alcuni aspetti da tenere presente se decidi di utilizzare una CDN per immagini:
- Le immagini pubblicate dalle CDN possono provenire da un server multiorigine, il che può aumentare il tempo di configurazione della connessione del sito. Se possibile, prova a utilizzare una CDN per immagini che agisca da proxy tramite l'origine principale, in modo da non aggiungere origini aggiuntive a cui il browser deve connettersi. Questo ha lo stesso effetto dell'hosting autonomo delle immagini sull'origine principale.
- Valuta la possibilità di utilizzare un valore dell'attributo
fetchprioritydi"high"sull'elemento immagine LCP in modo che il browser possa iniziare a caricare l'immagine il prima possibile. - Se un'immagine non è immediatamente rilevabile nell'HTML iniziale, valuta la possibilità di utilizzare un suggerimento
rel=preloadper l'immagine candidata LCP, in modo che il browser possa caricarla in anticipo. - Se non puoi utilizzare il proxy tramite l'origine e il browser non saprà quale immagine caricare fino a un momento successivo del caricamento pagina, configura una connessione alla CDN delle immagini multiorigine il prima possibile per abbreviare la fase di caricamento delle risorse per le potenziali immagini candidate LCP.