Elemento da imagem

O módulo anterior demonstrou como o atributo srcset permite fornecer versões da mesma imagem em tamanhos diferentes. Assim, o navegador pode decidir qual é a versão correta a ser usada. Para mudar a imagem completamente, você vai precisar do elemento picture.

Da mesma forma que srcset se baseia no atributo src, o elemento picture é criado com base no elemento img. O elemento picture envolve 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 no elemento img. A diferença é que, quando o atributo srcset dá sugestões ao navegador, o elemento picture fornece comandos. Isso dá a você 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 a primeira coisa possível.

Formatos de imagem

Neste exemplo, há três imagens 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 será o arquivo de imagem escolhido. Caso contrário, ele passa 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 vai retornar ao 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 qual tipo de formato de imagem foi 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 a largura da imagem. Coloque uma consulta de mídia dentro do 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 mais larga 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ê vai fornecer sugestões ao navegador. O elemento source é mais como um comando do que 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 está informando ao navegador o que fazer em diferentes pontos de interrupção, mas agora o navegador 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 de tamanhos diferentes da mesma imagem, srcset é a melhor opção. No entanto, se uma imagem não tiver boa aparência em tamanhos menores, tente criar uma versão cortada da imagem.

Imagens diferentes podem ter proporções de largura e altura distintas para se adequar melhor ao contexto. Por exemplo, em um navegador para dispositivos móveis, é possível exibir um recorte estreito e alto, enquanto em um navegador de computador você pode veicular um recorte largo e curto.

Veja um exemplo de uma imagem hero 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>

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 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 das soluções: ícones. É isso que vem a seguir.

Teste seu conhecimento

Teste seus conhecimentos sobre o elemento "picture"