Imágenes adaptables y el elemento Picture
Proporcione imágenes con el tamaño adecuado mediante srcset, sizes y el elemento HTML picture.
Imágenes adaptables y el elemento Picture es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 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 CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Desafíos de las imágenes adaptables
Descargar en un dispositivo móvil una imagen de resolución completa destinada a ordenadores de escritorio desperdicia ancho de banda y ralentiza la carga. Las imágenes adaptables sirven la imagen adecuada, con el tamaño adecuado, para cada dispositivo.
max-width: 100% como base
La regla mínima para imágenes adaptables: evite que las imágenes se desborden de su contenedor y conserve su relación de aspecto.
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="wide landscape" />srcset para distintas resoluciones
El atributo srcset proporciona varias fuentes de imagen. El navegador elige la más adecuada según la densidad de píxeles del dispositivo (DPR):
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg>"
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg> 1x, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%234f8cff'/><circle cx='800' cy='500' r='360' fill='%237ee787'/></svg> 2x"
alt="A beautiful landscape"
style="max-width:100%;height:auto;display:block;"
>srcset con descriptores de ancho
Use descriptores w para indicar al navegador el ancho real en píxeles de cada archivo de imagen:
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w,
data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w,
data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%23ffb84d'/></svg> 1600w"
alt="Hero image"
style="max-width:100%;height:auto;display:block;"
>Atributo sizes
El atributo sizes indica al navegador qué ancho tendrá la imagen en distintos tamaños del viewport, lo que le ayuda a elegir la fuente adecuada de srcset.
<img
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w"
sizes="(max-width: 600px) 100vw, 50vw"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
alt="Product photo"
style="max-width:100%;height:auto;display:block;"
>El elemento picture
El elemento <picture> ofrece un control total sobre el archivo de imagen que se sirve mediante elementos <source> con condiciones de medios. El navegador usa la primera fuente que coincide.
<picture>
<source media="(min-width: 1024px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'><rect width='1200' height='400' fill='%234f8cff'/><text x='30' y='220' font-size='40' fill='white'>hero-large</text></svg>">
<source media="(min-width: 600px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><rect width='800' height='400' fill='%237ee787'/><text x='30' y='220' font-size='36' fill='white'>hero-medium</text></svg>">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ffb84d'/><text x='20' y='260' font-size='30' fill='white'>hero-small</text></svg>" alt="Hero image" style="max-width:100%;height:auto;display:block;">
</picture>Dirección artística con picture
La dirección artística sirve un recorte o una composición diferente para cada tamaño de pantalla, no solo una versión más pequeña de la misma imagen.
<picture>
<!-- Wide crop for desktop -->
<source media="(min-width: 768px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><rect width='1200' height='300' fill='%23b57bff'/><text x='30' y='170' font-size='34' fill='white'>banner-wide (desktop crop)</text></svg>">
<!-- Square crop for mobile (this preview is narrow, so this is what renders) -->
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23b57bff'/><text x='20' y='260' font-size='26' fill='white'>banner-square (mobile crop)</text></svg>" alt="Banner" style="max-width:100%;height:auto;display:block;">
</picture>Formatos de imagen modernos: WebP y AVIF
El elemento <picture> permite seleccionar el formato. Sirva formatos modernos con una alternativa de respaldo:
<picture>
<source type="image/avif" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
<source type="image/webp" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>" alt="Photo" style="max-width:100%;height:auto;display:block;">
</picture>loading="lazy" para mejorar el rendimiento
El atributo loading="lazy" retrasa la carga de las imágenes que están fuera de la pantalla hasta que el usuario se desplaza cerca de ellas:
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ff6b6b'/><text x='20' y='260' font-size='26' fill='white'>product</text></svg>"
loading="lazy"
decoding="async"
alt="Product"
style="max-width:100%;height:auto;display:block;"
>Atributos width y height
Incluya siempre los atributos width y height en las imágenes. Permiten que el navegador reserve espacio en el diseño antes de que se cargue la imagen, lo que evita el desplazamiento del diseño (CLS).
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect width='800' height='600' fill='%234f8cff'/><circle cx='400' cy='300' r='200' fill='%23ffd700'/></svg>" width="800" height="600" loading="lazy" alt="Photo" style="max-width:100%;height:auto;">object-fit para imágenes en contenedores
Cuando una imagen está dentro de un contenedor de tamaño fijo, use object-fit para controlar cómo llena el espacio:
<img class="thumbnail" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='300'><rect width='800' height='300' fill='%23b57bff'/><text x='20' y='170' font-size='30' fill='white'>wide source photo</text></svg>" alt="thumbnail" />Comprobación rápida
¿Qué atributo HTML funciona junto con srcset para indicar al navegador el ancho de visualización de la imagen en distintos tamaños del viewport?
Resumen
Las imágenes adaptables usan srcset y sizes para servir imágenes con el tamaño adecuado. El elemento <picture> permite aplicar dirección artística y seleccionar formatos. Use siempre loading="lazy", los atributos width/height y object-fit para las imágenes dentro de contenedores.
Preguntas frecuentes
¿La lección «Imágenes adaptables y el elemento Picture» es gratis?
Sí — el texto completo de «Imágenes adaptables y el elemento Picture» 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 CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Imágenes adaptables y el elemento Picture»?
Proporcione imágenes con el tamaño adecuado mediante srcset, sizes y el elemento HTML picture. Practicas CSS 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 CSS Academy?
No se requiere experiencia previa. CSS 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 4 de 4.
¿Cuánto tiempo toma la lección «Imágenes adaptables y el elemento Picture»?
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 CSS Academy?
Sí. Cada lección de CSS 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
- Enfoque Mobile-First frente a Desktop-First
- Anchos fluidos con porcentajes
- Patrones Min-Width y Max-Width
- Imágenes adaptables y el elemento Picture