Elemento da imagem

O módulo anterior demonstrou como o atributo srcset permite fornecer versões de tamanhos diferentes da mesma imagem. O navegador pode decidir qual é a versão correta a ser usada. Se você quiser mudar a imagem completamente, será necessário usar o elemento picture.

Da mesma forma que srcset se baseia no atributo src, o elemento picture se baseia no elemento img. O elemento picture se ajusta a um elemento img.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

Se não houver um elemento img aninhado dentro do picture, o picture não vai funcionar.

Assim como o atributo srcset, o elemento picture vai atualizar o valor do atributo src nesse elemento img. A diferença é que, onde o atributo srcset dá sugestões ao navegador, o elemento picture fornece comandos. Isso permite o controle.

source

É possível especificar vários elementos source dentro de um elemento picture, cada um com o próprio atributo srcset. Em seguida, o navegador executa o primeiro que conseguir.

Formatos de imagem

Neste exemplo, há três imagens diferentes em três formatos diferentes:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

O primeiro elemento source aponta para uma imagem no novo formato AVIF. Se o navegador for capaz de renderizar imagens AVIF, esse é o arquivo de imagem escolhido. Caso contrário, ele avança para o próximo elemento source.

O segundo elemento source aponta para uma imagem no formato WebP. Se o navegador for capaz de renderizar imagens WebP, ele usará esse arquivo de imagem.

Caso contrário, o navegador voltará para o arquivo de imagem no atributo src do elemento img. Essa imagem é um JPEG.

Isso significa que você pode começar a usar novos formatos de imagem sem sacrificar a compatibilidade com versões anteriores.

Nesse exemplo, o atributo type informou ao navegador o tipo de formato de imagem especificado.

Tamanhos de imagem

Além de alternar entre formatos de imagem, você pode alternar entre os tamanhos de imagem. Use o atributo media para informar ao navegador qual será a largura da imagem. Coloque uma consulta de mídia no atributo media.

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

Aqui, você está informando ao navegador que, se a largura da janela de visualização for maior que 75em, ele precisará usar a imagem grande. Entre 40em e 75em, o navegador precisa usar a imagem média. Abaixo de 40em, o navegador precisa usar a imagem pequena.

Isso é diferente de usar os atributos srcset e sizes no elemento img. Nesse caso, você está fornecendo sugestões ao navegador. O elemento source se parece mais com um comando do que com uma sugestão.

Também é possível usar o descritor de densidade de pixels dentro do atributo srcset de um elemento source.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

Nesse exemplo, você ainda informa ao navegador o que fazer em diferentes pontos de interrupção, mas agora ele tem a opção de escolher a imagem mais adequada para a densidade de pixels do dispositivo.

Corte

Se você só precisa veicular versões da mesma imagem de tamanhos diferentes, srcset é a melhor opção. No entanto, se uma imagem não ficar boa em tamanhos menores, tente criar uma versão cortada.

As diferentes imagens podem ter proporções de largura e altura diferentes para se adequar melhor ao contexto. Por exemplo, em um navegador para dispositivos móveis, convém veicular um recorte estreito e alto, enquanto em um navegador de computador, você pode querer um corte largo e curto.

Veja um exemplo de imagem principal que muda o conteúdo e a forma com base na largura da janela de visualização. Adicione os atributos width e height a cada elemento source.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

Lembre-se de que não é possível mudar o atributo alt dependendo da origem da imagem. É necessário criar um atributo alt que descreva a imagem em tamanho original e a imagem cortada.

Você provavelmente não vai precisar usar o elemento picture para a maioria das imagens responsivas. Os atributos srcset e sizes no elemento img abrangem muitos casos de uso. Mas para as situações em que você precisa de um controle mais refinado, o elemento picture é uma ferramenta poderosa.

Há um tipo de imagem em que você pode não precisar de nenhuma solução: ícones. A seguir:.

Teste seu conhecimento

Teste seus conhecimentos sobre o elemento de imagem