Etiqueta picture en HTML: imágenes adaptables y formatos
La etiqueta <picture> permite ofrecer fuentes alternativas de una imagen según condiciones como el tamaño de la ventana o los formatos que admite el navegador. Úsala si una foto panorámica necesita otro recorte en móvil, o si quieres ofrecer WebP o AVIF conservando una alternativa JPEG. La imagen la muestra el <img> interior: <picture> organiza las opciones para ese mismo contenido.
Ejemplo mínimo: WebP con alternativa JPEG
Descarga la foto amplia en WebP y su versión JPEG. Guarda ambos archivos junto a un documento HTML e inserta este fragmento en su cuerpo:
<picture>
<source type="image/webp" srcset="fronalpstock-amplio.webp">
<img src="fronalpstock-amplio.jpg"
alt="Laderas verdes y crestas rocosas de Fronalpstock bajo un cielo con nubes"
width="960" height="540"
style="max-width: 100%; height: auto;">
</picture>Verás una sola fotografía de montaña. Si el navegador admite WebP, selecciona esa fuente; si no, usa el JPEG de <img>. Ambos archivos contienen el mismo recorte de 960 × 540 píxeles. El texto alternativo pertenece a <img> y describe el contenido elegido en cualquiera de los formatos. El CSS evita que la foto supere el ancho disponible.
La fotografía original, Fronalpstock big.jpg, de Hannes Röst, se distribuye bajo CC BY-SA 3.0. Las cuatro versiones descargables de esta guía se han recortado, reducido y convertido, y conservan esa licencia. Mantén el crédito y el enlace a la licencia si las redistribuyes.
Si retiras <source>, se carga el JPEG. Si retiras el contenedor <picture> pero conservas <img>, desaparece la selección de fuentes; los <source> sueltos ya no forman una estructura válida para imágenes. Retirar <img> deja el ejemplo sin imagen ni alternativa textual, aunque queden las fuentes.
Sintaxis y contexto válido
<picture> admite cero o más <source>, seguidos de exactamente un <img>. Se pueden intercalar elementos de soporte de scripts, como <script> y <template>, pero no otros contenedores o párrafos arbitrarios. El <img> debe ser hijo directo; envolverlo en un <div> rompe este modelo. Las etiquetas de apertura y cierre de <picture> son obligatorias; <source> e <img> son elementos vacíos, sin cierre.
Puede aparecer donde se admita contenido incrustado: por ejemplo, en un párrafo, un enlace o una figura. Un pie visible se coloca en <figcaption> dentro de una <figure> que envuelve todo el <picture>, como en el caso práctico. La definición y el modelo de contenido están en el HTML Living Standard: <picture>.
Recortes, formatos y orden de las fuentes
La dirección artística consiste en preparar composiciones distintas de una misma imagen. Un recorte vertical puede acercar la cresta central en móvil, mientras que otro horizontal muestra las laderas a ambos lados en una ventana amplia. media="(max-width: 600px)" selecciona el recorte según el ancho del viewport, medido en píxeles CSS. No identifica un teléfono ni mide el ancho del contenedor.
La selección de formato conserva la composición y cambia su codificación: JPEG, WebP o AVIF. En <source>, type="image/webp" permite descartar la opción cuando ese formato no se admite. Cambiar una extensión de .jpg a .webp no convierte un archivo: hay que exportarlo al formato indicado.
El navegador examina los <source> en el orden escrito. Usa el primero con candidatos válidos cuyo media coincida y cuyo type, si existe, sea compatible; después elige un candidato de su srcset. Si ninguno sirve, utiliza las opciones del <img> final. Un <source> sin media no limita la selección por anchura. Por eso las condiciones más específicas deben ir antes de una fuente general que también coincida. El algoritmo de selección de imágenes del estándar detalla estas reglas.
Puedes ofrecer AVIF primero, WebP después y JPEG en <img> cuando dispongas de los tres archivos reales. El caso siguiente combina recortes con WebP y JPEG para que también haya un recorte móvil cuando WebP no se admita.
Picture frente a img con srcset
Si solo necesitas la misma composición a diferentes resoluciones, puede bastar <img> con srcset. Los descriptores w indican el ancho real de los archivos y sizes describe el ancho que ocupará la imagen en el diseño; los descriptores 1x y 2x ofrecen variantes por densidad para un tamaño de presentación previsto.
Elige <picture> cuando necesites decidir entre composiciones o formatos bajo condiciones. También puedes poner varios candidatos en el srcset de cada <source>: un recorte móvil puede tener su propia versión de mayor resolución. La densidad de pantalla, el tamaño de presentación y las decisiones del navegador pueden influir en esa elección. Consulta la guía de <img> y sus imágenes adaptables para preparar srcset y sizes.
Ni srcset ni <picture> hacen que una imagen se ajuste visualmente al contenedor por sí solos: ese ajuste corresponde a CSS.
Caso práctico: recorte móvil y vista amplia
Además de las dos fotos amplias, descarga el recorte móvil JPEG y el recorte móvil WebP. Ambos miden 480 × 600 píxeles y acercan la cresta central manteniendo el significado de la imagen. Guarda las cuatro fotos en una misma carpeta y crea allí recortes.html con este documento completo. También puedes abrir el ejemplo preparado.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Una montaña, dos recortes</title>
<style>
body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui, sans-serif; }
figure { margin: 0; max-width: 960px; }
picture { display: block; }
img { display: block; width: 100%; height: auto; }
figcaption { margin-top: 0.75rem; }
a:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
</style>
</head>
<body>
<h1>Una montaña, dos recortes</h1>
<p>Hasta 600 píxeles de ventana se acerca la cresta central.</p>
<figure>
<picture>
<source media="(max-width: 600px)" type="image/webp"
srcset="fronalpstock-movil.webp" width="480" height="600">
<source media="(max-width: 600px)" type="image/jpeg"
srcset="fronalpstock-movil.jpg" width="480" height="600">
<source type="image/webp" srcset="fronalpstock-amplio.webp"
width="960" height="540">
<img src="fronalpstock-amplio.jpg" width="960" height="540"
alt="Laderas verdes y crestas rocosas de Fronalpstock bajo un cielo con nubes">
</picture>
<figcaption>
Fronalpstock, Suiza. Foto de
<a href="https://commons.wikimedia.org/wiki/File:Fronalpstock_big.jpg">Hannes Röst</a>,
<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>.
Versiones recortadas, reducidas y convertidas.
</figcaption>
</figure>
</body>
</html>No requiere JavaScript ni un servidor especial: puedes abrir el archivo local con los recursos al lado. width y height en las fuentes móviles declaran su proporción 4:5; los de la imagen amplia declaran 16:9. Así el navegador puede reservar espacio adecuado antes de terminar la descarga. El CSS conserva la proporción con height: auto.
Cómo comprobar currentSrc y la alternativa
- Abre el ejemplo con una ventana de 375 píxeles CSS. Si hay soporte WebP, verás el recorte vertical y se elegirá
fronalpstock-movil.webp. - Prueba con 1280 píxeles CSS. Las dos fuentes móviles dejan de coincidir; se elige
fronalpstock-amplio.webpsi WebP se admite. La foto ocupa como máximo 960 píxeles en este diseño. - Después de cargar la imagen, abre la consola de las herramientas de desarrollo y consulta la URL elegida:
document.querySelector("picture img").currentSrccurrentSrc es una propiedad de JavaScript de <img>, no un atributo HTML de <picture>. Devuelve una URL absoluta. Consultar src seguiría mostrando la ruta JPEG declarada en <img> aunque se estuviera viendo un WebP. Una URL en currentSrc no demuestra por sí sola que la descarga haya terminado: comprueba también la imagen o la pestaña Red.
Para provocar el fallback sin necesitar un navegador antiguo, edita tu copia y cambia los dos type="image/webp" por type="image/x-formato-de-prueba". Al recargar a 375 píxeles se debe seleccionar el JPEG móvil; a 1280, el JPEG amplio de <img>. Después restaura los tipos reales. Este valor desconocido es solo una prueba deliberada, no un formato que debas publicar.
Si suprimes todos los <source>, el JPEG amplio queda disponible a ambas anchuras. Cambiar el límite de media cambia cuándo se elige el recorte. Desactiva JavaScript y recarga: la selección y los enlaces del pie siguen funcionando; la consulta de consola sirve únicamente para el diagnóstico. No hace falta un script para cambiar la foto al redimensionar.
Comprobación realizada el 3 de octubre de 2026 con Chromium 153, a 375 y 1280 píxeles CSS, con y sin JavaScript: las URLs seleccionadas terminaron en los archivos WebP indicados; al descartar WebP mediante el tipo desconocido, terminaron en sus alternativas JPEG. El ejemplo tiene un solo candidato por fuente. Si añades resoluciones, no extrapoles estas URLs como una promesa para todos los dispositivos.
Atributos y accesibilidad
<picture> no tiene atributos específicos. Admite atributos globales como id, class o lang; no copies a él los atributos de sus hijos.
- En
<source>:srcsetenumera candidatos,mediaexpresa una condición ytypeidentifica el formato.sizesse usa con candidatos de anchuraw; no sustituye a CSS. En<picture>,srcno selecciona imágenes: usasrcset. - En
<img>:altofrece la alternativa textual;widthyheightdeclaran dimensiones;loading="lazy"permite diferir una imagen fuera de la vista. La carga predeterminada eseager; para una foto principal visible al abrir la página, evita diferirla sin motivo. La política de carga también afecta al recurso elegido desde<source>. - Dimensiones del recorte:
<source>dentro de<picture>también admitewidthyheight, como muestra el ejemplo. Declara las dimensiones de sus archivos cuando su proporción difiera de la de<img>.
width: 100% y height: auto son propiedades CSS. currentSrc es una propiedad del DOM. Estas tres cosas desempeñan funciones diferentes de los atributos HTML.
Mantén un significado coherente entre recortes para que un único alt sea adecuado. No ofrezcas un mapa con datos distintos en cada pantalla y lo describas como si fueran equivalentes. Usa alt="" si la imagen es puramente decorativa; si contiene información esencial, conserva esa información en texto. El pie puede añadir autoría y contexto, pero no reemplaza automáticamente el propósito de alt. No pongas alt en <source> ni añadas un role="img" a <picture>: la imagen accesible la aporta <img>.
Errores frecuentes y preguntas
¿Picture reemplaza a img?
No. Necesita un <img> final para representar la imagen, su alternativa y sus opciones de carga. Varios <source> sin <img> no muestran una galería.
¿Necesito picture para todas las imágenes adaptables?
No. Para ajustar el tamaño visible usa CSS; para ofrecer distintas resoluciones del mismo contenido, considera <img srcset>. Añade <picture> si necesitas otras composiciones o una selección explícita de formato.
¿Por qué no aparece el recorte móvil?
Comprueba el viewport y la etiqueta meta del ejemplo, la condición media, el orden de las fuentes y que <img> sea hijo directo. Una fuente general colocada primero puede ocultar las posteriores. Revisa después que uses srcset, que el tipo sea correcto y que el archivo exista; consulta currentSrc y Red para distinguir una selección equivocada de una descarga fallida.
¿Se descargan todas las variantes? ¿Un 404 activa el JPEG?
<picture> ofrece candidatos para elegir una imagen; no ordena descargar todas las variantes. Al cambiar el viewport pueden solicitarse otros archivos, y la caché influye en lo que verás en Red. Tampoco es un sistema de recuperación de errores HTTP: si la fuente elegida devuelve 404, no presupongas que el navegador probará el JPEG. El fallback de formato se decide por compatibilidad y condiciones, antes de descargar; conserva rutas válidas y prueba fallos de archivo por separado.
La guía de <img> amplía texto alternativo, carga y resolución. La guía de <source> explica cómo declara opciones para imágenes y también para audio y vídeo; dentro de <picture> sus reglas se aplican a la selección de esta única imagen.
Compatibilidad y fuentes
Consultado el 3 de octubre de 2026: <picture> está ampliamente disponible en los navegadores actuales. El soporte del elemento y el de los formatos son cuestiones distintas; conserva un recurso JPEG adecuado en <img> y comprueba los formatos de tu público. Las dimensiones en <source> llegaron después que <picture>: los datos de compatibilidad de MDN para <source> sitúan width y height en Chrome 90, Firefox 108 y Safari 15. En versiones anteriores, la selección puede funcionar mientras la proporción previa a la carga necesita otro tratamiento con CSS.
Para contrastar la semántica y los ejemplos, consulta HTML Living Standard: <picture>, HTML Living Standard: dimensiones y selección de imágenes, MDN: <picture> y MDN: HTMLImageElement.currentSrc.