Quando utilizzare l'immagine di sfondo IMG vs. CSS?

https://stackoverflow.com/questions/492809

20-08-2019
|

Domanda

In quali situazioni è più appropriato utilizzare un tag HTML IMG per visualizzare un'immagine, al contrario di un CSS background-image, e viceversa?

I fattori possono includere accessibilità, supporto del browser, contenuto dinamico o qualsiasi tipo di limiti tecnici o principi di usabilità.

Soluzione

Usi corretti di IMG

Usa IMG se intendi farlo persone stampa la tua pagina e tu desidera che l'immagine venga inclusa per impostazione predefinita. & # 8212; JayTee
Usa alt (con z-index testo) quando l'immagine ha un significato semantico importante, come un'icona di avviso . Ciò garantisce che il significato dell'immagine possa essere comunicato in tutti gli user-agent, compresi gli screen reader.

Usi pragmatici di IMG

Usa img più l'attributo alt se l'immagine è parte del contenuto tale come logo o diagramma o persona (persona reale, non stock persone). & # 8212; sanchothefat
Utilizza background-image se fai affidamento sul ridimensionamento del browser per eseguire il rendering di un'immagine in proporzione alla dimensione del testo.
Usa background-size:cover per immagini sovrapposte multiple in IE6 .
~~Usa <=> con un <=> in ordine a allungare un'immagine di sfondo per riempire l'intera finestra.~~
Nota, questo non è più vero con le dimensioni dello sfondo CSS3; vedi # 6 di seguito.
L'uso di <=> anziché <=> può migliorare notevolmente le prestazioni delle animazioni su uno sfondo.

Quando utilizzare l'immagine di sfondo CSS

Usa immagini di sfondo CSS se il image non fa parte del contenuto . & # 8212; sanchothefat
Utilizza le immagini di sfondo CSS quando facendo sostituzione dell'immagine del testo per esempio. paragrafi / intestazioni. & # 8212; sanchothefat
Usa <=> se intendi farlo persone stampa la tua pagina e tu non si desidera che l'immagine venga inclusa per impostazione predefinita. & # 8212; JayTee
Usa <=> se devi migliorare i tempi di download, come con Sprite CSS .
Utilizzare <=> se è necessario che sia visibile solo una parte dell'immagine, come con gli sprite CSS.
Utilizzare <=> con <=> per allungare un'immagine di sfondo per riempire l'intera finestra.

Altri suggerimenti

È una decisione in bianco e nero per me. Se l'immagine fa parte del contenuto come un logo o un diagramma o una persona (persona reale, non persone di archivio fotografico), utilizzare il tag <img /> più l'attributo alt. Per tutto il resto ci sono immagini di sfondo CSS.

L'altra volta per utilizzare le immagini di sfondo CSS è quando si esegue la sostituzione di immagini del testo, ad es. paragrafi / intestazioni.

Sono sorpreso che nessuno lo abbia ancora menzionato: Transizioni CSS .

Puoi trasferire nativamente l'immagine di sfondo di div:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

Ciò consente di salvare qualsiasi tipo di animazione JavaScript o jQuery per sbiadire i <img/> di src.

Ulteriori informazioni sulle transizioni su MDN .

Le risposte sopra riportate considerano solo l'aspetto del Design. Lo sto elencando in aspetti SEO.

Quando utilizzare <img />

Quando la tua immagine deve essere indicizzata dal motore di ricerca
Se ha relazione con il contenuto, non con il design.
Se l'immagine non è troppo piccola (non immagini iconiche).
Immagini in cui è possibile aggiungere l'attributo alt e title.
Immagini da una pagina Web che si desidera stampare utilizzando i supporti di stampa css

Quando utilizzare i CSS background-image

Immagini utilizzate esclusivamente per la progettazione.
Nessuna relazione con i contenuti.
Immagini piccole che possiamo riprodurre con CSS3.
Ripetizione delle immagini (nell'icona dell'autore del blog, l'icona della data verrà ripetuta per ogni articolo, ecc.).

Come li userò in base a questi motivi. Queste sono buone pratiche di ottimizzazione delle immagini dei motori di ricerca.

I browser non sono sempre impostati per stampare immagini di sfondo per impostazione predefinita; se hai intenzione di fare in modo che le persone stampino la tua pagina :)

Se hai il tuo CSS in un file esterno, è spesso conveniente visualizzare un'immagine che viene utilizzata frequentemente sul sito (come un'immagine di intestazione) come immagine di sfondo, perché in questo modo hai la flessibilità di cambiare l'immagine in un secondo momento .

Ad esempio, supponi di avere il seguente HTML:

<div id="headerImage"></div>

... e CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

