{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Imágenes: src, alt y tamaños

Aprende a usar imágenes con un `alt` útil, un layout responsive simple y una introducción clara a `picture`.

El atributo `alt` describe la imagen cuando no se carga y también ayuda a lectores de pantalla.

Usa `max-width: 100%` para que imágenes grandes no rompan el layout en móviles.

`object-fit: cover` y `contain` controlan cómo se recortan o ajustan sin deformarse.

`picture` + `source` sirve imágenes adaptadas a distintos anchos de pantalla.

  • Resumen con ideas principales para repasar rápido.
  • El atributo `alt` describe la imagen cuando no se carga y también ayuda a lectores de pantalla.
  • Usa `max-width: 100%` para que imágenes grandes no rompan el layout en móviles.
  • `object-fit: cover` y `contain` controlan cómo se recortan o ajustan sin deformarse.
  • `picture` + `source` sirve imágenes adaptadas a distintos anchos de pantalla.

Claves teóricas

Resumen con ideas principales para repasar rápido.

HTML
10

Imágenes: src, alt y tamaños

Aprende a usar imágenes con un `alt` útil, un layout responsive simple y una introducción clara a `picture`.

¿Cuánto sabes de HTML?

Código del tema: <img>

📘 Teoría

Claves teóricas

Resumen con ideas principales para repasar rápido.

1

alt descriptivo

Describe la función o el contenido de la imagen, no el nombre del archivo.

2

alt vacío

Usa `alt=""` cuando la imagen sea decorativa y no aporte información.

3

tamaños responsivos

Combina `width` y `height` con CSS para reducir saltos de layout.

4

object-fit

Controla recorte sin deformar: `cover` y `contain` son las opciones más comunes.

5

picture

Permite servir imágenes distintas según el ancho del dispositivo.

6

performance

Comprime y ajusta tamaños para mejorar carga y experiencia.

🧭 Visuales clave

Cómo funcionan picture, video y source

Sirve para visualizar cuándo usar source dentro de picture o multimedia y cómo se selecciona el recurso más adecuado.

Esquema de uso de picture, source y medios HTML adaptados al dispositivo

🧪 Aprende probando

Ejemplo Galería simple
⌄
Ejemplo picture + source explicado a fondo Ejemplo completo de `picture`: el navegador evalúa cada `source` de arriba abajo y usa la primera condición `media` que se cumple. Cambia el ancho de la ventana para ver cómo cambia la imagen según el viewport.
⌄

🏁 Retos

Reto Reto: alt útil Escribe un alt accesible para una imagen específica.
⌄
Reto Reto: figure y figcaption Envuelve la imagen en `figure` y añade un `figcaption` descriptivo.
⌄

🧰 Recursos

Enlaces útiles

MDN - img MDN - picture web.dev - Imágenes
Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML
Recursos del curso 27
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 09
Semántica HTML: estructura con header, main, section
Lección 11
Formularios básicos en HTML: label, input y validación nativa
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .