Utilizza i criteri relativi alle immagini ottimizzate per assicurarti che il tuo sito utilizzi le immagini con il rendimento migliore.
Le immagini spesso occupano 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 mal compressi o inutilmente grandi. Ciò lascia molto spazio per miglioramenti delle prestazioni semplicemente ottimizzando le immagini.
Potreste chiedervi: come faccio a sapere se le mie immagini sono ottimizzate
e come devo ottimizzarle? Stiamo sperimentando un nuovo insieme di criteri relativi alle funzionalità per l'ottimizzazione delle immagini: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images e unoptimized-lossless-images-strict.
Tutti sono ora disponibili per le prove dell'origine.
Criteri relativi alle immagini ottimizzate
Il criterio di autorizzazione sta introducendo un nuovo insieme di limitazioni per le immagini che possono essere applicate con l'applicazione forzata in fase di sviluppo. Le immagini che violano una qualsiasi delle restrizioni saranno visualizzate come immagini segnaposto, facili da identificare e correggere. Questi criteri possono essere specificati in modalità di solo report, in cui le immagini verranno visualizzate normalmente senza applicazione forzata mentre le violazioni vengono osservate tramite i report. Per maggiori dettagli, vedi Modalità di solo report disponibile di seguito.
immagini fuori misura
Il criterio di autorizzazione oversized-images limita le dimensioni intrinseche di un'immagine in relazione alle dimensioni del container.
Quando un documento utilizza il criterio oversized-images, qualsiasi elemento <img> la cui risoluzione intrinseca è più di X volte più grande delle dimensioni del contenitore in entrambe le dimensioni verrà sostituito con un'immagine segnaposto.
Perché?
Pubblicare immagini di dimensioni superiori a quelle che possono essere visualizzate dal dispositivo di visualizzazione, ad esempio pubblicare immagini desktop in contesti mobili o pubblicare immagini ad alta densità di pixel su un dispositivo a bassa densità di pixel, comporta lo 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
Alcuni esempi lo illustrano. Di seguito viene mostrato il comportamento predefinito quando si tagliano a metà le dimensioni di visualizzazione di un'immagine.
Se applico i seguenti criteri di autorizzazione, ottengo invece un'immagine segnaposto.
Permissions-Policy: oversized-images *(2);
Ottengo risultati simili se abbasso solo la larghezza o l'altezza.
How to use
Per riepilogare, 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) - (Facoltativo) Un elenco di origini
- I valori di soglia (ovvero il rapporto di riduzione X) per le origini, specificati tra parentesi (facoltativi)
Consigliamo un rapporto di riduzione pari o inferiore a 2,0. Prendi in considerazione l'utilizzo di immagini adattabili con risoluzioni diverse per pubblicare al meglio le immagini su schermi di varie dimensioni, risoluzioni e così via.
Altri esempi
Permissions-Policy: oversized-images *(2.0)
Il criterio viene applicato su tutte le origini con un valore di soglia pari a 2,0. Qualsiasi elemento <img> con un'immagine con un rapporto di scale down 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 della soglia pari a 1,5.
Gli elementi <img> nei contesti di navigazione di primo livello e nei contesti di navigazione nidificati nella stessa origine verranno visualizzati normalmente solo se il rapporto di riduzione è inferiore o uguale a 1,5. Gli elementi <img> altrove verranno visualizzati normalmente.
immagini {lossy,lossless} non ottimizzate
I criteri delle funzionalità unoptimized-lossy-images, unoptimized-lossless-images e unoptimized-lossless-images-strict limitano le dimensioni dei file di un'immagine in relazione alla sua risoluzione intrinseca:
unoptimized-lossy-images- I formati poco efficaci non devono superare un rapporto byte per pixel di X, con un overhead di 1 kB fisso. Per un'immagine L x A, la soglia relativa alle dimensioni del file viene calcolata nel seguente modo: L x A x X + 1024.
unoptimized-lossless-images- I formati senza perdita di dati non devono superare un rapporto byte per pixel di X, con un overhead fisso di 10 kB. Per un'immagine L x A, la soglia relativa alle dimensioni del file viene calcolata nel seguente modo: L x A x X + 10.240.
unoptimized-lossless-images-strict- I formati senza perdita di dati non devono superare un rapporto byte per pixel di X, con un overhead di 1 kB fisso. Per un'immagine L x A, la soglia relativa alle dimensioni del file viene calcolata nel seguente modo: 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 è la dimensione di download, maggiore sarà il tempo necessario per il caricamento dell'immagine. Le dimensioni del file devono essere ridotte il più possibile quando si ottimizza un'immagine, ad esempio in caso di eliminazione dei metadati, scelta di un formato dell'immagine adeguato, utilizzo della compressione delle immagini e così via. Leggi gli articoli 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.
Se applico i seguenti criteri di autorizzazione, ottengo invece un'immagine segnaposto.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
Se non hai mai utilizzato i criteri relativi alle autorizzazioni, consulta Introduzione ai criteri relativi alle autorizzazioni per ulteriori dettagli.
Per riepilogare, 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) - (Facoltativo) Un elenco di origini
- I valori di soglia (ad es. rapporto byte per pixel X) per le origini, specificati tra parentesi (facoltativi)
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 puoi, pubblicare tutte le immagini in formato WebP con perdita di dati. Se non è sufficiente, prova il formato lossless WebP. Utilizza JPEG su 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 su 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 abbia un rapporto 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 nell'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 nella stessa origine vengono visualizzati normalmente solo se il rapporto byte per pixel soddisfa questi vincoli. Gli elementi <img>
tutti gli altri elementi verranno visualizzati normalmente.
Modalità di solo report disponibile
La pubblicazione di un sito con immagini segnaposto potrebbe non essere ciò che vuoi. Puoi utilizzare
i criteri in modalità di applicazione (con immagini non ottimizzate visualizzate come
immagini segnaposto) durante lo sviluppo e la gestione temporanea, nonché utilizzare la modalità di solo report in
produzione. Per ulteriori dettagli, consulta Report sui criteri delle autorizzazioni. Analogamente all'intestazione HTTP Permissions-Policy, l'intestazione Permissions-Policy-Report-Only consente di osservare i report sulle violazioni in modo generico senza alcuna applicazione delle norme.
Limitazioni
Le norme relative alle immagini funzionano solo per gli elementi immagine HTML (<img>, <source> e così via) e non sono ancora supportate sulle immagini di sfondo o sui contenuti generati. Se vuoi che le norme siano supportate su contenuti più ampi, non esitare a contattarci.
Ottimizzazione delle immagini
Ho parlato un po' dell'ottimizzazione delle immagini, ma non ho detto come fare. Questo argomento non rientra nell'ambito di questo articolo, ma puoi trovare ulteriori informazioni consultando i link di seguito e nei codelab elencati alla fine dell'articolo.
Inviaci il tuo feedback
Ci auguriamo che questo articolo ti abbia aiutato a comprendere le norme relative alle immagini e ti abbia fatto entusiasmare. Ci farebbe piacere se provassi le norme e ci inviassi un feedback.
Puoi inviare 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 trovato utili. Ci piacerebbe
sapere se unoptimized-lossless-images o
unoptimized-lossless-images-strict sono più intuitivi e facili da usare o se
dobbiamo invece utilizzare una differenza di carico di lavoro. Invieremo un sondaggio verso la fine della prova. Continua a seguirci.