Le reti CDN (Content Delivery Network) immagini sono eccellenti nell'ottimizzazione delle immagini per sul web. Il passaggio del tuo sito web a una CDN di immagini può generare 40-80% di risparmio sull'immagine dimensioni del file e nella maggior parte dei casi possono ottimizzare le immagini meglio di una script di ottimizzazione delle immagini in fase di creazione.
Che cos'è una CDN di immagini?
Le CDN di immagini sono specializzate nella trasformazione, nell'ottimizzazione e nella pubblicazione delle immagini. Tu possono anche essere considerate 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 che non solo l'immagine da caricare, ma anche parametri come dimensioni, formato e qualità. Ciò ti consente di creare varianti di un'immagine per diversi casi d'uso.
Le reti CDN di immagini sono diverse dagli script di ottimizzazione delle immagini in fase di compilazione in quanto creare nuove versioni delle immagini in base alle esigenze. Di conseguenza, le reti CDN sono generalmente più adatte a creare immagini molto personalizzate per i singoli rispetto agli script di build.
In che modo le CDN di immagini utilizzano gli URL per indicare le opzioni di ottimizzazione
Gli URL immagine utilizzati dalle reti CDN di immagini trasmettono informazioni importanti su un'immagine e le trasformazioni e le ottimizzazioni da applicare. Formati URL variano a seconda della CDN di immagini utilizzata, ma, in linea generale, hanno tutte caratteristiche simili. Di seguito sono riportate alcune delle funzionalità più comuni.
Origine
Una CDN di immagini può essere presente sul tuo dominio o su quello della rete CDN di immagini. Le CDN di immagini di terze parti in genere offrono la possibilità di utilizzare un dominio personalizzato per un a pagamento. L'utilizzo del tuo dominio semplifica il passaggio da una CDN di immagini in un secondo momento non saranno necessarie modifiche all'URL.
L'esempio precedente utilizza il dominio CDN immagine ("example-cdn.com") con un un sottodominio personalizzato, anziché un dominio personalizzato.
Immagine
In genere, le CDN di immagini possono essere configurate per recuperare automaticamente le immagini
le località esistenti quando necessario. Questa funzionalità viene spesso ottenuta
includere l'URL completo dell'immagine esistente all'interno dell'URL dell'immagine
generate dalla CDN delle immagini. Ad esempio, potresti vedere un URL simile a
questo: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Questo URL recupera e ottimizza l'immagine esistente all'indirizzo https://flowers.com/daisy.jpg.
Il formato file richiesto (JPG, nell'esempio) potrebbe non essere uguale al
restituito il formato di un file immagine (WebP, nell'esempio). HTTP content-type
L'intestazione indica al browser il formato dell'URL in modo che possa elaborarlo
in modo appropriato. Questo può creare confusione se il file viene salvato su disco e utilizzato
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 dell'immagine CDN.
Un token di sicurezza
Un token di sicurezza impedisce ad altri di creare nuove versioni delle tue immagini. Quando questa funzione è attiva, ogni nuova versione di un'immagine richiede un ID univoco token di sicurezza.
Se qualcuno prova a modificare i parametri dell'URL dell'immagine, non fornisce un token di sicurezza valido, non potrà crearne uno nuovo completamente gestita. La CDN delle immagini si occupa dei dettagli della generazione e del monitoraggio token di sicurezza al posto tuo.
Trasformazioni
Le CDN di immagini offrono decine e, in alcuni casi, centinaia, di modelli e piccole trasformazioni. Queste trasformazioni sono specificate nella stringa dell'URL e non esistono limitazioni all'utilizzo di più trasformazioni contemporaneamente. Per il rendimento sul web, le trasformazioni più importanti delle immagini sono dimensioni, pixel densità, formato e compressione. Queste trasformazioni sono il motivo per cui il passaggio a una CDN di immagini in genere riduce le dimensioni dei file immagine del tuo sito.
Perché di solito esiste un'impostazione oggettivamente migliore per il rendimento di immagine, alcune CDN di immagini supportano un'operazione modalità per questi e piccole trasformazioni. Ad esempio, invece di specificare che le immagini devono essere trasformate, al formato WebP, puoi lasciare che la CDN selezioni e pubblichi automaticamente formato ottimale. Una CDN di immagini può determinare il modo migliore per trasformare un'immagine utilizzando, tra gli altri, gli indicatori seguenti:
- Suggerimenti del client (ad es. larghezza dell'area visibile, DPR e larghezza dell'immagine)
- La
Save-Dataintestazione - Lo User-Agent intestazione della richiesta
- L'API Network Information
Ad esempio, la CDN di immagini potrebbe pubblicare i file AVIF su un browser Chrome, WebP su un browser Edge e JPEG in un browser molto vecchio. Le impostazioni automatiche sono molto usate perché ti consentono di sfruttare al meglio le risorse CDN delle immagini esperienza nell'ottimizzazione delle immagini senza Necessità di modificare il codice per adottare nuove tecnologie all'avvio della CDN dell'immagine supportarli.
Tipi di CDN di immagini
Esistono due categorie principali di CDN di immagini: autogestite e gestite da terze parti.
CDN di immagini autogestite
Le reti CDN autogestite possono essere una buona scelta per i siti con personale tecnico che si senta a proprio agio nella gestione della propria infrastruttura.
- Thumbor è l'app autogestita più popolare CDN di immagini. È open source e senza costi, ma ha meno funzionalità rispetto per la maggior parte delle reti CDN commerciali e la relativa documentazione è alquanto limitata. I siti che utilizzano la funzione di pollice includono Wikipedia, Quadrato e 99designs. Consulta Come installare la CDN delle immagini Thumbor per istruzioni per la configurazione.
- Immaginario
- Immaginare
CDN di immagini di terze parti
Le CDN di immagini di terze parti forniscono CDN di immagini come servizio. Allo stesso modo i cloud provider forniscono server e altre infrastrutture a pagamento, CDN di immagini offrire l'ottimizzazione delle immagini e la pubblicazione a pagamento. Poiché i file di immagine di terze parti Le reti CDN mantengono la tecnologia di base. In genere, puoi iniziare a usarne una abbastanza rapidamente, anche se una migrazione completa per un sito di grandi dimensioni potrebbe richiedere più a lungo. Il prezzo delle CDN di immagini di terze parti solitamente si basa sui livelli di utilizzo, con la maggior parte delle CDN di immagini che offrono un livello senza costi o una prova senza costi per consentirti del prodotto.
Scegli una CDN di immagini
Esistono molte valide opzioni per le CDN di immagini. Alcuni hanno più funzionalità di altri, ma tutti possono aiutarti a risparmiare byte sulle tue immagini e quindi a caricare pagine più velocemente. Oltre alle caratteristiche, ci sono altri fattori da considerare nella scelta CDN di immagini offre costi, assistenza, documentazione e facilità di configurazione o migrazione.
Effetti sulla visualizzazione più grande con contenuti (LCP)
Le immagini sono una parte vitale dell'esperienza utente su molti siti web, pertanto sono un fattore importante per la metrica Largest Contentful Paint di un sito. Ecco tieni presente quanto segue se decidi di utilizzare una CDN di immagini:
- Le immagini fornite da CDN possono provenire da un server multiorigine, che può aumenta i tempi di configurazione della connessione del sito. Se possibile, cerca di usare un'immagine una rete CDN che esegue il proxy attraverso l'origine principale in modo da non aggiungere origini aggiuntive a cui il browser si collega. Questo approccio ha lo stesso effetto delle immagini ospitate autonomamente sull'origine principale.
- Valuta la possibilità di utilizzare un valore dell'attributo
fetchprioritypari a"high"sull'elemento immagine LCP, in modo che il browser possa iniziare a caricare l'immagine non appena il più possibile. - Se un'immagine non è immediatamente rilevabile nel codice HTML iniziale, valuta la possibilità di utilizzare
Un
rel=preloadsuggerimento per l'immagine candidata LCP in modo che il browser possa caricarla prima nel tempo. - Se non riesci a utilizzare il proxy e il browser non saprà quale immagine fino al caricamento della pagina, configurare una connessione alla rete CDN delle immagini multiorigine il prima possibile per ridurre la fase di caricamento delle risorse per le potenziali immagini candidate LCP.