Quando usar IMG vs. CSS background-image?

777

Em que situações é mais apropriado usar uma IMGtag HTML para exibir uma imagem, em oposição a um CSS background-image, e vice-versa?

Os fatores podem incluir acessibilidade, suporte ao navegador, conteúdo dinâmico ou qualquer tipo de limites técnicos ou princípios de usabilidade.

sistema PAUSA
fonte
Você precisa da imagem para ocupar espaço ou deseja escrever sobre ela?
geowa4
9
Como uma atualização, uma vez que essa classificação é muito alta no Google, o dimensionamento do navegador e o alongamento de imagem para imagem de fundo agora são possíveis e são amplamente suportados (IE8 e abaixo, é claro, sendo a exceção), tornando os itens 4 e 7 discutíveis nos casos que pode permitir um fallback ou ignorar esse efeito no IE8 e abaixo. caniuse.com/#search=background-image
Shauna
post excelente e útil, vou adicionar uma pergunta para a comparação, a vantagem do css é também os efeitos do hover? isso pode ser replicado usando tags img?
ericosg
Geralmente, adiciono o atributo alt e o atributo title a todas as imagens de conteúdo. Isso não é preferível?
HartleySan
2
Também img pode ter mapa com áreas clicáveis e dicas
Vitim.us

Respostas:

797

Usos adequados do IMG

  1. Use IMGse você deseja que as pessoas imprimam sua página e deseja que a imagem seja incluída por padrão. - JayTee
  2. Use IMG(com alttexto) quando a imagem tiver um significado semântico importante, como um ícone de aviso . Isso garante que o significado da imagem possa ser comunicado em todos os agentes do usuário, incluindo leitores de tela.

Usos pragmáticos do IMG

  1. Use o IMGatributo plus alt se a imagem fizer parte do conteúdo , como um logotipo ou diagrama ou pessoa (pessoa real, não pessoas que armazenam fotos). - sanchothefat
  2. Use IMGse você confiar na escala do navegador para renderizar uma imagem em proporção ao tamanho do texto.
  3. Use IMG para várias imagens de sobreposição no IE6 .
  4. Use IMGcom a z-indexpara esticar uma imagem de fundo para preencher sua janela inteira.
    Observe que isso não é mais verdade no tamanho do plano de fundo CSS3; veja # 6 abaixo.
  5. Usar em imgvez de background-imagepode melhorar drasticamente o desempenho das animações em um plano de fundo.

Quando usar a imagem de plano de fundo CSS

  1. Use imagens de plano de fundo CSS se a imagem não fizer parte do conteúdo . - sanchothefat
  2. Use imagens de fundo CSS ao fazer a substituição da imagem do texto, por exemplo. parágrafos / cabeçalhos. - sanchothefat
  3. Use background-imagese você deseja que as pessoas imprimam sua página e não deseja que a imagem seja incluída por padrão. - JayTee
  4. Use background-imagese você precisar melhorar os tempos de download, como nos sprites CSS .
  5. Use background-imagese você precisar que apenas uma parte da imagem fique visível, como nos sprites CSS.
  6. Use background-imagewith background-size:coverpara esticar uma imagem de fundo para preencher toda a janela.
