Utilizzare CDN immagine per ottimizzare le immagini

Jeremy Wagner

Katie Hempenius

Barry Pollard

Perché utilizzare una CDN immagine?

Le reti CDN (Image Content Delivery Network) sono eccellenti per ottimizzare le immagini. Il passaggio a una CDN immagine può comportare un risparmio del 40-80% nelle dimensioni dei file immagine. In teoria, è possibile ottenere gli stessi risultati utilizzando solo gli script di build, ma in pratica è raro.

Che cos'è una CDN immagine?

Le CDN di immagini sono specializzate nella trasformazione, ottimizzazione e pubblicazione delle immagini. Puoi anche considerarli come delle 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 è facile 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 compilazione in quanto creano nuove versioni delle immagini in base alle esigenze. Di conseguenza, le reti CDN sono in genere più adatte a creare immagini molto personalizzate per ogni singolo 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, ma a livello generale hanno tutti funzionalità simili. Esaminiamo 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 da una 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 di 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 con il seguente aspetto: 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.

Un altro modo ampiamente supportato per caricare immagini su una rete CDN immagine è inviarle tramite una richiesta POST HTTP all'API del CDN immagine.

Un token di sicurezza

Un token di sicurezza impedisce ad altre persone di creare nuove versioni delle tue immagini. Se questa funzionalità è attiva, ogni nuova versione di un'immagine richiede un token di sicurezza univoco. Se qualcuno prova a modificare i parametri dell'URL dell'immagine senza fornire un token di sicurezza valido, non potrà creare una nuova versione. La rete CDN delle immagini si occuperà automaticamente dei dettagli della generazione e del monitoraggio dei token di sicurezza.

Trasformazioni

Le reti CDN di immagini offrono decine e, in alcuni casi, centinaia di trasformazioni di immagini diverse. Queste trasformazioni vengono specificate tramite la stringa URL e non sono previste limitazioni all'utilizzo di più trasformazioni contemporaneamente. Quando si parla di rendimento sul web, le trasformazioni più importanti delle immagini sono le dimensioni, la densità dei pixel, il formato e la compressione. Queste trasformazioni sono il motivo per cui il passaggio a una CDN delle immagini comporta in genere una riduzione significativa delle dimensioni delle immagini.

Tende a essere un'impostazione oggettivamente migliore per le trasformazioni delle prestazioni, quindi alcune CDN immagine supportano una modalità "automatica" per queste trasformazioni. Ad esempio, anziché specificare che le immagini possono essere trasformate nel formato WebP, potresti consentire alla rete CDN di selezionare e pubblicare automaticamente il formato ottimale. Gli indicatori che una CDN immagine può utilizzare per determinare il modo migliore per trasformare un'immagine includono:

• Suggerimenti per i clienti (ad esempio, larghezza dell'area visibile, DPR e larghezza dell'immagine)
• L'intestazione Save-Data
• Intestazione della richiesta User-Agent
• L'API Network Information

Ad esempio, la rete CDN immagine potrebbe pubblicare AVIF su un browser Chrome, WebP su un browser Edge e JPEG su un browser molto vecchio. Le impostazioni automatiche sono tra le più usate perché ti consentono di sfruttare la notevole esperienza delle CDN di immagini nell'ottimizzazione delle immagini senza dover apportare modifiche al codice per adottare nuove tecnologie una volta che saranno supportate dalla rete CDN delle immagini.

Tipi di CDN di immagini

Le CDN di immagini possono essere suddivise in due categorie: 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 non ha problemi a gestire la propria infrastruttura.

• Thumbor è la rete CDN immagine autogestita più diffusa. Sebbene sia open source e senza costi, di solito ha meno funzionalità della maggior parte delle reti CDN commerciali e la sua documentazione è in qualche modo limitata. Wikipedia, Square e 99designs sono tre siti che utilizzano Thumbor. Per istruzioni sulla configurazione, consulta il post 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. Proprio come i cloud provider forniscono server e altre infrastrutture a pagamento, le CDN di immagini offrono l'ottimizzazione e la distribuzione delle immagini a pagamento. Poiché le CDN di immagini di terze parti mantengono la tecnologia di base, iniziare è abbastanza semplice e in genere richiede 10-15 minuti, anche se una migrazione completa per un sito di grandi dimensioni potrebbe richiedere molto più tempo. I prezzi delle CDN immagine di terze parti sono generalmente determinati in base ai livelli di utilizzo e la maggior parte delle CDN immagine offre un livello senza costi o una prova senza costi per darti l'opportunità di provare il loro prodotto.

Scelta di una CDN immagine

Esistono molte buone opzioni per le reti CDN di immagini. Alcuni offrono più funzionalità di altre, ma probabilmente tutte ti aiuteranno a risparmiare byte sulle immagini e 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.

Anche provarli prima di prendere una decisione può essere utile. Di seguito puoi trovare codelab con istruzioni su come iniziare rapidamente a utilizzare diverse CDN immagine.

Effetti su Largest Contentful Paint (LCP)

Le immagini sono una parte vitale dell'esperienza utente su molti siti web e, di conseguenza, incidono sul rendimento di questi ultimi in relazione a Largest Contentful Paint. Ecco alcuni aspetti da tenere presente se decidi di utilizzare una CDN immagine:

1. Le immagini pubblicate da CDN potrebbero provenire da un server multiorigine, il che comporta tempi di configurazione della connessione aggiuntivi. 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 può connettersi. Questo ha lo stesso effetto delle immagini self-hosting nell'origine principale.
2. Prendi in considerazione l'utilizzo di un valore attributo fetchpriority pari a "high" nell'elemento immagine LCP, in modo che il browser possa iniziare a caricare l'immagine il prima possibile.
3. Se un'immagine non è immediatamente rilevabile nel codice HTML iniziale, ti consigliamo di utilizzare un suggerimento rel=preload per l'immagine candidata LCP, in modo che il browser possa caricarla in anticipo.
4. Se non è possibile eseguire il proxy tramite l'origine e l'immagine da caricare non sarà nota fino a un momento successivo durante il caricamento della pagina, devi configurare una connessione al CDN di immagini multiorigine il prima possibile per abbreviare la fase di caricamento delle risorse di quella che potrebbe essere l'immagine candidata LCP della tua pagina.

Le reti CDN di immagini sono strumenti indispensabili che eliminano l'impegno necessario per ottimizzare manualmente le immagini e dovrebbero essere considerate. Come sempre, tuttavia, è necessario considerare alcuni compromessi. Il monitoraggio delle immagini candidati LCP del sito web e l'aggiunta di suggerimenti adeguati possono ridurre l'eventuale latenza aggiuntiva di queste richieste chiave.