HTML
Cómo usar picture y source para cambiar encuadre, formato o recurso según el viewport y las capacidades del navegador.
picture permite ofrecer distintas fuentes antes de un para seleccionar formato o una composición diferente según condiciones.
img<picture>
<source
media="(min-width: 64rem)"
srcset="hero-wide.webp"
>
<img
src="hero-mobile.webp"
alt="Nicolás Garzón trabajando en su escritorio"
width="800"
height="1000"
>
</picture>En mobile puede necesitarse un recorte vertical y en desktop una composición horizontal.
<picture>
<source
media="(min-width: 60rem)"
srcset="team-wide-1600.webp 1600w, team-wide-1000.webp 1000w"
sizes="80vw"
>
<img
src="team-close.webp"
alt="Equipo reunido alrededor de una mesa"
width="800"
height="800"
>
</picture>Las variantes deben comunicar esencialmente la misma información. Si el contenido cambia, revisa también la alternativa textual y el diseño.
<picture>
<source
type="image/avif"
srcset="project.avif"
>
<source
type="image/webp"
srcset="project.webp"
>
<img
src="project.jpg"
alt="Dashboard del proyecto"
width="1200"
height="750"
>
</picture>El navegador elige la primera fuente compatible. No descarga todas.
Coloca fuentes más específicas antes de las generales. El navegador evalúa en orden.
<source media="(min-width: 80rem)" ...>
<source media="(min-width: 48rem)" ...>
<img ...><picture>
<source srcset="image.webp">
</picture>No representa una imagen completa. source solo proporciona candidatos al img descendiente.
<source alt="...">No es válido. El texto alternativo está en img.
Si recortes muy diferentes hacen que un único alt no funcione, quizá las variantes no representan el mismo contenido y deben replantearse.
Las fuentes pueden tener proporciones diferentes. Los atributos de img definen la proporción fallback inicial; CSS moderno y características de source pueden ayudar, pero verifica layout shift cuando cambia el candidato.
No uses una proporción falsa solo para reservar espacio.
media debe corresponder con la necesidad de la imagen, no con nombres de dispositivos.
media="(min-width: 48rem)"<source
type="image/avif"
srcset="project-640.avif 640w, project-1280.avif 1280w"
sizes="(min-width: 64rem) 50vw, 100vw"
>Cada source puede tener su propio srcset y sizes.
Usa HTML image cuando el recurso aporta contenido y necesita alt.
Una imagen puramente decorativa puede vivir en CSS. No muevas contenido informativo a background-image, porque no tiene alternativa textual nativa ni reserva intrínseca sencilla.
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="diagram-dark.svg"
>
<img src="diagram-light.svg" alt="Flujo del sistema">
</picture>Puede adaptar un diagrama, pero asegúrate de que ambos tengan contraste y transmitan la misma información.
Picture no reproduce animación por sí mismo, pero media conditions pueden seleccionar un recurso estático para usuarios que prefieren menos movimiento cuando el soporte y la estrategia lo permiten.
No dependas de una condición como único control si el contenido animado necesita pausa.
<picture>
<source
media="(min-width: 64rem)"
type="image/avif"
srcset="domisys-wide.avif"
>
<source
media="(min-width: 64rem)"
type="image/webp"
srcset="domisys-wide.webp"
>
<img
src="domisys-mobile.webp"
alt="Panel principal de DomiSys con métricas y pedidos activos"
width="750"
height="1000"
>
</picture>¿Cuándo es suficiente srcset sin picture?
Cuando todas las variantes muestran la misma composición y solo cambian resolución o densidad.
figure y figcaption relaciona contenido autocontenido con su explicación.