Um elemento “source” que tem um elemento irmão “source” seguinte ou um elemento “img” com um atributo “srcset” deve ter um atributo “media” e/ou atributo “type”.

O elemento <picture> existe para dar aos browsers uma escolha entre múltiplas fontes de imagem. O browser avalia cada <source> por ordem, procurando pelo primeiro cujas condições correspondam ao ambiente atual. Estas condições são expressas através do atributo media (ex., largura ou resolução da viewport) e do atributo type (ex., image/webp ou image/avif). Se um <source> não tiver ambos os atributos, ele funciona como uma correspondência incondicional — o browser sempre o selecionará, tornando qualquer elemento <source> subsequente ou um <img> com srcset inalcançável. Isto derrota completamente o propósito do elemento <picture>.

A especificação HTML exige especificamente estes atributos para prevenir esta situação. Quando um <source> tem um elemento irmão <source> seguinte ou um <img> seguinte com srcset, pelo menos um critério de seleção (media ou type) deve estar presente para que o browser possa escolher significativamente entre as opções. Um <source> sem estes atributos é válido apenas se for o último <source> antes de um <img> simples (um sem srcset), uma vez que nesse caso ele serve como o fallback final dentro do <picture>.

Isto é importante por várias razões:

• Conformidade com normas: O HTML living standard define explicitamente este requisito. Violá-lo produz um erro de validação.
• Renderização previsível: Sem atributos distintivos, os browsers podem silenciosamente ignorar fontes ou sempre escolher a primeira, levando a comportamento inconsistente entre browsers.
• Performance: O elemento <picture> é frequentemente usado para servir imagens menores em viewports pequenas ou formatos modernos como WebP e AVIF para browsers que os suportam. Sem atributos media ou type apropriados, estas otimizações não funcionarão como pretendido.

Como corrigir

Adicione um atributo media, um atributo type, ou ambos a cada elemento <source> que é seguido por outro <source> ou por um <img> com srcset:

• Use type quando você está oferecendo a mesma imagem em diferentes formatos (ex., AVIF, WebP, JPEG). O browser escolhe o primeiro formato que suporta.
• Use media quando você está servindo diferentes imagens baseadas em condições da viewport (direção de arte). O browser escolhe a fonte cuja media query corresponde.
• Use ambos quando você quer combinar negociação de formato com direção de arte.

Exemplos

Incorreto — <source> sem media ou type

Cada <source> abaixo não tem critério de seleção, então o browser não tem forma de escolher entre eles:

<picture>
  <source srcset="hero.webp">
  <source srcset="hero.jpg">
  <img src="hero.jpg" srcset="hero-2x.jpg 2x" alt="A mountain landscape">
</picture>

Correto — usando type para negociação de formato

Adicionar type permite ao browser escolher o primeiro formato que suporta:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" srcset="hero-2x.jpg 2x" alt="A mountain landscape">
</picture>

Correto — usando media para direção de arte

Adicionar media permite ao browser escolher a fonte que corresponde à viewport:

<picture>
  <source srcset="hero-wide.jpg" media="(min-width: 1024px)">
  <source srcset="hero-narrow.jpg" media="(max-width: 1023px)">
  <img src="hero-narrow.jpg" srcset="hero-narrow-2x.jpg 2x" alt="A mountain landscape">
</picture>

Correto — combinando media e type

Pode usar ambos os atributos juntos para servir o formato certo no tamanho de viewport certo:

<picture>
  <source srcset="hero-wide.avif" media="(min-width: 1024px)" type="image/avif">
  <source srcset="hero-wide.webp" media="(min-width: 1024px)" type="image/webp">
  <source srcset="hero-narrow.avif" media="(max-width: 1023px)" type="image/avif">
  <source srcset="hero-narrow.webp" media="(max-width: 1023px)" type="image/webp">
  <img src="hero-narrow.jpg" alt="A mountain landscape">
</picture>

Correto — <source> único antes de um <img> simples

Quando há apenas um <source> e o <img> não tem srcset, nenhum media ou type é necessário — mas adicionar type ainda é recomendado para clareza:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="A mountain landscape">
</picture>

Saiba mais:

MDN Reference

<source>: The Source element

→

MDN Reference

Using media queries in HTML and CSS

→