PAUSE do sistema
fonte
3
Ainda estou duvidoso nas imagens de fundo da peça de substituição de texto. Vejo pessoas usando imagens de fundo e recuo de texto: -9999px para o texto. No entanto, eu sei que ter recuos de texto como esse costumava ser ruim para o SEO e imagino que ainda deva ser para alguns mecanismos de pesquisa. Mas o mais importante é que, se você desativar as imagens, mas deixar o css, a imagem desaparecerá, mas o texto ainda estará fora da tela. No que me diz respeito, o texto alternativo de uma imagem é para se as imagens não forem exibidas, então as tags img são melhores.
22811 Scott Reed
53
Use pragmática imagem backbround de : Quando você não quer cabelos soltos sobre os problemas centralização vertical (de imagens de tamanho variável vertical);)
Frank Nocke
12
Sim, problemas de centralização vertical - use o Flexbox!
Dean_Wilson
3
@BinaryFunt - <div class="my-css-page-styles" style="background-image:url(blah.png);"></div>Dessa forma, você pode estilizá- lo em sua folha de estilo CSS, mas se a imagem de plano de fundo é mais uma questão de conteúdo do que estilo, você ainda a está editando do lado HTML.
perfil completo de Jimbo Jonny
2
Parece haver um clickbait no ponto 5 dos usos pragmáticos do IMG - apontando para uma postagem no blog japonesa sobre cosméticos. o link é www.ajaxline.com/browsers-performance-in-dependence-of-html-coding [NÃO CLIQUE
Nisto
292

É uma decisão em preto e branco para mim. Se a imagem fizer parte do conteúdo, como um logotipo, diagrama ou pessoa (pessoa real, não pessoas que fazem fotos), use o <img />atributo tag plus alt. Para todo o resto, há imagens de fundo CSS.

O outro momento para usar imagens de fundo CSS é ao fazer a substituição da imagem do texto, por exemplo. parágrafos / cabeçalhos.

roborourke
fonte
Excelente caso! CON - Use a imagem de fundo ao fazer a substituição da imagem do texto.
system PAUSE
2
Esse é um argumento justo, mas certamente a substituição da imagem do texto (por exemplo, para um cabeçalho) exigiria a adição de um "alt" para que os leitores de tela o leiam? Ou, caso as imagens não sejam exibidas, você ainda recebe o título? Sim, um título e um estilo seriam melhores, mas com certeza você quer o texto?
Theo Scholiadis 19/04
4
@TheoScholiadispor substituição de imagem não significa usar uma imagem em vez de texto, mas ocultar o texto de alguma forma usando CSS e fornecer a imagem como plano de fundo usando CSS. O documento permanece semanticamente intocado.
precisa saber é o seguinte
57
Pessoalmente, odeio quando não consigo copiar "texto" porque na verdade é uma imagem. Chame-me preguiçoso mas hey ...
Shaz
1
Quando você precisar de uma imagem para fins de SEO, use a tag img com o atributo alt. Caso contrário, use a imagem em segundo plano usando css.
Super Model
107

Estou surpreso que ninguém tenha mencionado isso ainda: transições CSS .

Você pode fazer a transição nativa da divimagem de plano de fundo de uma:

#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);
}

Isso economiza qualquer tipo de JavaScript ou jQuery animação a desvanecer-se um <img/>'s src.

Mais informações sobre transições no MDN .

Robbie JW
fonte
3
Essa não é uma boa razão. Você poderia ter um div com 2 imagens Overlayed, ea seguinte css: #some_div { transition: opacity 0.5s; }, #some_div:hover #top_img { opacity: 0; }
warkentien2
5
Se você ler esse artigo vinculado do MDN (ou as especificações do w3c), descobrirá que a imagem de plano de fundo NÃO é uma das propriedades que pode ser animada e que qualquer navegador que faça isso (chrome) não está seguindo os padrões da web. Dito isto, acho que deveria ser, e é um efeito fácil e agradável, por isso estou desapontado por não fazer parte do padrão.
Robert McKee
73

As respostas acima consideram apenas o aspecto Design. Estou listando-o em aspectos de SEO.

Quando usar <img />

  1. Quando sua imagem precisa ser indexada pelo mecanismo de pesquisa
  2. Se tem relação com o conteúdo para não projetar.
  3. Se sua imagem não for muito pequena (não são imagens icônicas).
  4. Imagens onde você pode adicionar alte titleatribuir.
  5. Imagens de uma página da Web que você deseja imprimir usando a mídia de impressão css

Quando usar CSS background-image

  1. Imagens usadas puramente para projetar.
  2. Nenhuma relação com o conteúdo.
  3. Imagens pequenas que podemos jogar com CSS3.
  4. Repetindo imagens (no ícone do autor do blog, o ícone da data será repetido para cada artigo, etc.).

