Immagini HTML o immagini di sfondo CSS: quando usare l'una o l'altra | We.Inc
Scegli tra <img> e background-image, scrivi testi alt, evita i layout shift, crea srcset e sizes, usa il lazy loading e servi WebP o AVIF con <picture>.
Immagini HTML e immagini di sfondo CSS
Usa un <img> quando l'immagine è contenuto: una foto prodotto, un grafico, un ritratto. Dagli un testo alt, una larghezza e un'altezza. Usa un background-image CSS quando l'immagine è una decorazione dietro al testo. Aggiungi srcset e sizes così i telefoni scaricano file più leggeri, e loading="lazy" per le immagini sotto la prima schermata, mai per l'immagine hero.
<img> o background-image?
Domanda
<img>
L'immagine ha un significato?
Sì, con testo alt
No, solo decorazione
Deve essere indicizzata dai motori di ricerca?
Sì
Raramente viene rilevata
File responsive
srcset e sizes
image-set() o media query
Lazy loading
loading="lazy"
Richiede uno script
Ritagliare per riempire un box
object-fit: cover
background-size: cover
Stampata per impostazione predefinita
Sì
Di solito no
Una tabella decisionale, un generatore di srcset che mostra quale file scaricherebbe un telefono o un portatile, ed esempi modificabili per ogni schema: testo alt, dimensioni fisse, lazy loading, un'immagine hero veloce, il ritaglio con object-fit accanto a background-size, formati moderni con <picture> e sfondi responsive con image-set().
Parti dalla tabella decisionale per scegliere tra un <img> e uno sfondo CSS.
Se usi <img>, inserisci le larghezze delle tue immagini nel generatore di srcset e scegli il layout. Copia il tag generato.
Sposta i cursori della larghezza dello schermo e della densità di pixel per vedere quale file sceglierebbe il browser su ciascun dispositivo.
Copia dagli esempi qualsiasi altro schema ti serva: ognuno viene mostrato dal vivo accanto al suo codice.
Imposta sempre gli attributi width e height sulla dimensione reale in pixel dell'immagine. Il CSS può comunque ridimensionarla; gli attributi permettono al browser di riservare lo spazio giusto prima che arrivi il file.
Segna l'immagine più grande della prima schermata con fetchpriority="high" e lasciala in caricamento immediato. Usare il lazy loading su quell'immagine ritarda il rendering più grande della pagina.
Lascia alt vuoto (alt="") sulle immagini puramente decorative così gli screen reader le saltano, invece di omettere alt, cosa che porta alcuni lettori ad annunciare il nome del file.
Esporta le foto in due o tre larghezze, ad esempio 480, 960 e 1600 pixel. Più dimensioni raramente aiutano e rallentano le build.
Domande frequenti
background-image è dannoso per la SEO?
I motori di ricerca indicizzano le immagini presenti negli elementi <img> in modo molto più affidabile di quelle impostate nel CSS. Se vuoi che un'immagine compaia nella ricerca immagini o descriva i tuoi contenuti, mettila in un <img> con un buon testo alt. Gli sfondi decorativi non perdono nulla a stare nel CSS.
Cosa deve dire il testo alt?
Di' in una frase breve ciò che l'immagine mostra e che conta in quel contesto. Per una foto prodotto potrebbe essere il prodotto e il suo colore; per un grafico, il risultato principale. Evita espressioni come immagine di. Se l'immagine è un link, descrivi dove porta il link.
Qual è la differenza tra srcset con w e con x?
I descrittori di larghezza (480w, 960w) indicano la larghezza reale di ogni file e lasciano scegliere al browser in base all'attributo sizes e alla densità di pixel dello schermo. I descrittori di densità (1x, 2x) vanno bene per immagini mostrate sempre a una sola dimensione fissa, come un logo.
Devo usare ancora loading="lazy" se uso un framework?
Il lazy loading nativo funziona in tutti i principali browser attuali, quindi per la maggior parte delle immagini basta un semplice attributo. I componenti immagine dei framework spesso lo aggiungono al posto tuo; verifica che non applichino il lazy loading anche all'immagine hero.
Mi servono sia WebP sia AVIF?
Non sempre. Entrambi i formati sono supportati dai principali browser attuali. AVIF spesso è più leggero per le foto ma più lento da codificare. Un elemento <picture> con una sorgente AVIF, una sorgente WebP e un fallback JPEG copre tutti, ma solo WebP con un fallback JPEG è una scelta più semplice e ragionevole.
Contenuto o decorazione
La domanda che risolve la maggior parte delle scelte sulle immagini è se un visitatore perderebbe informazioni nel caso in cui l'immagine non si caricasse. Una foto del team in una pagina Chi siamo, uno screenshot in un tutorial e la foto di un prodotto in un negozio hanno tutti un significato, quindi vanno nell'HTML con un testo alt.
Una texture sfocata dietro un titolo, un motivo nel footer o una foto che crea solo atmosfera possono stare nel CSS. Così l'HTML resta pulito e puoi cambiare l'immagine in base alla dimensione dello schermo senza toccare il markup. Se sopra c'è del testo, assicurati che resti leggibile anche quando l'immagine manca impostando pure un colore di sfondo.
Come il browser sceglie da srcset
Con i descrittori di larghezza il browser legge prima sizes per sapere quanto sarà larga l'immagine disegnata, ad esempio 100vw sui telefoni e 50vw sugli schermi più larghi. Moltiplica quel valore per il device pixel ratio e sceglie il file più piccolo che sia almeno così largo. I browser possono anche scegliere un file più piccolo con una connessione lenta o uno più grande già in cache.
Impostare correttamente sizes conta più che aggiungere altre larghezze. Se sizes dice 100vw ma l'immagine occupa solo un terzo dello schermo su desktop, il browser scarica un file tre volte più largo del necessario.
Layout shift e immagine hero
Quando si carica un'immagine senza dimensioni, tutto ciò che sta sotto salta verso il basso. Gli attributi width e height permettono al browser di calcolare in anticipo le proporzioni, eliminando quel salto e migliorando il Cumulative Layout Shift.
L'immagine hero di solito è l'elemento del Largest Contentful Paint. Lasciala in caricamento immediato, dalle fetchpriority="high", servila dal tuo dominio o da un host di immagini veloce, ed evita di nasconderla dietro uno script che la imposta in seguito.
Un <img> completo
alt, width, height e lazy loading
Gli attributi indicano la dimensione reale; il CSS la rende fluida. Grazie a width e height il box viene riservato prima che il file si carichi. Le immagini della demo sono piccoli SVG inline.
L'immagine hero: caricamento immediato e priorità alta
Usalo sull'unica immagine grande in cima alla pagina. Tutto ciò che sta sotto la prima schermata riceve invece loading="lazy".
Regole per il testo alt
Testo alt per tipo di immagine
Immagine
Foto prodotto
Descrivi l'oggetto e il dettaglio che conta: Tavolino in rovere con due cassetti
Grafico o diagramma
Indica il messaggio chiave: Le vendite sono raddoppiate tra marzo e giugno
Immagine che è un link
Indica la destinazione: Home
Motivo decorativo o divisore
Vuoto: alt=""
Foto con la stessa didascalia accanto
Vuoto, o un'etichetta breve, così non viene letto due volte
Testo dentro un'immagine
Lo stesso testo
object-fit: cover accanto a background-size: cover
Entrambi ritagliano un'immagine per riempire un box senza deformarla. object-position e background-position scelgono quale parte resta visibile.
Lo stesso ritaglio, in due modi
A sinistra c'è un <img> con object-fit; a destra un div con uno sfondo. Sembrano uguali; solo quello di sinistra ha testo alt e lazy loading.
Immagini di sfondo CSS
Uno sfondo dietro al testo, con un colore di fallback
Il gradiente scuro sovrapposto mantiene leggibile il testo bianco su qualsiasi foto, e il colore di sfondo compare se l'immagine non si carica.
Sfondi responsive con image-set()
image-set() lascia scegliere al browser in base alla densità di pixel o al tipo di file. Metti prima una semplice riga url() per i browser più vecchi.
WebP e AVIF con <picture>
Formati moderni con un fallback JPEG
Il browser usa il primo <source> di cui supporta il tipo. L'<img> interno contiene il testo alt, la dimensione e il file di fallback, ed è l'elemento a cui dai lo stile.
A tutta larghezza su ogni schermo
A tutta larghezza sui telefoni, metà da 768px
Griglia di card: 1, 2 o 3 colonne
Colonna di contenuto limitata a 720px
Generatore di srcset e sizes
Larghezze che esporti (px)
Percorso del file senza larghezza
Estensione
Quanto è larga l'immagine disegnata?
Inserisci almeno una larghezza.
Copia
Quale file scaricherebbe un dispositivo?
Telefono piccolo
Telefono grande
Tablet
Portatile
Portatile Retina
Larghezza dello schermo: {vw}px
Densità di pixel: {dpr}x
L'immagine è disegnata larga {slot}px, quindi il browser ha bisogno di circa {px} pixel del dispositivo e normalmente scaricherebbe
ancora niente
(il file più grande, che è più piccolo dell'ideale: valuta di esportarne uno più largo)
I browser possono scegliere un file più piccolo con una connessione lenta o uno più grande che hanno già in cache; qui vedi la scelta abituale.