Picture

O elemento <picture> permite servir imagens diferentes baseado em media queries, formato e resolução.

Principais Características

•Carrega diferentes imagens baseado no tamanho da tela ou resolução
•Permite usar WebP ou AVIF com fallback para navegadores antigos
•Exibe imagens diferentes (não apenas tamanhos) para diferentes dispositivos
•O navegador escolhe a melhor imagem antes de fazer o download

Elementos Filhos

<source>
Define condições (media queries, tipo de arquivo) e a imagem correspondente

<img>
Elemento obrigatório que serve como fallback e define o alt text

Como Funciona

O <picture> contém múltiplos <source> e um <img> obrigatório. O navegador avalia as condições de cada source de cima para baixo e usa a primeira que corresponder.

Media Queries
Use o atributo media para servir imagens diferentes baseado no tamanho da viewport: media="(min-width: 768px)"

Formatos de Imagem
Use o atributo type para formatos modernos com fallback: type="image/webp"

Código

export default function ResponsiveImageExample() {
  return (
    <picture>
      {/* Formato moderno WebP */}
      <source 
        srcSet="/imagem.webp" 
        type="image/webp" 
      />
      
      {/* Telas grandes */}
      <source 
        srcSet="/imagem-desktop.jpg" 
        media="(min-width: 1024px)" 
      />
      
      {/* Telas médias */}
      <source 
        srcSet="/imagem-tablet.jpg" 
        media="(min-width: 768px)" 
      />
      
      {/* Fallback para mobile e navegadores antigos */}
      <img 
        src="/imagem-mobile.jpg" 
        alt="Descrição da imagem"
        loading="lazy"
      />
    </picture>
  );
}

Demonstração

Redimensione a janela do navegador para ver o elemento picture em ação. Diferentes imagens serão carregadas baseado no tamanho da tela.

A imagem muda conforme o tamanho da tela

Mobile

<768px

Tablet

≥768px

Desktop

≥1024px

Dica: Abra o DevTools (F12) e alterne entre dispositivos para ver a troca de imagens em tempo real.

Carregando