Imagem responsiva em documentos HTML

O que são imagens responsivas?

Imagens responsivas são aquelas que se ajustam automaticamente ao tamanho da tela do dispositivo em que estão sendo visualizadas. Isso garante que as imagens sejam exibidas corretamente em diferentes dispositivos, como desktops, tablets e smartphones, melhorando a experiência do usuário.

A palavra "responsivo" vem do inglês "responsive", que significa "ser capaz de responder". No contexto do design web, refere-se à capacidade de um site ou elemento de se ajustar e funcionar bem em diferentes dispositivos e tamanhos de tela.

Como adicionar imagens responsivas no HTML?

Para adicionar imagens responsivas no HTML, você pode usar a combinação de width: 100% e height: auto no CSS. Isso garante que a imagem se ajuste à largura do contêiner (elemento pai) mantendo a proporção original.

Exemplo:

<img src="dino.jpg" style="width: 100%; height: auto;" alt="Descrição da imagem">

A propriedade width: 100% faz com que a imagem ocupe 100% da largura do contêiner pai, enquanto height: auto ajusta a altura da imagem proporcionalmente à largura, mantendo a proporção original da imagem.

Como alternar as imagens em diferentes dispositivos?

Para alterar as imagens em diferentes dispositivos, você pode usar o elemento <picture>. Este elemento permite definir várias fontes de imagem para diferentes condições, como largura da tela ou densidade de pixels. Aqui está um exemplo de como usar o elemento <picture>:

<picture>
  <source media="(max-width: 600px)" srcset="imagem-pequena.jpg">
  <source media="(max-width: 1200px)" srcset="imagem-media.jpg">
  <img src="imagem-grande.jpg" alt="Descrição da imagem">
</picture>

Neste exemplo, a imagem imagem-pequena.jpg será exibida em telas com largura máxima de 600px, a imagem imagem-media.jpg será exibida em telas com largura máxima de 1200px, e a imagem imagem-grande.jpg será exibida em telas maiores.

Outra técnica para imagens responsivas é usar o atributo srcset no elemento <img>. O srcset permite especificar diferentes arquivos de imagem para diferentes resoluções de tela.

Exemplo:

<img src="imagem-pequena.jpg" srcset="imagem-media.jpg 600w, imagem-grande.jpg 1200w" alt="Descrição da imagem">

Neste exemplo, o navegador escolherá a imagem mais adequada com base na resolução da tela do dispositivo. A principal diferença entre usar <picture> e srcset é que <picture> permite definir diferentes fontes de imagem com base em condições específicas, como a largura da tela, enquanto srcset é mais adequado para fornecer diferentes resoluções da mesma imagem em relação ao tamanho apresentado na tela.

Origem dos termos: