Un elemento “source” que tenga un elemento hermano siguiente “source” o “img” con un atributo “srcset” debe tener un atributo “media” y/o “type”.

El elemento <picture> existe para dar a los navegadores una elección entre múltiples fuentes de imagen. El navegador evalúa cada <source> en orden, buscando el primero cuyas condiciones coincidan con el entorno actual. Estas condiciones se expresan a través del atributo media (por ejemplo, ancho o resolución del viewport) y el atributo type (por ejemplo, image/webp o image/avif). Si un <source> carece de ambos atributos, actúa como una coincidencia incondicional — el navegador siempre lo seleccionará, haciendo que cualquier elemento <source> posterior o un <img> con srcset sean inalcanzables. Esto anula completamente el propósito del elemento <picture>.

La especificación HTML requiere estos atributos específicamente para prevenir esta situación. Cuando un <source> tiene un elemento hermano <source> siguiente o un <img> siguiente con srcset, debe estar presente al menos un criterio de selección (media o type) para que el navegador pueda elegir significativamente entre las opciones. Un <source> sin estos atributos solo es válido si es el último <source> antes de un <img> simple (uno sin srcset), ya que en ese caso sirve como la alternativa final dentro del <picture>.

Esto importa por varias razones:

• Cumplimiento de estándares: El estándar HTML living define explícitamente este requisito. Violarlo produce un error de validación.
• Renderizado predecible: Sin atributos distintivos, los navegadores pueden ignorar silenciosamente las fuentes o siempre elegir la primera, llevando a un comportamiento inconsistente entre navegadores.
• Rendimiento: El elemento <picture> se usa a menudo para servir imágenes más pequeñas en viewports pequeños o formatos modernos como WebP y AVIF a navegadores que los soportan. Sin atributos media o type adecuados, estas optimizaciones no funcionarán como se pretende.

Cómo solucionarlo

Agrega un atributo media, un atributo type, o ambos a cada elemento <source> que sea seguido por otro <source> o un <img> con srcset:

• Usa type cuando estés ofreciendo la misma imagen en diferentes formatos (por ejemplo, AVIF, WebP, JPEG). El navegador elige el primer formato que soporta.
• Usa media cuando estés sirviendo diferentes imágenes basadas en condiciones del viewport (dirección artística). El navegador elige la fuente cuya media query coincida.
• Usa ambos cuando quieras combinar negociación de formato con dirección artística.

Ejemplos

Incorrecto — <source> sin media o type

Cada <source> a continuación no tiene criterio de selección, por lo que el navegador no tiene forma de elegir entre ellos:

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

Correcto — usando type para negociación de formato

Agregar type permite al navegador elegir el primer formato que soporta:

<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>

Correcto — usando media para dirección artística

Agregar media permite al navegador elegir la fuente que coincida con el 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>

Correcto — combinando media y type

Puedes usar ambos atributos juntos para servir el formato correcto en el tamaño de viewport correcto:

<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>

Correcto — <source> único antes de un <img> simple

Cuando hay solo un <source> y el <img> no tiene srcset, no se requiere media o type — pero agregar type sigue siendo recomendado para mayor claridad:

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

Más información:

MDN Reference

<source>: The Source element

→

MDN Reference

Using media queries in HTML and CSS

→