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 molto spazio per miglioramenti delle 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. Per maggiori dettagli, consulta la sezione Modalità Solo segnalazioni in uso di seguito.

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, qualsiasi elemento <img> la cui risoluzione intrinseca è più grande di X volte le dimensioni del contenitore in entrambe le dimensioni verrà sostituito con un'immagine segnaposto.

Perché?

La pubblicazione di immagini più grandi di quelle che il dispositivo di visualizzazione può visualizzare, ad esempio la pubblicazione di immagini per computer in contesti mobile o di immagini ad alta densità di pixel su un dispositivo a bassa densità di pixel, comporta uno spreco di traffico di rete e memoria del dispositivo. Per informazioni sull'ottimizzazione delle immagini, consulta Pubblicare immagini con dimensioni corrette e Pubblicare immagini adattabili.

Esempi

Ecco alcuni esempi. 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 contenitore.
Quando l'immagine è troppo grande per il contenitore.

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

Larghezza ridimensionata Altezza ridimensionata
Modifica la larghezza e l'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 il cui rapporto di riduzione è superiore a 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 punti 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 violi 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. Leggi Utilizzare Imagemin per comprimere le immagini e Utilizzare le immagini WebP per informazioni su come ottimizzare le immagini.

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 tra un&#39;immagine ottimizzata e 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 dimestichezza con le norme relative alle autorizzazioni, consulta la sezione Introduzione alle norme relative alle autorizzazioni per maggiori dettagli.

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

  • Intestazione HTTP Permissions-Policy
  • 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 (ad es. 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 i 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 la soluzione che preferisci. 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 con gli elementi immagine HTML (<img>, <source> e così via) e non sono ancora supportati per le immagini di sfondo o i contenuti generati. Se vorresti che le norme fossero supportate su contenuti più ampi, non esitare a contattarci.

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 un feedback

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

Puoi inviarci 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 farebbe molto piacere sapere se unoptimized-lossless-images o unoptimized-lossless-images-strict è più intuitivo e facile da usare o se dobbiamo utilizzare un'indennità per gli oneri aggiuntivi. Ti invieremo un sondaggio verso la fine del periodo di prova. Continua a seguirci.