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

In quali situazioni è più appropriato utilizzare un IMGtag HTML 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à.

Usi corretti di IMG

1. Utilizzare IMGse si desidera che le persone stampino la tua pagina e desideri che l'immagine venga inclusa per impostazione predefinita. - JayTee
2. Utilizzare IMG(con alttesto) 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

1. Utilizzare l' IMGattributo più alt se l'immagine fa parte del contenuto, ad esempio un logo, un diagramma o una persona (persona reale, non persone di archivio fotografico). - sanchothefat
2. Utilizzare IMGse si fa affidamento sul ridimensionamento del browser per eseguire il rendering di un'immagine in proporzione alla dimensione del testo.
3. Utilizzare IMG per più immagini overlay in IE6 .
4. Utilizzare IMGcon z-indexa per 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.
5. L'utilizzo imginvece di background-imagepuò migliorare notevolmente le prestazioni delle animazioni su uno sfondo.

Quando utilizzare l'immagine di sfondo CSS

1. Usa immagini di sfondo CSS se l'immagine non fa parte del contenuto . - sanchothefat
2. Usa immagini di sfondo CSS quando esegui la sostituzione di immagini del testo, ad es. paragrafi / intestazioni. - sanchothefat
3. Utilizzare background-imagese si desidera che le persone stampino la pagina e non si desidera che l'immagine venga inclusa per impostazione predefinita. - JayTee
4. Utilizzare background-imagese è necessario migliorare i tempi di download, come con gli sprite CSS .
5. Utilizzare background-imagese è necessario che solo una parte dell'immagine sia visibile, come con gli sprite CSS.
6. Utilizzare background-imagecon background-size:coverper allungare un'immagine di sfondo per riempire l'intera finestra.

È 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 <img />tag 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 ne abbia ancora parlato: transizioni CSS .

Puoi trasferire nativamente l' divimmagine di sfondo di un:

#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 risparmiare ogni tipo di JavaScript o jQuery animazione a svanire un <img/>'s src.

Ulteriori informazioni sulle transizioni su MDN .

Le risposte di cui sopra considerano solo l'aspetto del design. Lo sto elencando in aspetti SEO.

Quando usare <img />

1. Quando la tua 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 alte titleattribuire.
5. Immagini da una pagina Web che si desidera stampare utilizzando i supporti di stampa css

Quando utilizzare i CSS background-image

1. Immagini utilizzate esclusivamente per la progettazione.
2. Nessuna relazione con il contenuto.
3. Piccole immagini che possiamo riprodurre 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ò sulla base di questi motivi. Queste sono buone pratiche di ottimizzazione delle immagini da parte dei motori di ricerca.

I browser non sono sempre impostati per stampare immagini di sfondo per impostazione predefinita; se hai intenzione di far stampare la tua pagina alle persone :)

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 modificare l'immagine in un secondo momento.

Ad esempio, supponiamo di avere il seguente HTML:

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

... e CSS:

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

Pochi 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' srcattributo del <img>tag 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).

Quasi uguale alla risposta di sanchothefat , ma da un aspetto diverso. Mi chiedo sempre: se rimuovessi completamente i fogli di stile dal sito Web, gli elementi rimanenti appartengono solo 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 riesci a rispondere a questa domanda, probabilmente non sai cosa stai facendo o cosa vuoi fare!

Inoltre, NON considerare oltre alle due tecniche, solo perché vorresti essere "amico della stampante" o meno. 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 è utile se è necessario ridimensionare l'immagine. Ad 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 può ora essere fatto anche con un'immagine di sfondo, usando l' background-sizeattributo CSS3.

• L'uso dell'immagine di sfondo è utile quando è necessario passare dinamicamente da uno sprite all'altro . Ad esempio, se si dispone di un'immagine del pulsante e si desidera visualizzare un'immagine separata quando il cursore si sposta sull'elemento, è possibile utilizzare un'immagine di sfondo contenente sia gli sprite normali che quelli al passaggio del mouse e modificare dinamicamente la posizione dello sfondo.

Un ulteriore vantaggio derivante dall'uso del tag <IMG> è legato 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 quello caso solo il nome del file immagine può essere indicizzato dai motori di ricerca. L'attributo ALT offre sicuramente il vantaggio SEO <IMG> 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) utilizzando il tag <IMG>.

Primo piano = img.

Sfondo = sfondo CSS.

Utilizzare le immagini di sfondo solo quando necessario, ad esempio contenitori con immagini che tessono.

Uno dei principali PRO utilizzando IMMAGINI è che è meglio per la 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 /> è rappresentato dalle sovrapposizioni. Cosa succede se desidero un'ombra interna CSS sull'immagine ( box-shadow:inset 0 0 5px rgb(0,0,0,.5))? In questo caso, poiché <img />non possono 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-imagedovrebbe essere utilizzato:

• Quando si desidera che l'immagine cambi quando si passa 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 <img>tag in HTML piuttosto che provare a modificare dinamicamente una proprietà CSS.

E la dimensione 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 il CSS sfondo-immagini.

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 es .: 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, uno sfondo css può usare .

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

Studente web da Parigi, Francia

Solo un piccolo da aggiungere, 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 risorsa per 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.

IMGcaricare prima perché srcè nel file html stesso mentre nel caso del background-imagesorgente è menzionato 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.

Inoltre, 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 sarai in grado di ottenere traffico dai motori di ricerca (nessun vantaggio SEO in breve).

Dove tutte le immagini definite con i tag sono indicizzate (a meno che non vengano escluse manualmente) e possono portare traffico dai motori di ricerca se i loro attributi titolo / alt e nomi dei file sono ottimizzati correttamente (scrivere qualche 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%, 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 l'immagine di sfondo CSS.

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

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 alle immagini di Google.

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