Existe alguma vantagem em carregar uma imagem via css com: background: url ('imagem.jpg');
ao invés de usá-la normalmente como: <img src="imagem.jpg">
?
2 Respostas
Vejo duas questões principais a serem levadas em consideração:
Semântica e Acessibilidade
O uso da tag <img>
, por meio do atributo alt
, gera uma interpretação do buscadores, o que influencia no SEO da página, de acordo com seus algoritmos.
Além disso, alguns leitores de página para deficientes visuais analisam as imagens baseadas também nesse atributo, o que não acontece com o uso da imagem como background no CSS.
Padrões
No uso de símbolos em uma biblioteca de padrões, por exemplo, é muito mais proveitoso o uso de backgrounds, já que basta aplicar uma classe ou algo do tipo, para que dentro do elemento tenha a imagem desejada, seja esta um ícone ou um símbolo.
Uma vantagem que vejo é que por CSS o código se torna reaproveitável. Caso várias tags img usem o mesmo estilo e for necessário alterar o caminho da imagem, bastaria alterar o estilo que é aplicado para todos. Direto no elemento teria que ser alterado um por um.