HTML e CSS: quando usar IMG vs background-image

Criado: 27 de Junho, 2019 Frontend

Em que situações devemos apresentar uma imagem com o elemento ou usar a imagem como fundo com a propriedade background-image do CSS?

Já me dizeram que devemos usar sempre que possível em background-image por ser “mais moderno”. Errado.
Na realidade, torna-se é mais fácil para quem desenvolve porque consegue obter elementos com as mesmas dimensões mais facilmente (em grelhas por exemplo).

Vantagens de usar o elemento HTML IMG

A principal vantagem de usar uma imagem através do elemento IMG é o SEO.

Através do elemento HTML nós podemos fornecer informação adicional aos motores de busca usando o atributo ALT, enquanto que não existe forma de o fazer se usarmos CSS de modo a que apenas o nome do ficheiro da imagem consegue ser indexado. O atributo ALT dá uma vantagem indiscutível em SEO ao IMG comparando com a abordagem em CSS.

Usos apropriados do elemento IMG

  • Usa a IMG se tu pretendes que as pessoas imprimam a página e queres que a imagem seja incluída.
  • Usa a IMG com o ALT quando a imagem tem um significado semântico importante, como um ícone de alerta. Isto asegura que o significado da imagem possa ser comunicado em todos os user-agents, incluindo os screen readers.

Usos pragmáticos do elemento IMG

  • Usa a IMG com o ALT se a imagem faz parte do conteúdo como um logo, um diagrama ou uma pessoa real (e não uma fotografia de um banco de imagens).
  • Se usares a IMG em vez do background-image consegues melhorar bastante o desempenho das animações comparando com o background.

Quando usar o CSS background-image

  • Usa o CSS background-image quando a imagem não faz parte do conteúdo.
  • Usa o CSS background-image quando precisas de melhorar o tempo de download das imagens, por exemplo com CSS sprites.
  • Usa o CSS background-image com o background-size:cover quando precisas de esticar uma imagem para ocupar a window.

Nota: O conteúdo deste blog é exclusivamente para ajudar e partilhar conhecimentos.
Qualquer erro que seja detetado por ti, por favor, avisa-me. Quanto melhor for o conteúdo, melhor para todos nós.

Partilhar este artigo