Como eu vou usá-los com base nessas razões. Essas são boas práticas de otimização de imagens de mecanismo de pesquisa.

subhash
fonte
54

Os navegadores nem sempre estão configurados para imprimir imagens de fundo por padrão; se você pretende que as pessoas imprimam sua página :)

JayTee
fonte
9
Soa como: PRO - Use IMG se desejar que a imagem seja impressa por padrão. CON - Use a imagem de fundo se não desejar que a imagem seja impressa por padrão. Agradável!
system PAUSE
7
Penso que a ideia é ter estilos CSS apenas de impressão separados que ocultem as imagens ou as alterem para algo mais apropriado.
Blazemonger
52

Se você tiver seu CSS em um arquivo externo, geralmente é conveniente exibir uma imagem usada com frequência em todo o site (como uma imagem de cabeçalho) como imagem de plano de fundo, porque você tem a flexibilidade de alterar a imagem posteriormente.

Por exemplo, digamos que você tenha o seguinte HTML:

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

... e CSS:

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

Alguns dias depois, você altera a localização da imagem. Tudo que você precisa fazer é atualizar o CSS:

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

Caso contrário, você precisará atualizar o srcatributo da <img>tag apropriada em todos os arquivos HTML (supondo que você não esteja usando uma linguagem de script do servidor ou CMS para automatizar o processo).

As imagens de fundo também são úteis se você não quiser que o usuário possa salvar a imagem (embora eu nunca precisei fazer isso).

Steve Harrison
fonte
14
As imagens de plano de fundo certamente podem ser salvas com alguma fonte mínima de visualização, apenas não com a mesma facilidade que clicar com o botão direito do mouse em uma imagem.
Michael Hackner
2
Raposa de fogo. Clique com o botão direito do mouse. "Ver imagem de fundo". Não é tão difícil.
TRiG
1
@TRiG A menos que haja uma sobreposição transparente ou modificação no menu de contexto específico da página para impedir que você faça isso. Eu já vi isso antes e, na minha opinião, é muito bobo, porque você nem precisa digitar o código-fonte, se a página estiver totalmente carregada, no Firefox, pelo menos, você pode clicar em Ferramentas> Informações da página / alt + t, i / clique com o botão direito do mouse e selecione Exibir informações da página, navegue até a seção Mídia e salve todos os itens que deseja da lista. Obviamente, existem maneiras de evitar isso, como incorporar a imagem em um arquivo Flash ou outros truques estranhos, mas mesmo esses podem ser ignorados ou explicados.
JAB
Eu acho que a técnica de fundo não é muito bom para negar um usuário para salvar a imagem ...
ncubica
45

Quase o mesmo que a resposta de sanchothefat , mas sob um aspecto diferente. Eu sempre me pergunto: se eu removeria completamente as folhas de estilo do site, os elementos restantes pertencem apenas ao conteúdo? Nesse caso, fiz bem meu trabalho.

viam0Zah
fonte
42

Algumas respostas complicam demais o cenário aqui. Esta é uma situação bastante simples.

Responda a esta pergunta sempre que quiser colocar uma imagem:

Isso faz parte do conteúdo ou parte do design?

Se você não puder responder, provavelmente não sabe o que está fazendo ou o que deseja fazer!

Além disso, NÃO considere além das duas técnicas, apenas porque você gostaria de ser "amigável para impressão" ou não. Também NÃO oculte o conteúdo do ponto de vista de SEO com CSS. Se você se encontra gerenciando seu conteúdo em arquivos CSS, dá um tiro na perna. Esta é apenas uma decisão trivial sobre o que é conteúdo ou não. Todos os outros aspectos devem ser ignorados.

Dyin
fonte
Eu gosto desta resposta. Está muito claro. Os problemas restantes, como impressão ou SEO, devem ser considerados individualmente em cada cenário.
Juan Herrera
28

