Elemento picture HTML

Un solo img basta en muchas páginas. Cuando necesitas archivos distintos para pantallas o formatos diferentes — un recorte ancho en escritorio, uno más cerrado en móviles, o un formato moderno con respaldo JPEG — el elemento picture ofrece candidatos. El navegador elige uno; tu img de respaldo cubre clientes antiguos y la accesibilidad.

Qué aporta picture

picture es un contenedor. Dentro colocas cero o más elementos source y exactamente un img de respaldo. Cada source puede declarar cuándo aplica (media) o qué formato es (type), y dónde está el archivo (srcset). El img no es decoración opcional: es el respaldo obligatorio y el lugar del alt.

Respuesta directa

Envuelve uno o más elementos <source> y un <img> de respaldo dentro de <picture>. Usa media para condiciones de viewport y type para formatos como WebP. El img sigue necesitando src y alt. Los principiantes pueden empezar con dos anchos de la misma foto antes de reunir cada formato moderno.

Dirección artística con media

Dirección artística significa recortes o diseños distintos para viewports distintos — no solo «la misma foto más pequeña.» media en source permite apuntar diseños anchos y estrechos a archivos diferentes.

Leer la muestra de media

• En patrones de enseñanza habituales, las sources se listan de condiciones más específicas hacia otras más amplias; el navegador igual evalúa y elige una coincidencia
• srcset en source apunta a la URL del archivo candidato
• El img final aporta src y alt cuando ninguna source coincide o cuando el soporte de picture es incompleto
• Redimensiona la ventana en la práctica para ver qué archivo encaja — usa Network en DevTools si quieres confirmar la petición

Elección de formato con type

A veces la misma composición se entrega como WebP para navegadores compatibles y JPEG para el resto. type indica al navegador el tipo MIME para que pueda omitir formatos no soportados sin descargarlos primero.

Mantén pequeño el alcance del primer día

No necesitas cada formato y cada breakpoint en el primer intento. Haz que un picture con dos candidatos sensatos funcione, mantén un alt honesto en el img y luego amplía. Los descriptores de densidad de srcset responsive y los atributos sizes avanzados llegan después, a medida que creces.

alt se queda en el img

No pongas el texto de accesibilidad solo en source. Los lectores de pantalla y el renderizado de respaldo dependen del img. Las reglas de decoración de la sesión Images siguen aplicando: las imágenes informativas necesitan un alt real; la decoración pura puede usar alt="".

picture frente a un img

Usa un img sencillo cuando un archivo basta. Recurre a picture cuando de verdad necesitas archivos distintos según condiciones — dirección artística por viewport o cambio de formato. Marcado extra sin necesidad real solo complica el mantenimiento.

Hábitos de orden y respaldo

Lista los elementos source antes del img. Incluye siempre el img. Si olvidas el respaldo, algunos navegadores y muchas herramientas de comprobación didácticas tratarán el patrón como incompleto. Prueba con una ventana estrecha y una ancha, y con un navegador que quizá no prefiera tu formato avanzado.

Práctica en tu editor

1. Prepara dos anchos de la misma foto (o dos archivos claros para practicar).
2. Construye un picture con dos media queries en source y un img de respaldo.
3. Cambia el tamaño de la ventana del navegador y observa qué archivo encaja.
4. Confirma que alt permanece en el img, no solo en un comentario.
5. Opcionalmente añade un source WebP con type="image/webp" encima de un img JPEG y confirma que el patrón sigue mostrando una imagen en todas partes.

Errores fáciles

• Olvidar el img de respaldo
• Poner alt solo en source en lugar de en el img
• Complicar con muchos formatos antes de que funcione el patrón básico de media
• Usar picture cuando un solo img optimizado habría bastado
• Recortes desalineados que sorprenden al usuario cuando el viewport cruza un breakpoint
• Confundir srcset en source con el href de un enlace

Resumen

• picture ofrece varios candidatos de imagen; el navegador elige uno
• Usa source más un img de respaldo obligatorio
• media guía la elección por viewport; type guía la elección de formato
• alt se queda en el img
• Empieza simple: dos anchos o un formato moderno más un respaldo JPEG