wake-up-neo.net

Quando usare IMG vs. CSS background-image?

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

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

779
system PAUSE

Usi propri di IMG

  1. Utilizzare IMG se si intende avere persone stampare la pagina e si desidera che l'immagine sia inclusa per impostazione predefinita. - JayTee
  2. Utilizzare IMG (con alt text) quando l'immagine ha un significato semantico importante, come un'icona di avviso . Ciò garantisce che il significato dell'immagine possa essere comunicato a tutti gli user-agent, inclusi gli screen reader.

Usi pragmatici di IMG

  1. Usa IMG più attributo alt se l'immagine è parte del contenuto come un logo o un diagramma o una persona (persona reale, non persone di stock di stock). - sanchothefat
  2. Usa IMG se ti affidi al ridimensionamento del browser per rendere un'immagine in proporzione alle dimensioni del testo.
  3. Usa IMG per più immagini di sovrapposizione in IE6 .
  4. Usa IMG con un z-index per allungare un'immagine di sfondo per riempire la sua intera finestra.
    Nota, questo non è più vero con la dimensione dello sfondo CSS3; vedere # 6 di seguito.
  5. L'utilizzo di img invece di background-image può migliorare notevolmente le prestazioni delle animazioni su uno sfondo.

Quando usare l'immagine di sfondo CSS

  1. Usa le immagini di sfondo CSS se l'immagine non fa parte del contenuto . - sanchothefat
  2. Usa le immagini di sfondo CSS quando fai sostituzione dell'immagine del testo ad es. paragrafi/intestazioni. - sanchothefat
  3. Usa background-image se intendi avere persone stampa la pagina e non vuoi che l'immagine sia inclusa di default. - JayTee
  4. Usa background-image se hai bisogno di migliorare i tempi di download, come con CSS sprites .
  5. Usa background-image se è necessario che solo una parte dell'immagine sia visibile, come negli sprites CSS.
  6. Usa background-image con background-size:cover per allungare un'immagine di sfondo per riempire l'intera finestra.
737
system PAUSE

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

L'altro tempo per usare le immagini di sfondo CSS è quando si fa la sostituzione dell'immagine del testo, ad es. paragrafi/intestazioni.

276
roborourke

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

È possibile passare in modo nativo all'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);
}

Questo salva qualsiasi tipo di JavaScript o animazione jQuery per svanire un src di <img/>.

Maggiori informazioni sulle transizioni su MDN .

104
Robbie JW

Sopra le risposte considera solo l'aspetto del design. Lo sto elencando in aspetti SEO.

Quando usare <img />

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

Quando usare CSS background-image

  1. Immagini puramente utilizzate per la progettazione.
  2. Nessuna relazione con il contenuto.
  3. Piccole immagini che possiamo giocare con CSS3.
  4. 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 dei motori di ricerca delle immagini.

63
subhash

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

49
JayTee

Se hai il tuo CSS in un file esterno, allora è spesso conveniente visualizzare un'immagine che viene usata frequentemente attraverso il sito (come un'immagine di intestazione) come immagine di sfondo, perché allora hai la flessibilità di cambiare l'immagine in seguito.

Ad esempio, supponiamo di avere il seguente codice HTML:

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

... e CSS:

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

Qualche giorno dopo, cambi la posizione dell'immagine. Tutto ciò 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 tu non stia utilizzando 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).

48
Steve Harrison

Circa lo stesso di risposta di sanchothefat , ma da un aspetto diverso. Mi chiedo sempre: se rimuoverò completamente i fogli di stile dal sito Web, i restanti elementi only appartengono al contenuto? Se è così, ho fatto bene il mio lavoro.

44
Török Gábor

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

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

Questa parte del contenuto o parte del design?

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

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

40
Dyin

Vorrei aggiungere altri due argomenti:

  • Un tag img è utile se è necessario ridimensionare l'immagine. Per esempio. se l'immagine originale è 100px per 100 px e vuoi che sia 80px per 80px, puoi impostare la larghezza e l'altezza CSS del tag img. Non conosco un buon modo per farlo usando l'immagine di sfondo. EDIT: ora può anche essere fatto con un'immagine di sfondo, usando l'attributo background-size CSS3.

  • L'utilizzo di background-image è utile quando è necessario passare dinamicamente tra sprite. Per esempio. se si dispone di un'immagine di un pulsante e si desidera visualizzare un'immagine separata quando il cursore passa con il mouse sopra l'elemento, è possibile utilizzare un'immagine di sfondo contenente gli sprite normali e di passaggio del mouse e modificare dinamicamente la posizione dello sfondo.

27

Un altro vantaggio dell'uso del tag <IMG> è legato al SEO - cioè è possibile fornire ulteriori informazioni sull'immagine nell'attributo ALT del tag immagine, mentre non c'è modo di fornire tali informazioni quando si specifica l'immagine tramite CSS e in questo caso solo il nome del file immagine può essere indicizzato dai motori di ricerca. L'attributo ALT fornisce sicuramente il vantaggio SEO del tag <IMG> rispetto all'approccio CSS. Ecco perché secondo me è meglio specificare le immagini che desideri classificare bene nei risultati della ricerca di immagini (ad esempio Google Image Search) utilizzando il tag <IMG>.

17
Pavel Vladov

Primo piano = immagine.

Sfondo = sfondo CSS.

17
cjk

Utilizza le immagini di sfondo solo quando necessario, ad es. contenitori con l'immagine che tessere.

Uno dei principali PRO utilizzandoIMMAGINIè che è meglio per SEO .

14
Marc Uberstein

Usando un'immagine di sfondo, devi assolutamente specificare le dimensioni. Questo può essere un problema significativo se in realtà non li conosci in anticipo o non li puoi determinare.

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

In conclusione, è abbastanza situazionale.

12
Mat

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

  • Quando vuoi che l'immagine cambi quando il mouse è sopra di esso.
  • Quando si desidera aggiungere angoli arrotondati all'immagine. Se usi img, l'immagine fuoriesce dagli angoli arrotondati.
11
Behrang

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

9
MK_Dev

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

8
Bryan M.

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 le query multimediali, è necessario utilizzare anche gli sfondi.

7
Maarten

E la dimensione dell'immagine? Se utilizzo il tag img, il browser ridimensiona l'immagine. Se utilizzo lo sfondo css, il browser taglia semplicemente un blocco dall'immagine più grande.

7
anonymous

Per quanto riguarda l'animazione delle immagini usando CSS TranslateX/Y (Il modo corretto per animare html) - Se si esegue una registrazione della Timeline di Chrome di immagini di sfondo CSS animate rispetto ai tag IMG animati si vedranno i tempi di pittura drasticamente più brevi per il CSS sfondo-immagini.

7
eivers88

Inoltre, ho una sezione galleria che ha dimensioni delle immagini incoerenti quindi anche se quelle immagini sono ovviamente considerate dei contenuti, io uso le immagini di sfondo e le centriamo in div con una dimensione impostata. Questo è simile a ciò che Facebook fa nei loro album ..

6
Chris

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

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

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

Studente Web di Parigi, Francia

6
user589956

Un piccolo input, ho avuto problemi con immagini reattive che rallentano il rendering su iPhone fino a un minuto, anche con immagini di piccole dimensioni:

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

Ma quando si passa a utilizzare le immagini di sfondo il problema è andato via, questo è possibile solo se si rivolge ai browser più recenti.

5
winthers

Solo un piccolo da aggiungere, dovresti usare il tag img se vuoi che gli utenti siano in grado di "fare clic con il pulsante destro del mouse" e "salva-immagine"/"salva-immagine", quindi se intendi fornire l'immagine come risorsa per altri.

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

5
dougajmcdonald

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

4

HTML è per il contenuto e il CSS è per il design. L'immagine è necessaria e deve essere rilevata dagli screen reader? Se la risposta è sì, quindi inserire l'immagine nel codice HTML. Se è puramente per lo styling, quindi è possibile utilizzare la proprietà background-image in CSS per iniettare l'immagine. Proprio come molte persone hanno già menzionato, puoi quindi usare uno pseudo elemento sull'immagine se lo desideri.

3
carltonstith

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 (a meno che non siano escluse manualmente) e possono portare traffico dai motori di ricerca se i loro attributi titolo/alt e nomi di file sono ottimizzati correttamente (con alcune parole chiave).

3
Nadeem Khan

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 un'immagine su più di una pagina, dovresti usare l'immagine di sfondo CSS.

2
Vishal Gupta

Un altro background-image PRO: immagini di sfondo per <ul>/<ol> lists.

Usa le immagini di sfondo se fanno parte del design generale e vengono ripetute su più pagine. Preferibilmente in forma Sprite in background per l'ottimizzazione.

Utilizza i tag per tutte le immagini che non fanno parte del design generale e che molto probabilmente verranno posizionate una volta, come immagini specifiche per articoli, persone e immagini importanti che meritano di essere aggiunte a immagini google.

** L'unica immagine ripetuta che includo in un tag <img> è il logo del sito/dell'azienda. Perché le persone tendono a fare clic su di esso per andare alla homepage, quindi lo si avvolge con un tag <a>.

2
Gillian Lo Wong

Io uso l'immagine invece dell'immagine di sfondo quando voglio renderli estensibili al 100%, che sono supportati nella maggior parte dei browser.

2
max

È possibile utilizzare i tag IMG se si desidera che le immagini siano fluide e scalabili a diverse dimensioni dello schermo. 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 mantenere le dimensioni di download minime, a meno che non voglia veramente animare le icone, ecc.

2
shingokko

Solo per lanciare una chiave inglese nei lavori - sono dell'opinione che non dovresti mai usare il tag img. HTML era pensato per il contenuto, non per lo stile visivo. tutte le immagini sulla tua pagina dovrebbero provenire dal CSS, lasciando puro il tuo codice HTML. (anche se ci vuole un po 'più tempo per costruire)

0
Big Coops