Casi d'uso dell'ottimizzazione delle immagini

Questa pagina fornisce esempi di comportamento avanzato dell'elaborazione delle immagini, effetti dell'ordine della pipeline e regole di normalizzazione automatica delle immagini.

Ordine delle trasformazioni

Le operazioni nella stringa del parametro di query imop vengono eseguite in sequenza da sinistra a destra, ad eccezione di metadata o scale, che vengono eseguite per prime, e canvas, che viene eseguita per ultima. Poiché ogni operazione agisce direttamente sull'output visivo dell'operazione precedente, la sequenza dei parametri influisce sulla qualità visiva finale e sulla conservazione dei dettagli dell'immagine derivata.

Considera un'immagine di origine di 1000 pixel di larghezza per 1000 pixel di altezza:

Esempio: Resize seguito da Crop

https://www.example.com/image.jpg?imop=Resize,height=200;Crop,left=0.5

  1. Ridimensiona: l'immagine viene prima ridimensionata da 1000 × 1000 px a 200 × 200 px per soddisfare il parametro height=200.

  2. Ritaglia: l'operazione left=0.5 rimuove la metà sinistra dell'immagine già ridimensionata.

Risultato: un'immagine finale di 100 x 200 px che rappresenta il 50% a destra dei contenuti. Poiché l'intera immagine è stata ridimensionata prima del ritaglio, la regione finale conserva molti meno dettagli.

Esempio : Crop seguito da Resize

https://www.example.com/image.jpg?imop=Crop,left=0.5;Resize,height=200

  1. Ritaglia: l'left=0.5operazione estrae prima il 50% a destra dell' immagine di origine ad alta risoluzione, creando un'500 x 1000 px immagine intermedia.

  2. Ridimensiona: l'operazione height=200 ridimensiona la sezione ritagliata fino all' altezza finale.

Risultato: un'immagine finale di 100 * 200 px. Poiché l'immagine originale è stata ritagliata prima e ridimensionata in un secondo momento, l'output finale conserva molti più dettagli e chiarezza.

Comportamento di allungamento e upscaling

Per impostazione predefinita, il servizio di ottimizzazione delle immagini applica una strategia rigorosa di solo ridimensionamento per conservare la larghezza di banda di pubblicazione edge e proteggere la qualità visiva. Se richiedi dimensioni maggiori dell'immagine originale, Cloud CDN ignora l'ingrandimento e genera l'immagine nelle dimensioni originali.

Per ignorare questo comportamento e forzare l'upscaling di un asset, devi dichiarare esplicitamente il valore stretch.

Requisiti di convalida per l'upscaling

  • Regola di ridimensionamento doppio: il valore stretch è consentito solo se fornisci esplicitamente i parametri width e height nell'operazione Resize.

  • Vincolo di una singola dimensione: se includi scaling=stretch definendo una sola dimensione, ad esempio width o height, il servizio di ottimizzazione delle immagini rifiuta l'intera richiesta.

Ad esempio,

Richiesta valida: ?imop=resize,width=500,height=500,scaling=stretch

Richiesta non valida: ?imop=resize,width=500, scaling=stretch

Memorizzazione nella cache e annullamento della convalida della cache

Quando aggiorni un'immagine originale sul server di origine, devi annullare la convalida della versione memorizzata nella cache per assicurarti che Cloud CDN recuperi e pubblichi l'asset aggiornato.

Comportamento di memorizzazione nella cache

Ogni combinazione univoca di parametri di trasformazione aggiunti a un URL immagine crea una voce di cache separata e distinta nell'edge. Per ottimizzare il rapporto di riscontri della cache, evita di creare un numero eccessivo di varianti di parametri univoci. Ad esempio, modifiche di un singolo pixel.

Cloud CDN normalizza le chiavi della cache per raggruppare parametri di trasformazione identici indipendentemente dal loro ordine nella stringa di query.

Comportamento di annullamento della convalida

Quando aggiorni un'immagine originale sul server di origine, devi solo inviare una singola richiesta di annullamento della convalida per l'URL dell'immagine di base. Cloud CDN avanzato elimina automaticamente sia l'immagine originale memorizzata nella cache sia tutte le relative varianti generate automaticamente (ad esempio, versioni WebP o ottimizzate) a livello globale.

Come funziona l'annullamento della convalida delle varianti

Quando invii una richiesta di annullamento della convalida della cache utilizzando un pattern di percorso che corrisponde a un URL dell'immagine di base, ad esempio /images/my-picture.jpg, Cloud CDN identifica ed elimina automaticamente:

  • L'immagine di origine memorizzata nella cache originale.

  • Tutte le varianti generate in precedenza.

Puoi applicare l'annullamento della convalida della cache di Cloud CDN utilizzando:

  • Google Google Cloud Cloud Console: vai a Servizi di rete > Cloud CDN, seleziona l'origine e vai alla scheda Annullamento della convalida della cache. In alternativa, vai a Servizi di rete > Bilanciamento del carico, seleziona il bilanciatore del carico e utilizza la scheda Annullamento della convalida della cache.

  • Google Cloud CLI: utilizza il comando Google Cloud CLI compute url-maps invalidate-cdn-cache.

  • Tag della cache : questo è l'approccio consigliato per la gestione delle immagini ottimizzate. Ti consente di inviare richieste di annullamento della convalida destinate a un tag specifico, che elimina i contenuti associati per un controllo più granulare.

Ad esempio:

Per annullare la convalida di /images/my-picture.jpg e di tutte le relative varianti ottimizzate a livello globale:

  • Percorso: specifica il percorso esatto /images/my-picture.jpg.

  • Host (facoltativo): specifica l'host se vuoi cancellare l'immagine solo per un dominio specifico.

Una volta inviata, questa singola azione rimuove tutte le versioni ottimizzate dell'immagine dalle cache edge a livello globale, garantendo che gli utenti ricevano immediatamente la versione aggiornata alla richiesta successiva.

Profilo colore e orientamento dell'immagine in EXIF (normalizzazione)

Gli smartphone e le fotocamere digitali moderni salvano spesso le immagini con griglie di pixel non ruotate e si basano su un tag di orientamento EXIF incorporato per indicare al dispositivo di visualizzazione di ruotare l'immagine. Ad esempio, 90 gradi in senso orario per l'orientamento verticale. Allo stesso modo, i profili colore ICC incorporati definiscono la modalità di visualizzazione dei colori su monitor diversi.

Per garantire operazioni prevedibili, la pipeline edge di ottimizzazione delle immagini normalizza automaticamente le immagini prima di eseguire qualsiasi trasformazione.

Procedura di normalizzazione

  • Prima di eseguire le trasformazioni, il motore edge legge i tag di orientamento EXIF e i metadati del profilo colore ICC e li applica fisicamente alla griglia di pixel. In questo modo, le coordinate dei parametri crop e resize successivi sono più prevedibili.

  • Le operazioni, come crop, resize o scale, vengono eseguite correttamente in base alle dimensioni visive reali per evitare errori visivi.

  • Dopo aver applicato le modifiche ai pixel principali, il motore edge rimuove tutti i metadati non essenziali dal file per massimizzare il risparmio di spazio. Per impostazione predefinita, conserva copyright, a meno che non venga richiesto un valore specifico nell'operazione sui metadati.

Passaggi successivi