18

Quando devo usar uma tag </img> HTML para exibir uma imagem?

E background-image CSS?

Fatores como acessibilidade e suporte de navegador podem influenciar na escolha?

4
  • 8
    Não é uma resposta, só uma consideração inicial: img faz parte do conteudo, CSS não. Isso já seria um fator de decisão. Semanticamente se a imagem é parte do conteúdo, como um diagrama esquemático referido em um texto, o IMG faz mais sentido. Se é um elemento decorativo como uma textura de página, ou um detalhe gráfico, ou uma imagem complementar (como um logo no lugar do nome da empresa no cabeçalho) geralmente no CSS faz mais sentido. Não é regra geral nem absoluta, só quis adiantar o assunto.
    – Largato
    Commented 16/03/2017 às 14:24
  • CSS transitions, com background-imagepode nos salvar às vezes =]
    – BrTkCa
    Commented 16/03/2017 às 14:31
  • @LucasCosta isso dá pra fazer com IMG tambem, sem problemas.
    – Largato
    Commented 16/03/2017 às 14:36
  • @Bacco Bem colocado! Commented 17/03/2017 às 20:57

3 Respostas 3

16

Usos recomendados da tag <img>:

  • Quando é necessário que a imagem apareça no caso da página ser impressa. Os browsers não inserem imagens de fundo em impressões, por padrão.
  • Quando é importante inserir uma descrição da imagem (atributo alt). Esta informação é importante em vários casos como: o usuário está com conexão à internet lenta e as imagens nao carregam (exibindo somente a descrição) ou até deficientes visuais que acessam a página podem saber do que se trata a imagem (através de um software que "fala" o texto da pagina incluindo a descrição das imagens).
  • Quando a imagem precisa ser indexada por buscadores.

Usos recomendados do background-image (CSS):

  • Quando a imagem não faz parte do conteúdo, ou seja, é parte do design do site.
  • Quando a imagem não deve aparecer quando o usuário imprimir a página.
  • Quando você quer usar CSS Sprites

Conclusão

Acredito que o fator conteúdo vs design, influencia mais na escolha entre img e background-image. Uma imagem que é parte do conteúdo usada como background-image pode prejudicar a acessibilidade e diminuir a chance de uma boa indexação da página em buscadores. Em relação à performance, em algumas pesquisas iniciais que fiz, não encontrei diferenças no tempo de carregamento. Uma diferença que encontrei foi que o background-image não carrega caso não esteja sendo usado, já a tag img carrega sempre.

Referência:
When to use IMG vs. CSS background-image?
Are unused CSS images downloaded?

2
  • 2
    Muito obrigada, você sanou minhas duvidas. Excelente resposta! Commented 17/03/2017 às 17:13
  • @AlíciaTairini Que bom que a resposta te ajudou! =D Commented 17/03/2017 às 17:14
6

Minha resposta ficou assim:

A propriedade em CSS background-image só deve ser usada quando uma imagem for decorativa ou seja, não tenha nenhum valor semântico e só serve para deixar a pagina mais "bonitinha", se a imagem for realmente importante para entender o texto, deve ser utilizada a tag <img/>, e adicione o atributo alt para oferecer um texto alternativo a imagem (com CSS não é possível fazer isso).

0

Olá, respondendo de uma forma pratica e simples podes usar as imagens no CSS caso queiras elas no fundo da tua página como background mesmo. E as com a tag img normais do corpo da imagem, como produtos novos ou outras secções do html. E não te esqueça a a tag img carrega sempre a imagem está é a melhos parte

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .