Immagini web: scegli il formato, la dimensione e il caricamento

Accessibilità e prestazioni web · 6 lettura minima

Quando ottimizzi le immagini web, prendi tre decisioni separate: il formato giusto per il contenuto, le dimensioni necessarie per la visualizzazione e quando caricare. Una foto di prodotto, un logo e un'immagine posizionata a fondo pagina non hanno le stesse esigenze. Conserva gli originali, confronta le esportazioni con la loro effettiva dimensione di utilizzo e controlla il file effettivamente scaricato dal browser.

Da ricordare

• Il formato, le dimensioni e il peso sono tre caratteristiche diverse.
• Preparare le immagini in base al loro utilizzo, non a una singola dimensione.
• Non ritardare il caricamento dell'immagine che costituisce il contenuto principale.
• Resta un file più leggero da controllare visivamente e sulla pagina.

Scegli il formato in base al contenuto

Il Guida al formato MDN distingue i loro usi. WebP e AVIF consentono la compressione adatta alle immagini web, incluso il supporto per la trasparenza. JPEG rimane un'opzione per la fotografia. PNG utilizza la compressione senza perdite; SVG descrive forme vettoriali, adatte per loghi, icone o diagrammi.

Fotografie e dettagli del prodotto

Confronta le esportazioni WebP, AVIF o JPEG con una qualità visiva accettabile. Esamina le aree difficili: trama, bordi, caratteri piccoli, sfumature e colore del prodotto. L'impostazione della qualità non è direttamente comparabile tra formati o strumenti. La scelta deve provenire dall'immagine esportata, non solo da un valore nel software.

Loghi, diagrammi e trasparenza

Per un logo per il quale disponi di una sorgente vettoriale, scegli un'esportazione SVG adatta. Rinominare una fotografia in SVG non la trasforma in un disegno vettoriale. Per un'acquisizione raster o grafica, composta da pixel, dove la precisione conta, confronta le esportazioni senza perdite. La trasparenza da sola non impone PNG: WebP e AVIF possono anche mantenerla.

Se offri diversi formati, il componente deve fornire una soluzione di fallback compatibile con i browser di destinazione. Controlla anche il supporto del tuo strumento di gestione dei contenuti e di elaborazione delle immagini.

Adattare le dimensioni alla posizione

Le dimensioni corrispondono ai pixel dell'immagine; il peso corrisponde ai dati presenti nel file. Un'immagine compressa potrebbe rimanere sovradimensionata. Al contrario, un'immagine piccola potrebbe non avere dettagli in un prodotto zoom. Inizia distinguendo tra miniatura della griglia, visualizzazione principale e vista ingrandita, quindi prendi nota delle dimensioni di visualizzazione.

Il browser può scegliere tra diverse varianti utilizzando srcset. L'attributo sizes descrive lo spazio di visualizzazione previsto quando le varianti sono indicate dalla loro larghezza. Anche la densità dello schermo gioca un ruolo in questa scelta. Il Guida MDN alle immagini adattive spiega questa selezione. Questi attributi non creano i file: il tuo sistema deve produrre e servire le varianti corrispondenti.

Non confondere risoluzione e ritaglio

Più risoluzioni possono mostrare la stessa composizione. Un ritaglio mobile modifica il contenuto visibile. L'elemento quadro permette di proporre diverse composizioni. Per un negozio, controlla che qualsiasi ritaglio non rimuova informazioni utili sul prodotto. Mantieni una vista dettagliata separata quando il visitatore deve esaminare un materiale o un assieme.

Carica le immagini al momento giusto

Caricamento lento, con loading="lazy", consente al browser di attendere che un'immagine si avvicini all'area visibile. È adatto per elementi visivi non critici posizionati più in basso nella pagina. Il riferimento MDN dell'elemento img descrive questa operazione: l'attivazione dipende dal browser, non da una distanza universale da imporre.

Tuttavia, non applicare il caricamento lento all'immagine identificata come elemento LCP. Il guida all'ottimizzazione di web.dev per LCP avverte che ciò ritarda inutilmente la sua richiesta. È possibile considerare un'alta priorità tramite fetchpriority per l'immagine principale, ma distribuendola a tutte le immagini si elimina il punto di definizione della priorità.

Fornisci anche larghezza e altezza con le dimensioni intrinseche e un rapporto coerente. Questi attributi consentono al browser di riservare spazio prima del download, secondo MDN. Il layout può sempre adattare la dimensione visualizzata. Soprattutto, controlla che il rapporto riservato corrisponda al visual effettivamente presentato.

Esempio illustrativo: una foto usata ovunque

In questo esempio fittizio, un negozio di illuminazione utilizza lo stesso originale per la griglia, la scheda prodotto e lo zoom. La correzione inizia separando gli usi: varianti adattate alla griglia, immagine principale leggibile e versione dettagliata per l'ingrandimento.

Il team confronta i formati sui contorni e sulla struttura dell'apparecchio. Mantiene l'immagine principale disponibile al momento del caricamento, rimanda le immagini aggiuntive fuori dallo schermo e ne riserva lo spazio. Il controllo riguarda poi i file effettivamente richiesti sul telefono e sul computer. Non si presuppone alcun aumento di peso o velocità.

Lista di controllo operativa

• Conserva gli originali al di fuori delle esportazioni destinate alla visualizzazione corrente.
• Inventaria ogni posizione, le sue dimensioni e la sua necessità di dettagli.
• Confronta formato, peso e qualità visiva delle esportazioni.
• Produci le varianti necessarie e controlla srcset e dimensioni.
• Controlla il ritaglio e i fallback.
• Prenota spazio e scegli il caricamento in base alla posizione.
• Controlla il file scaricato, quindi ingrandisci e scorri.

Limitazioni ed errori comuni

La ​​conversione dell'intero catalogo senza un campione di controllo può deteriorare i dettagli del prodotto. Un'ulteriore compressione non risolve il problema del caricamento attivato troppo tardi. Un'estensione che ottimizza i file non dimostra che il browser stia ricevendo la variante corretta. Infine, il testo importante non dovrebbe esistere solo in un'immagine: mantieni le informazioni essenziali accessibili all'interno del contenuto della pagina.

Domande frequenti

Dovremmo convertire tutte le immagini in AVIF?

No. Confronta le esportazioni, la compatibilità richiesta e il funzionamento del tuo strumento. Il formato non sostituisce le dimensioni adeguate o il caricamento ben scelto.

Quale peso massimo deve essere imposto?

Non esiste un unico valore rilevante per un'icona, una foto principale e uno zoom dettagliato. Imposta i tuoi criteri in base alla posizione, quindi verifica la pagina e la leggibilità.

Il testo alternativo viene utilizzato per velocizzare un'immagine?

No. L'attributo alt fornisce un'alternativa testuale, in particolare per l'accessibilità, come indicato da MDN. Descrivere le informazioni utili nel contesto della pagina; non riempire questo attributo con parole chiave. Per un'immagine puramente decorativa che non trasmette informazioni, utilizza un'alternativa vuota, alt="", piuttosto che una descrizione non necessaria.

Passaggio successivo

Scegli una scheda prodotto e una griglia. Per le immagini, la posizione delle note, le dimensioni visualizzate, il file scaricato e il metodo di caricamento. Quindi convalidare un'esportazione e la sua integrazione prima di applicare il metodo al resto del catalogo.

Fonti e risorse

• MDN: guida al formato immagine.
• MDN: Immagini adattive.
• MDN: elemento img e attributi.
• web.dev: ottimizza LCP.