Eu acrescentaria outros dois argumentos:

  • Uma tag img é boa se você precisar redimensionar a imagem. Por exemplo, se a imagem original tiver 100 px por 100 px e você desejar 80 px por 80 px, poderá definir a largura e a altura CSS da tag img. Não conheço nenhuma boa maneira de fazer isso usando a imagem de fundo. EDIT: Agora isso também pode ser feito com uma imagem de plano de fundo, usando o background-sizeatributo CSS3.

  • Usar imagem de fundo é bom quando você precisa alternar dinamicamente entre sprites . Por exemplo, se você possui uma imagem de botão e deseja exibir uma imagem separada quando o cursor está passando o mouse sobre o elemento, você pode usar uma imagem de plano de fundo contendo os sprites normais e de foco, e alterar dinamicamente a posição do plano de fundo.

Anders Rabo Thorbeck
fonte
2
Essa é uma resposta muito boa, principalmente o ponto de redimensionamento. As pessoas argumentam que você pode usar o tamanho do plano de fundo, mas se você está tentando oferecer suporte a navegadores antigos, não é necessariamente o melhor caminho.
Dudewad
1
Esta é a forma como é feito em CSSbackground-size: 80px 80px;
Kareem
2
Obrigado @Kareem. Vejo que isso foi introduzido no CSS3, que ainda não existia quando eu respondi originalmente. Eu editei minha resposta para refletir isso.
Anders Rabo Thorbeck
Eu acho importante notar que o redimensionamento de fotos pode ser complicado em termos de pixelização ou interpolação. Sempre que possível, eu não redimensionaria mais de 40% (e isso é um exagero - 20% é padrão) sem trazer sua imagem para um software de imagem fotográfica para ser redimensionada adequadamente sem perder a qualidade. A qualidade do DPI pode ser importante aqui se não houver informações suficientes para esticar e preencher a quantidade alocada de pixels.
Dale landry #:
18

Mais um benefício do uso da marca <IMG> está relacionado ao SEO - ou seja, você pode fornecer informações adicionais sobre a imagem no atributo ALT da marca de imagem, enquanto não há como fornecer essas informações ao especificar a imagem por meio de CSS e caso apenas o nome do arquivo de imagem possa ser indexado pelos mecanismos de pesquisa. O atributo ALT definitivamente oferece a vantagem de SEO da tag <IMG> sobre a abordagem CSS. É por isso que, na minha opinião, é melhor especificar as imagens que você deseja classificar bem nos resultados da pesquisa de imagens (por exemplo, Pesquisa de imagens do Google) usando a tag <IMG>.

Pavel Vladov
fonte
background-images Os valores ALT podem ser definidos no mapa do site. google.com/schemas/sitemap-image/1.1
Kareem
17

Primeiro plano = img.

Background = CSS background.

cjk
fonte
5
Claro, mas e o pequeno indicador de seta para baixo ao lado do botão "menu" ou outros elementos desse tipo. Como você classifica esse primeiro plano ou plano de fundo?
Dudewad
@dudewad Eu diria que primeiro plano, porque eles estão (visualmente) na camada "superior" da página, sobrepostos a outros elementos.
Jkdev 18/05
14

Use imagens de fundo apenas quando necessário, por exemplo, contêineres com a imagem que é lado a lado.

Um dos principais PROS usando IMAGES é que é melhor para SEO .

Marc Uberstein
fonte
3
Provavelmente porque você pode usar o atributo alt.
David
4
Isso não depende de você querer SEO para essa imagem específica? Não vejo por que você procuraria o SEO em uma imagem que faz parte do estilo da página, não do conteúdo (por exemplo, um ícone de email na sua página de contato). Então, na verdade, prefiro mudar sua declaração. Use IMAGES somente quando necessário (relacionado ao conteúdo, à impressão e / ou ao SEO).
Volzy
12

Usando uma imagem de fundo, você precisa especificar absolutamente as dimensões. Isso pode ser um problema significativo se você realmente não os conhecer com antecedência ou não puder determiná-los.

