Elemento da imagem

O módulo anterior mostrou como o atributo srcset permite fornecer versões de tamanhos diferentes da mesma imagem. Assim, o navegador pode decidir qual é a versão certa para usar. Se você quiser mudar a imagem completamente, vai precisar do elemento picture.

Da mesma forma que srcset se baseia no atributo src, o elemento picture se baseia 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 elemento picture, o elemento picture não vai funcionar.

Assim como o atributo srcset, o elemento picture atualiza o valor do atributo src no elemento img. A diferença é que, enquanto o atributo srcset dá sugestões ao navegador, o elemento picture dá comandos. Isso dá controle a você.

source

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

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">
</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 voltar 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 mudar o tamanho delas. 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">
</picture>

Aqui, você está informando ao navegador que, se a largura da janela de visualização for maior que 75em, ele deverá 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 é mais parecido 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"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

Nesse exemplo, você ainda está dizendo 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ó precisar veicular versões de tamanhos diferentes da mesma imagem, srcset é a melhor opção. Mas se uma imagem não ficar boa em tamanhos menores, tente fazer uma versão cortada dela.

As 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, talvez você queira veicular um corte estreito e alto, enquanto em um navegador para computador, talvez queira veicular um corte amplo e curto.

Confira um exemplo de imagem principal que muda o conteúdo e o formato com base na largura da janela de visualização. Adicione 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" fetchpriority="high">
</picture>

Não é possível mudar o atributo alt dependendo da origem da imagem. Você precisa escrever um atributo alt que descreva a imagem em tamanho real e a imagem cortada.

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

Há um tipo de imagem em que talvez você não precise de nenhuma das soluções: ícones. É isso que vem a seguir.

Teste seu conhecimento

Teste seus conhecimentos sobre o elemento "picture"