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"
Quando o atributo srcset
fornece ________ ao navegador, o elemento <picture>
fornece ________.
Alguns recursos do elemento <picture>
são:
avif
ou webp
, se possível, será menor e mais fácil.