Um grande problema <img />é com sobreposições. E se eu quiser uma sombra interna CSS na minha imagem ( box-shadow:inset 0 0 5px rgb(0,0,0,.5))? Nesse caso, como <img />não pode ter elementos filho, você precisa usar o posicionamento e adicionar elementos vazios, o que equivale a marcação inútil.

Em conclusão, é bastante situacional.

Mat
fonte
11

Alguns outros cenários onde background-imagedevem ser usados:

  • Quando você deseja que a imagem mude quando o mouse passa o mouse sobre ela.
  • Quando você deseja adicionar cantos arredondados à imagem. Se você usar img, a imagem vazará pelos cantos arredondados.
Behrang
fonte
Na verdade, você pode:img { border-radius: 10px; }
Rafff 08/08/14
@RafcioKowalsky você está correto. Não consigo lembrar as condições exatas em que border-radiusnão estava funcionando.
Behrang Saeedzadeh
10

Use CSS background-image em um caso de várias capas ou versões de design. Javascript pode ser usado para alterar dinamicamente uma classe de um elemento, o que forçará a renderizar uma imagem diferente. Com uma tag IMG, pode ser mais complicado.

MK_Dev
fonte
você pode alterar dinamicamente o atributo src de uma tag de imagem também, apenas tão fácil como mudar uma classe
roborourke
3
@sanchothefat, é verdade, no entanto, neste caso, a fonte da imagem precisaria ser mantida em JS em vez de CSS. O arquivo css da IMO seria mais apropriado para manter o nome do arquivo.
23409 MK_Dev
7

Aqui está uma consideração técnica: a imagem será gerada dinamicamente? Tende a ser muito mais fácil gerar a <img>tag em HTML do que tentar editar dinamicamente uma propriedade CSS.

Bryan M.
fonte
1
E quanto aos estilos embutidos? Esta questão realmente não deve ser decidida por essa idéia.
Viam0Zah
talvez eu deva dizer assim: você prefere trabalhar com um elemento DOM ou um atributo de elemento?
Bryan M.
provavelmente vale a pena considerar bacl em '09, mas com o jQuery isso dificilmente é um problema. É ainda mais fácil e mais fluido alternar css ou classes em um elemento do que alternar elementos.
dfherr
7

E o tamanho da imagem? Se eu usar a tag img, o navegador dimensionará a imagem. Se eu usar o plano de fundo css, o navegador apenas corta um pedaço da imagem maior.


fonte
7

Em relação à animação de imagens usando CSS TranslateX / Y (a maneira correta de animar html) - Se você fizer uma gravação na Linha do tempo do Chrome de imagens de plano de fundo do CSS sendo animadas versus tags IMG sendo animadas, verá que os tempos de pintura são drasticamente mais curtos para o CSS imagens de fundo.

eivers88
fonte
7

Há outra razão! Se você possui um design responsivo e deseja dividir o uso de imagens de baixa, média e alta resolução para dispositivos por meio de consultas de mídia, também deve usar fundos.

Maarten
fonte
1
Maarten, Terscheling não é Pipeable Ouvi de Vincent Willems. Então, como você acha que pode trabalhar em PyMOL
Mehdi Nellen
1
Por favor, consulte a documentação sobre o quão pipeable é pieterpeitshoeve.nl/rondleiding #
Maarten
@ Maarteen, acho que agora isso pode ser feito usando tags de imagem e fonte html 5
Tick20
6

Além disso, eu tenho uma seção da galeria que tem tamanhos de imagem inconsistentes, mesmo que essas imagens sejam obviamente consideradas conteúdo, eu uso imagens de fundo e as centralizo em divs com um tamanho definido. Isso é semelhante ao que o facebook faz em seus álbuns.

Chris
fonte
6

img é uma tag html por um motivo, portanto deve ser usada. Para referenciar ou ilustrar coisas, pessoas, por exemplo: em artigos.

Além disso, se a imagem tiver um significado ou precisar ser clicável, um img é melhor que um plano de fundo css . Para todas as outras situações, eu acho, um background em CSS pode ser usado.

Embora seja um assunto que precisa ser discutido repetidamente.

Estudante de Web de Paris, França

