Criteri relativi alle immagini per tempi di caricamento rapidi e altro ancora

Utilizza norme relative alle immagini ottimizzate per assicurarti che il tuo sito utilizzi le immagini con il rendimento migliore.

Luna Lu
Luna Lu

Le immagini occupano spesso una quantità significativa di spazio visivo e costituiscono la maggior parte dei byte scaricati su un sito web. L'ottimizzazione delle immagini può migliorare le prestazioni di caricamento e ridurre il traffico di rete.

Sorprendentemente, più della metà dei siti sul web pubblica immagini compresse male o eccessivamente grandi. Ciò lascia ampio margine per migliorare le prestazioni semplicemente ottimizzando le immagini.

Potresti chiederti come fare a sapere se le tue immagini sono ottimizzate e come ottimizzarle. Stiamo sperimentando un nuovo insieme di criteri delle funzionalità per l'ottimizzazione delle immagini: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images eunoptimized-lossless-images-strict. Ora sono tutti disponibili per le prove di origine.

Norme per le immagini ottimizzate

Le norme relative alle autorizzazioni stanno introducendo un nuovo insieme di limitazioni per le immagini che possono essere applicate con l'applicazione in fase di sviluppo. Le immagini che violano una delle limitazioni verranno visualizzate come immagini segnaposto, che sono facili da identificare e correggere. Questi criteri possono essere specificati in modalità solo report, in cui le immagini verranno visualizzate normalmente senza applicazione, mentre le violazioni vengono rilevate tramite i report. (Consulta Modalità di solo report in circolazione di seguito per i dettagli.)

oversized-images

Le norme relative alle autorizzazioni oversized-images limitano le dimensioni intrinseche di un'immagine in base alle dimensioni del contenitore.

Quando un documento utilizza il criterio oversized-images, ogni elemento <img> la cui risoluzione intrinseca è più di X volte superiore alla dimensione del contenitore in entrambe le dimensioni verrà sostituito con un'immagine segnaposto.

Perché?

Pubblicare immagini più grandi di quelle che il dispositivo di visualizzazione può visualizzare, ad esempio pubblicare immagini desktop in contesti per dispositivi mobili o pubblicare immagini ad alta densità di pixel su un dispositivo a bassa densità di pixel, spreca traffico di rete e memoria del dispositivo. Per informazioni sull'ottimizzazione delle immagini, consulta Pubblicare immagini con dimensioni corrette e Pubblicare immagini adattabili.

Esempi

Alcuni esempi lo spiegano. Di seguito è riportato il comportamento predefinito quando le dimensioni di visualizzazione di un'immagine vengono dimezzate.

Il comportamento di ridimensionamento predefinito.
Il comportamento di ridimensionamento predefinito.

Se applico le seguenti norme relative alle autorizzazioni, viene visualizzata un'immagine segnaposto.

Permissions-Policy: oversized-images *(2);

Quando l&#39;immagine è troppo grande per il container.
Quando l'immagine è troppo grande per il contenitore.

Ottengo risultati simili se riduco solo la larghezza o l'altezza.

Larghezza ridimensionata Altezza ridimensionata
Ridimensiona larghezza e altezza.

Modalità di utilizzo

In sintesi, il criterio oversized-images può essere specificato tramite:

  • Intestazione HTTP Permissions-Policy
  • Attributo <iframe> allow

Per dichiarare il criterio oversized-images, devi fornire:

  • Il nome della funzionalità, oversized-images (obbligatorio)
  • Un elenco di origini (facoltativo)
  • I valori di soglia (ovvero il rapporto di riduzione X) per le origini, specificati tra parentesi (facoltativo)

Consigliamo un rapporto di riduzione di 2,0 o inferiore. Valuta la possibilità di utilizzare immagini adattabili con risoluzioni diverse per pubblicare al meglio le immagini su vari schermi, risoluzioni e così via.

Altri esempi

Permissions-Policy: oversized-images *(2.0)

Il criterio viene applicato a tutte le origini con un valore di soglia di 2,0. Qualsiasi elemento <img> con un'immagine con rapporto di downscaling maggiore di 2,0 non è consentito e verrà sostituito con un'immagine segnaposto.

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

Il criterio viene applicato all'origine del sito con un valore di soglia di 1,5. Gli elementi <img> nei contesti di navigazione di primo livello e nei contesti di navigazione nidificati della stessa origine verranno visualizzati normalmente solo se il rapporto di riduzione è inferiore o uguale a 1,5. Gli elementi <img> in tutti gli altri elementi verranno visualizzati normalmente.

unoptimized-{lossy,lossless}-images

I criteri delle funzionalità unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict limitano le dimensioni del file di un'immagine in base alla sua risoluzione intrinseca:

unoptimized-lossy-images
I formati con perdita di dati non devono superare un rapporto byte per pixel pari a X, con una tolleranza di overhead fissa di 1 KB. Per un'immagine di L x A, la soglia delle dimensioni del file viene calcolata come L x A x X + 1024.
unoptimized-lossless-images
I formati lossless non devono superare un rapporto byte per pixel pari a X, con un margine di overhead fisso di 10 KB. Per un'immagine L x A, la soglia delle dimensioni del file viene calcolata come L x A x X + 10240.
unoptimized-lossless-images-strict
I formati lossless non devono superare un rapporto byte per pixel pari a X, con un margine di overhead fisso di 1 KB. Per un'immagine di L x A, la soglia delle dimensioni del file viene calcolata come L x A x X + 1024.