Alcuni giorni dopo, si cambia la posizione dell'immagine. Tutto quello che devi fare è aggiornare il CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

Altrimenti, dovresti aggiornare l'attributo src del tag <img> appropriato in ogni file HTML (supponendo che non stai usando un linguaggio di scripting lato server o CMS per automatizzare il processo).

Anche le immagini di sfondo sono utili se non vuoi che l'utente sia in grado di salvare l'immagine (anche se non ho mai avuto bisogno di farlo).

Simile alla risposta di sanchothefat , ma da un aspetto diverso. Mi chiedo sempre: se rimuoverei completamente i fogli di stile dal sito Web, gli elementi rimanenti solo appartengono al contenuto? Se è così, ho fatto bene il mio lavoro.

Alcune risposte complicano troppo lo scenario qui. Questa è una situazione semplice morta.

Rispondi a questa domanda ogni volta che desideri posizionare un'immagine:

Questa parte del contenuto o parte del design?

Se non puoi rispondere, probabilmente non sai cosa stai facendo o cosa vuoi fare!

Inoltre, NON considerare oltre alle due tecniche, solo perché vorresti essere " printer friendly " o no. Inoltre, NON nascondere i contenuti da un punto di vista SEO con CSS. Se ti ritrovi a gestire i tuoi contenuti nei file CSS, ti sei sparato alla gamba. Questa è solo una decisione banale di ciò che è contenuto o no. Ogni altro aspetto dovrebbe essere ignorato.

Vorrei aggiungere altri due argomenti:

Un tag img va bene se devi ridimensionare l'immagine. Per esempio. se l'immagine originale è 100 px per 100 px e si desidera che sia 80 px per 80 px, è possibile impostare la larghezza e l'altezza CSS del tag img. ~~Non conosco alcun buon modo per farlo usando l'immagine di sfondo.~~ EDIT: Questo ora può essere fatto anche con un'immagine di sfondo, usando background-size attributo CSS3.
L'uso di immagine di sfondo è utile quando è necessario passare dinamicamente tra gli sprite . Per esempio. se disponi di un'immagine pulsante e desideri che venga visualizzata un'immagine separata quando il cursore si posiziona sull'elemento, puoi utilizzare un'immagine di sfondo contenente sia gli sprite normali che quelli al passaggio del mouse e modificare dinamicamente la posizione dello sfondo.

Un altro vantaggio derivante dall'uso di < IMG > Il tag è correlato al SEO, ovvero è possibile fornire ulteriori informazioni sull'immagine nell'attributo ALT del tag immagine, mentre non è possibile fornire tali informazioni quando si specifica l'immagine tramite CSS e in tal caso solo il nome del file immagine può essere indicizzato dai motori di ricerca. L'attributo ALT fornisce sicuramente & Lt; IMG & Gt; taggare il vantaggio SEO rispetto all'approccio CSS. Ecco perché secondo me è meglio specificare le immagini che si desidera classificare bene nei risultati della ricerca di immagini (ad es. Google Ricerca immagini) usando & Lt; IMG & Gt; tag.

Primo piano = img.

Sfondo = sfondo CSS.

Utilizza immagini di sfondo solo quando necessario, ad es. contenitori con immagine che piastrella.

Uno dei principali PRO utilizzando IMMAGINI è che è migliore per il SEO .

Utilizzando un'immagine di sfondo, è necessario specificare assolutamente le dimensioni. Questo può essere un problema significativo se non li conosci in anticipo o non riesci a determinarli.

Un grosso problema con <img /> sono gli overlay. Cosa succede se desidero un'ombra CSS interna sulla mia immagine (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? In questo caso, poiché <=> non può avere elementi figlio, è necessario utilizzare il posizionamento e aggiungere elementi vuoti che equivalgono a markup inutili.

In conclusione, è abbastanza situazionale.

Un paio di altri scenari in cui background-image dovrebbe essere usato:

Quando vuoi che l'immagine cambi quando il mouse è su di essa.
~~Quando si desidera aggiungere angoli arrotondati all'immagine. Se si utilizza img, l'immagine fuoriesce dagli angoli arrotondati.~~

Usa l'immagine di sfondo CSS in un caso di più skin o versioni di design. Javascript può essere utilizzato per modificare dinamicamente una classe di un elemento, che lo costringerà a rendere un'immagine diversa. Con un tag IMG, potrebbe essere più complicato.

Ecco una considerazione tecnica: l'immagine verrà generata in modo dinamico? Tende a essere molto più semplice generare il tag <img> in HTML piuttosto che provare a modificare dinamicamente una proprietà CSS.

E le dimensioni dell'immagine? Se uso il tag img, il browser ridimensiona l'immagine. Se uso lo sfondo CSS, il browser taglia solo un pezzo dall'immagine più grande.