user589956
fonte
5

Apenas uma pequena para adicionar, você deve usar a tag img se desejar que os usuários possam 'clicar com o botão direito' e 'save-image' / 'save-picture'; portanto, se pretende fornecer a imagem como um recurso para outras.

O uso da imagem de plano de fundo (até onde sei na maioria dos navegadores) desabilitará a opção de salvar a imagem diretamente.

dougajmcdonald
fonte
5

Uma entrada pequena, tive problemas com imagens responsivas que retardam a renderização no iphone por até um minuto, mesmo com imagens pequenas:

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

Mas, ao mudar para o uso de imagens de plano de fundo, o problema desapareceu, isso só é viável se estiver direcionado a navegadores mais recentes.

winthers
fonte
Você tem algum suporte ou explicação para esse comportamento?
Todd
Desculpe, não tenho idéia do motivo pelo qual a página diminuiria a velocidade de rastreamento. Talvez o re-fluxo no navegador do iphone tenha poucos recursos.
winthers
4

IMGcarregue primeiro porque srcestá no próprio arquivo html, enquanto que no caso da background-imagefonte é mencionada na folha de estilo, a imagem é carregada após a folha de estilo carregada, atrasando o carregamento da página da web.

Sagi_Avinash_Varma
fonte
Além disso, alguns navegadores (por exemplo, Firefox 35) parecem atualizar o CSS background-imagedepois de algum tempo: se você tiver várias guias abertas, quando voltar à sua guia depois de algum tempo, o fundo do CSS ficará em branco por um tempo.
Skippy le Grand Gourou
3

HTML é para conteúdo e CSS é para design. A imagem é necessária e precisa ser captada pelos leitores de tela? Se a resposta for sim, coloque a imagem no HTML. Se for apenas para estilo, você poderá usar a propriedade background-image em CSS para injetar a imagem. Assim como muitas pessoas aqui já mencionaram, você pode usar um pseudo elemento na imagem, se quiser.

carltonstith
fonte
3

Observe também que a maioria das aranhas de mecanismos de pesquisa não indexa imagens de plano de fundo CSS, portanto, as imagens de plano de fundo serão ignoradas e você não poderá obter nenhum tráfego dos mecanismos de pesquisa (sem nenhum benefício de SEO).

Onde todas as imagens definidas com tags são indexadas (a menos que sejam excluídas manualmente) e podem atrair tráfego dos mecanismos de pesquisa se seus atributos de título / alt e nomes de arquivos forem otimizados corretamente (escreva alguma palavra-chave).

Nadeem Khan
fonte
2

Você pode usar tags IMG se desejar que as imagens sejam fluidas e redimensionadas para diferentes tamanhos de tela. Para mim, essas imagens são principalmente parte do conteúdo. Para a maioria dos elementos que não fazem parte do conteúdo, uso sprites CSS para manter o tamanho do download mínimo, a menos que eu queira animar ícones etc.

shingokko
fonte
2

Uso imagem em vez de imagem de fundo quando quero torná-los 100% elásticos, compatíveis com a maioria dos navegadores.

max
fonte
2

Se você deseja adicionar uma imagem apenas para o conteúdo especial da página ou para apenas uma página, use a tag IMG e se desejar colocar uma imagem em mais de uma página, use a Imagem de plano de fundo CSS.

Vishal Gupta
fonte
2

Outra imagem de fundo PRO: imagens de fundo para <ul>/ <ol>listas.

Use imagens de plano de fundo se elas fizerem parte do design geral e se repetirem em várias páginas. De preferência em forma de sprite de fundo para otimização.

Use tags para todas as imagens que não fazem parte do design geral e provavelmente são colocadas uma vez, como imagens específicas para artigos, pessoas e imagens importantes que merecem ser adicionadas às imagens do Google.

** A única imagem repetida que eu incluo em uma <img>tag é o logotipo do site / empresa. Como as pessoas tendem a clicar nele para acessar a página inicial, você o envolve com uma <a>tag.

Gilly
fonte