Quando usar IMG vs. CSS background-image?

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.

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.

É 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.

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 .

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.

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 :)

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).

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.

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.

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.

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>.

Primeiro plano = img.

Background = CSS background.

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 .

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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).

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.

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

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.

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.