Quando un documento utilizza uno di questi criteri, qualsiasi elemento <img> che viola il vincolo verrà sostituito con un'immagine segnaposto.

Perché?

Maggiore è il volume del download, maggiore è il tempo necessario per caricare un'immagine. Le dimensioni del file devono essere mantenute il più piccole possibile durante l'ottimizzazione di un'immagine: rimuovere i metadati, scegliere un buon formato di immagine, utilizzare la compressione delle immagini e così via. Per informazioni sull'ottimizzazione delle immagini, consulta Utilizzare Imagemin per comprimere le immagini e Utilizzare immagini WebP.

Esempio

Di seguito è riportato il comportamento predefinito del browser. Senza il criterio di autorizzazione, un'immagine con perdita di dati non ottimizzata può essere visualizzata come un'immagine ottimizzata.

Confronto di un&#39;immagine ottimizzata con un&#39;immagine non ottimizzata.
Confronto tra un'immagine ottimizzata e un'immagine non ottimizzata.

Se applico le seguenti norme relative alle autorizzazioni, viene visualizzata un'immagine segnaposto.

Permissions-Policy: unoptimized-lossy-images *(0.5);

Quando l&#39;immagine non è ottimizzata.
Quando l'immagine non è ottimizzata.

Modalità di utilizzo

Se non hai familiarità con le norme relative alle autorizzazioni, consulta Introduzione ai criteri relativi alle autorizzazioni per ulteriori dettagli.

In sintesi, i criteri unoptimized-{lossy,lossless}-images possono essere specificati tramite:

  • Permissions-Policy Intestazione HTTP
  • Attributo <iframe> allow

Per dichiarare un criterio unoptimized-{lossy,lossless}-images, devi fornire:

  • Il nome della funzionalità, ad esempio unoptimized-lossy-images (obbligatorio)
  • Un elenco di origini (facoltativo)
  • I valori di soglia (ovvero il rapporto in byte per pixel X) per le origini, specificati tra parentesi (facoltativo)

Consigliamo un rapporto byte per pixel pari o inferiore a 0,5 per unoptimized-lossy-images e un rapporto byte per pixel pari o inferiore a 1 per unoptimized-lossless-images e unoptimized-lossless-images-strict.

I formati WebP hanno rapporti di compressione migliori rispetto ad altri formati. Se possibile, pubblica tutte le immagini in formato WebP con perdita di dati. Se non è sufficiente, prova il formato lossless WebP. Utilizza JPEG sui browser che non supportano i formati WebP. Utilizza PNG se nessuno di questi formati funziona.

Se utilizzi formati WebP, prova con soglie più rigide:

  • 0,2 per WEBPV8
  • 0.5 per WEBPL

Altri esempi

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

Questo criterio viene applicato a tutte le origini con un valore di soglia di 0,5 (per i formati con perdita di dati) e 1 (per i formati senza perdita di dati). Qualsiasi elemento <img> la cui immagine ha un rapporto in byte per pixel superiore al vincolo non è consentito e verrà sostituito con un'immagine segnaposto.

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

Questo criterio viene applicato all'origine del sito con un valore di soglia di 0,3 (per i formati con perdita di dati) e 0,8 (per i formati senza perdita di dati). Gli elementi <img> nei contesti di navigazione di primo livello e nei contesti di navigazione nidificati della stessa origine verranno visualizzati normalmente solo se il rapporto byte per pixel soddisfa questi vincoli. Gli elementi <img> in tutti gli altri punti verranno visualizzati normalmente.

Modalità Solo report in uso

La pubblicazione di un sito con immagini segnaposto potrebbe non essere ciò che vuoi. Puoi utilizzare i criteri in modalità di applicazione forzata (con immagini non ottimizzate visualizzate come immagini segnaposto) durante lo sviluppo e lo staging e utilizzare la modalità solo report in produzione. Per ulteriori dettagli, consulta la sezione Report sulle norme relative alle autorizzazioni. Analogamente all'intestazione HTTP Permissions-Policy, l'intestazione Permissions-Policy-Report-Only ti consente di osservare i report sulle violazioni in produzione senza alcuna applicazione.

Limitazioni

I criteri relativi alle immagini funzionano solo sugli elementi immagine HTML (<img>, <source> e così via) e non sono ancora supportati per le immagini di sfondo o i contenuti generati. Se desideri ricevere norme su contenuti più ampi, non esitare a comunicarcelo.

Ottimizzazione delle immagini

Ho parlato molto dell'ottimizzazione delle immagini, ma non ho detto come farlo. Questo argomento non rientra nell'ambito di questo articolo, ma puoi scoprire di più sui link di seguito e sui codelab elencati alla fine dell'articolo.

Inviaci i tuoi commenti

Ci auguriamo che questo articolo ti abbia aiutato a comprendere le norme relative alle immagini e ti abbia entusiasmato. Ci farebbe molto piacere che tu provassi le norme e ci inviassi un feedback.

Puoi fornirci un feedback per ciascuna delle funzionalità menzionate in questo articolo alla nostra mailing list: feature-control@chromium.org.

Ci piacerebbe sapere quali valori di soglia hai utilizzato e che hai trovato utili. Ci piacerebbe sapere se unoptimized-lossless-images o unoptimized-lossless-images-strict sono più intuitivi e facili da usare, oppure se dovremmo usare una differenza di overhead overhead. Ti invieremo un sondaggio verso la fine del periodo di prova. Continua a seguirci.