HTML Academy · Lección

El elemento picture para dirección artística

Cambie imágenes completas según las condiciones del viewport.

Lección 3 de 414 pasos

El elemento picture para dirección artística es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Problema de dirección de arte

La dirección de arte consiste en ofrecer un recorte o una composición de imagen fundamentalmente diferentes según el tamaño de la pantalla:

Fotografía apaisada completa en equipos de escritorio
Recorte vertical ampliado en dispositivos móviles
Esto no se puede resolver únicamente con srcset + sizes

El elemento picture

El elemento <picture> contiene varios elementos <source> y un elemento <img> de respaldo:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Cómo funciona picture

El navegador evalúa los elementos <source> en orden, de arriba abajo:

Comprueba la condición media del primer elemento source; si coincide, usa esa imagen
Comprueba el segundo elemento source; si coincide, usa esa imagen
Si ninguno coincide, utiliza <img> como opción predeterminada

El elemento <img> sigue mostrando la imagen elegida y contiene el texto alt.

Cambio de formato con picture

<picture> también puede seleccionar formatos de imagen según la compatibilidad del navegador:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Combinación de dirección de arte y formato

Puede combinar las condiciones de medios y la selección de formato:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

El elemento img es obligatorio

El elemento <img> dentro de <picture> no es opcional:

Muestra la imagen seleccionada
Contiene el texto alt para la accesibilidad
Contiene los atributos width, height, loading y otros
Sin él, no se muestra nada

Atributo media de source

El atributo media acepta consultas de medios CSS estándar:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

srcset de source con selección adaptable

Combine la dirección de arte con srcset para obtener un control total:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Imágenes para el modo oscuro

Ofrezca imágenes diferentes a los usuarios del modo oscuro:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture frente a background-image de CSS

Cuándo usar <picture> frente a fondos CSS:

Imágenes de contenido: use <picture>; necesitan texto alternativo y forman parte del contenido del documento
Imágenes decorativas: use background-image de CSS con consultas de medios
Imágenes importantes para el SEO: use siempre <picture>; los rastreadores indexan los elementos img

Nota sobre accesibilidad

El atributo alt siempre pertenece a <img>, no a <source>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Carga diferida con picture

Añada carga diferida al elemento <img> dentro de <picture>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Comprobación rápida

¿Qué elemento de un bloque picture debe estar siempre presente y contiene el atributo alt?

Responde en la lección interactiva

Repaso: elemento picture

Dirección de arte con picture:

<picture> contiene elementos <source> y un elemento <img>
El navegador elige el primer <source> que coincide
Use media para las condiciones de la ventana gráfica y type para seleccionar el formato
<img> es obligatorio: muestra la imagen y contiene el texto alt
Combínelo con srcset + sizes para obtener un control adaptable total

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 40
Lecciones: 159

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «El elemento picture para dirección artística» es gratis?

Sí — el texto completo de «El elemento picture para dirección artística» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El elemento picture para dirección artística»?

Cambie imágenes completas según las condiciones del viewport. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «El elemento picture para dirección artística»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

El elemento img: src, alt, width y height
Imágenes adaptables con srcset y sizes
El elemento picture para dirección artística
figure y figcaption

← Volver a HTML Academy