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?
Usos recomendados da tag <img>
:
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).Usos recomendados do background-image
(CSS):
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?
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)
.
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
background-image
pode nos salvar às vezes =]