Le reti CDN (Image Content Delivery Network) sono eccellenti per ottimizzare le immagini per il web. Il passaggio del tuo sito web a una CDN immagine può comportare un risparmio del 40-80% nelle dimensioni dei file immagine e, nella maggior parte dei casi, le immagini possono essere ottimizzate meglio di uno script di ottimizzazione delle immagini in fase di build.
Che cos'è una CDN immagine?
Le immagini CDN sono specializzate per la trasformazione, l'ottimizzazione e la pubblicazione di immagini. Puoi anche considerarli come API per accedere alle immagini utilizzate sul tuo sito e manipolarle. Per le immagini caricate da una CDN immagine, un URL immagine indica non solo l'immagine da caricare, ma anche parametri come dimensione, formato e qualità. In questo modo puoi creare varianti di un'immagine per diversi casi d'uso.
Le CDN di immagini sono diverse dagli script di ottimizzazione delle immagini in fase di build in quanto creano nuove versioni delle immagini in base alle esigenze. Di conseguenza, in genere le reti CDN sono più adatte a creare immagini molto personalizzate per i singoli client rispetto agli script di build.
In che modo le CDN immagine utilizzano gli URL per indicare le opzioni di ottimizzazione
Gli URL immagine utilizzati dalle CDN immagine trasmettono informazioni importanti su un'immagine e sulle trasformazioni e ottimizzazioni da applicare. I formati degli URL variano a seconda della rete CDN immagine in uso, ma a livello generale hanno tutti funzionalità simili. Di seguito sono riportate alcune delle funzionalità più comuni.
Origin
Una CDN immagine può risiedere sul tuo dominio o su quello della tua rete CDN immagine. In genere le CDN immagine di terze parti offrono la possibilità di utilizzare un dominio personalizzato a pagamento. L'utilizzo del tuo dominio semplifica il passaggio tra CDN immagine in un secondo momento perché non sono necessarie modifiche all'URL.
L'esempio precedente utilizza il dominio CDN dell'immagine ("example-cdn.com") con un sottodominio personalizzato, anziché un dominio personalizzato.
Immagine
In genere, le CDN immagine possono essere configurate per recuperare automaticamente le immagini dalle posizioni esistenti quando sono necessarie. Questa funzionalità spesso si raggiunge includendo l'URL completo dell'immagine esistente nell'URL dell'immagine generata dalla rete CDN delle 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 recupererà e ottimizzerebbe l'immagine esistente in https://flowers.com/daisy.jpg.
Il formato file richiesto (JPG, nell'esempio) potrebbe non corrispondere al formato del file immagine restituito (WebP, nell'esempio). L'intestazione HTTP content-type indica al browser in quale formato è l'URL, in modo che possa elaborare l'URL in modo appropriato. Questo può creare confusione se il file viene salvato su disco e utilizzato da
un altro programma che prevede che il formato corrisponda all'estensione del file.
Un altro modo ampiamente supportato per caricare immagini su una CDN immagine è inviarle in una richiesta HTTP POST all'API della CDN immagine.
Un token di sicurezza
Un token di sicurezza impedisce ad altre persone di creare nuove versioni delle tue immagini. Se questa funzionalità è abilitata, ogni nuova versione di un'immagine richiede un token di sicurezza univoco.
Se qualcuno prova a modificare i parametri dell'URL dell'immagine, ma non fornisce un token di sicurezza valido, non potrà creare una nuova versione. La rete CDN delle immagini si occupa dei dettagli della generazione e del monitoraggio dei token di sicurezza per te.
Trasformazioni
Le reti CDN di immagini offrono decine e, in alcuni casi, centinaia di trasformazioni di immagini diverse. Queste trasformazioni sono specificate nella stringa URL e non esistono limitazioni sull'utilizzo di più trasformazioni contemporaneamente. Per le prestazioni sul web, le trasformazioni più importanti delle immagini sono dimensioni, densità dei pixel, formato e compressione. Queste trasformazioni sono il motivo per cui il passaggio a una rete CDN immagine in genere riduce le dimensioni dei file immagine del sito.
Poiché di solito esiste un'impostazione obiettivamente migliore per le trasformazioni delle prestazioni, alcune CDN immagine supportano la modalità "automatica" per queste trasformazioni. Ad esempio, invece di specificare che le immagini possono essere trasformate nel formato WebP, puoi lasciare che la rete CDN selezioni e pubblichi automaticamente il formato ottimale. Una rete CDN immagine può determinare il modo migliore per trasformare un'immagine utilizzando, tra gli altri, i seguenti indicatori:
- Suggerimenti del cliente (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 rete CDN immagine potrebbe pubblicare file AVIF su un browser Chrome, WebP su un browser Edge e JPEG su un browser molto vecchio. Le impostazioni automatiche sono molto usate perché ti consentono di sfruttare l'esperienza delle CDN di immagini nell'ottimizzazione delle immagini senza dover cambiare il codice per adottare nuove tecnologie quando la CDN delle immagini inizia a supportarle.
Tipi di CDN di immagini
Esistono due categorie principali di CDN immagine: autogestite e gestite da terze parti.
CDN immagine autogestite
Le reti CDN autogestite possono essere una buona scelta per i siti con personale tecnico che si sente a proprio agio a mantenere la propria infrastruttura.
- Thumbor è la CDN di immagini autogestita più diffusa. È open source e senza costi, ma ha meno funzionalità della maggior parte delle reti CDN commerciali e la sua documentazione è in qualche modo limitata. Tra i siti che utilizzano i pollici in evidenza ci sono Wikipedia, Square, e 99design. Per istruzioni sulla configurazione, consulta Come installare la CDN di immagini Thumbor.
- Immaginario
- Immaginario
CDN immagine di terze parti
Le CDN immagine di terze parti forniscono CDN immagine as a Service. Allo stesso modo in cui i provider di servizi cloud forniscono server e altre infrastrutture a pagamento, le CDN di immagini offrono l'ottimizzazione e la distribuzione delle immagini a pagamento. Poiché i CDN di immagini di terze parti gestiscono la tecnologia di base, di solito puoi iniziare a usarne una abbastanza rapidamente, anche se una migrazione completa per un sito di grandi dimensioni potrebbe richiedere più tempo. I prezzi delle CDN immagine di terze parti si basano solitamente sui livelli di utilizzo e la maggior parte delle CDN di immagini offre un livello senza costi o una prova senza costi per consentirti di provare il loro prodotto.
Scegli una CDN immagine
Esistono molte buone opzioni per le reti CDN di immagini. Alcune hanno più funzionalità di altre, ma ognuna può 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 immagine 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 vitale dell'esperienza utente su molti siti web, pertanto sono un fattore importante nella Largest Contentful Paint di un sito. Ecco alcuni aspetti da tenere presente se decidi di utilizzare una CDN immagine:
- Le immagini pubblicate da CDN possono provenire da un server multiorigine, il che può aumentare i tempi di configurazione della connessione del sito. Quando possibile, prova a utilizzare una rete CDN immagine che esegua il proxy attraverso l'origine principale, in modo da non aggiungere altre origini a cui il browser possa connettersi. Questo ha lo stesso effetto delle immagini self-hosting nell'origine principale.
- Prendi in considerazione l'utilizzo di un valore attributo
fetchprioritypari a"high"nell'elemento immagine LCP, in modo che il browser possa iniziare a caricare l'immagine il prima possibile. - Se un'immagine non è immediatamente rilevabile nel codice HTML iniziale, ti consigliamo di utilizzare un suggerimento
rel=preloadper l'immagine candidata LCP in modo che il browser possa caricarla in anticipo. - Se non riesci a eseguire il proxy tramite l'origine e il browser non saprà quale immagine caricare fino a una fase successiva nel caricamento della pagina, configura il prima possibile una connessione alla rete CDN delle immagini multiorigine per abbreviare la fase di caricamento delle risorse per le potenziali immagini candidate LCP.