Per quanto riguarda l'animazione delle immagini usando CSS TranslateX / Y (Il modo corretto di animare html) - Se esegui una registrazione nella timeline di Chrome delle immagini di sfondo CSS animate rispetto ai tag IMG animati vedrai che i tempi di pittura sono drasticamente più brevi per le immagini di sfondo CSS.

C'è un altro motivo! Se si dispone di un design reattivo e si desidera dividere l'utilizzo di immagini a bassa, media e alta risoluzione per dispositivi tramite query multimediali, è necessario utilizzare anche gli sfondi.

Inoltre, ho una sezione della galleria che ha dimensioni dell'immagine incoerenti, quindi anche se quelle immagini sono ovviamente considerate contenuto, io uso immagini di sfondo e le centro in div con una dimensione impostata. Questo è simile a quello che fa Facebook nei loro album ..

img è un tag html per un motivo, quindi dovrebbe essere usato. Per fare riferimento o per illustrare cose, persone ad esempio: negli articoli.

Anche se l'immagine ha un significato o deve essere cliccabile, un img è migliore di uno sfondo css . Per tutte le altre situazioni, penso, può essere utilizzato uno sfondo CSS .

Anche se, è un argomento che deve essere discusso più volte.

Studente web da Parigi, Francia

Basta aggiungerne uno piccolo, dovresti usare il tag img se vuoi che gli utenti siano in grado di "fare clic con il tasto destro" e "salva immagine" / "salva immagine", quindi se intendi fornire l'immagine come una risorsa per gli altri.

L'uso dell'immagine di sfondo disabilita (per quanto ne so sulla maggior parte dei browser) l'opzione per salvare l'immagine direttamente.

Un piccolo input, Ho avuto problemi con le immagini reattive che rallentavano il rendering su iPhone fino a un minuto, anche con immagini piccole:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

Ma quando si passa all'utilizzo delle immagini di sfondo il problema è scomparso, questo è praticabile solo se si punta ai browser più recenti.

IMG carica prima perché src si trova nel file html stesso mentre nel caso di background-image la fonte è menzionata nel foglio di stile, quindi l'immagine viene caricata dopo il caricamento del foglio di stile, ritardando il caricamento della pagina web.

HTML è per contenuti e CSS per design. L'immagine è necessaria e deve essere raccolta dagli screen reader? Se la risposta è sì, inserisci l'immagine in HTML. Se è puramente per lo stile, è possibile utilizzare la proprietà immagine di sfondo nei CSS per iniettare l'immagine. Proprio come molte persone qui hanno già menzionato, puoi usare uno pseudo elemento sull'immagine se vuoi.

Si noti inoltre che la maggior parte degli spider dei motori di ricerca non indicizza le immagini di sfondo CSS, pertanto le immagini di sfondo verranno ignorate e non sarà possibile ottenere alcun traffico dai motori di ricerca (nessun vantaggio SEO in breve).

Dove tutte le immagini definite con i tag sono indicizzate (se non escluse manualmente) e possono portare traffico dai motori di ricerca se i loro attributi titolo / alt e nomi dei file sono ottimizzati correttamente (senza una parola chiave).

È possibile utilizzare i tag IMG se si desidera che le immagini siano fluide e ridimensionate su schermi di dimensioni diverse. Per me queste immagini sono per lo più parte del contenuto. Per la maggior parte degli elementi che non fanno parte del contenuto, utilizzo gli sprite CSS per ridurre al minimo le dimensioni del download a meno che non voglia davvero animare icone ecc.

Uso l'immagine anziché l'immagine di sfondo quando voglio renderli estensibili al 100% e supportati nella maggior parte dei browser.

Se vuoi aggiungere un'immagine solo per il contenuto speciale della pagina o per una sola pagina, dovresti usare il tag IMG e se vuoi mettere l'immagine su più di una pagina, allora dovresti usare CSS Background Image.

Un'altra PRO di immagine di sfondo: immagini di sfondo per gli elenchi <ul> / <ol>.

Usa le immagini di sfondo se fanno parte del disegno complessivo e sono ripetute su più pagine. Preferibilmente in forma di sprite in background per l'ottimizzazione.

Usa i tag per tutte le immagini che non fanno parte del design complessivo e che molto probabilmente vengono posizionate una volta, come immagini specifiche per articoli, persone e immagini importanti che meritano di essere aggiunte a immagini di Google.

** L'unica immagine ripetuta che allego in un tag <img> è il logo del sito / dell'azienda. Poiché le persone tendono a fare clic su di esso per accedere alla home page, quindi la avvolgi con un <a> tag.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow