O elemento <picture> do HTML serve para mostrar imagens diferentes, dependendo do tamanho da tela ou do tipo de dispositivo que a pessoa está usando. Com ele, seu site fica mais rápido, leve e funciona melhor em todos os navegadores.
O que é o elemento <picture>?
O <picture> é uma “caixinha” especial no HTML onde você coloca várias opções de imagem. Ele ajuda o navegador a escolher automaticamente a imagem mais adequada para cada situação. Por exemplo: uma imagem menor para celular e uma imagem maior para computador.
Como funciona o <picture>?
Dentro do <picture>, você usa várias tags <source>, cada uma com um tipo de imagem diferente. Essas tags dizem para o navegador: “Use essa imagem se a tela for pequena” ou “Use essa se o navegador entender esse tipo de formato”. No final, você sempre deve colocar uma tag <img> como imagem padrão, caso o navegador não entenda as opções anteriores.
Exemplo:
<picture>
<source media="(max-width: 600px)" srcset="imagem-pequena.jpg">
<source media="(min-width: 601px)" srcset="imagem-grande.jpg">
<img src="imagem-padrao.jpg" alt="Descrição da imagem">
</picture>
Por que usar o <picture>?
O uso do elemento <picture> tem duas grandes vantagens:
1. Economiza internet (largura de banda)
Se alguém estiver no celular com uma tela pequena, não precisa baixar uma imagem gigante. O navegador escolhe a imagem menor, o que deixa o site mais rápido e economiza dados.
2. Melhora a compatibilidade com navegadores
Nem todos os navegadores entendem todos os tipos de imagem, como WebP ou AVIF. Com o <picture>, você pode colocar várias versões da mesma imagem em formatos diferentes. Assim, o navegador escolhe a que ele consegue mostrar.
Dica importante
Sempre coloque uma tag <img> dentro do <picture>. Ela é a imagem padrão, usada se o navegador não entender as outras opções. Isso garante que sua imagem será exibida de qualquer jeito.
Exemplo prático da dica:
<picture>
<source srcset="imagem.webp" type="image/webp">
<source srcset="imagem.jpg" type="image/jpeg">
<img src="imagem-padrao.jpg" alt="Imagem de exemplo">
</picture>
Explicação passo a passo:
<source srcset="imagem.webp" type="image/webp">
→ O navegador tenta carregar a imagem no formato WebP (mais leve e moderno).<source srcset="imagem.jpg" type="image/jpeg">
→ Se o navegador não entender WebP, ele tenta carregar a versão JPEG.<img src="imagem-padrao.jpg">
→ Essa é a imagem padrão e obrigatória!
Se o navegador for muito antigo ou não reconhecer nenhuma das<source>, ele usa essa.
Colocar a tag <img> no final é como ter um plano de segurança: garante que a imagem sempre apareça, mesmo que nenhuma das anteriores funcione. E o atributo alt também é importante para acessibilidade e SEO.
