Saltar al contenido principal

Ejercicio práctico 5: Implementar imágenes en html

En este ejercicio práctico aprenderás a insertar y configurar imágenes en HTML, utilizando la etiqueta <img> y atributos esenciales como src, alt, width y height para mejorar la accesibilidad y presentación visual.

Actividad​

Crea un documento HTML que incluya una imagen usando la etiqueta <img> y sus atributos alt, width y height. La imagen puede ser de una fuente externa a tu sitio web.

Solución interactiva​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML completo​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Imágenes</title>
  </head>
  <body>
    <h1>Imagen</h1>
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      alt="Descripción de la imagen"
      width="360"
      height="200"
    />
  </body>
</html>

Variantes del mismo ejercicio​

Variante 1: Imagen con <figure> y <figcaption>​

Para imágenes con contexto o pie de foto, HTML5 introdujo las etiquetas semánticas <figure> y <figcaption>.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Imagen con Figura</title>
  </head>
  <body>
    <h1>Galería de Ejemplos</h1>

    <figure>
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="Tarjeta social de DivZone Docs mostrando el logo y branding"
        width="360"
        height="200"
      />
      <figcaption>Fig. 1 - Tarjeta de presentación de DivZone Docs</figcaption>
    </figure>

    <figure>
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="Segunda vista de la tarjeta social de DivZone"
        width="300"
        height="167"
      />
      <figcaption>Fig. 2 - Versión reducida de la misma imagen</figcaption>
    </figure>
  </body>
</html>

<figure> agrupa la imagen con su descripción, y <figcaption> proporciona el texto del pie de foto. Esto mejora la semántica y la accesibilidad.

Variante 2: Optimización de rendimiento con loading="lazy"​

Para páginas con muchas imágenes, el atributo loading="lazy" retrasa la carga de imágenes que no están visibles, acelerando la carga inicial.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Imágenes Lazy</title>
  </head>
  <body>
    <h1>Página con muchas imágenes</h1>

    <!-- La primera imagen carga normalmente (está visible) -->
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      alt="Imagen visible al cargar"
      width="360"
      height="200"
    />

    <!-- Imágenes con lazy loading: solo cargan al hacer scroll -->
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      alt="Imagen que carga al hacer scroll"
      width="360"
      height="200"
      loading="lazy"
    />
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      alt="Otra imagen diferida"
      width="360"
      height="200"
      loading="lazy"
      decoding="async"
    />
  </body>
</html>
  • loading="lazy": carga la imagen solo cuando está por entrar al viewport.
  • decoding="async": permite que la imagen se decodifique en segundo plano sin bloquear el renderizado de la página.

Variante 3: Imágenes responsive con srcset y sizes​

Para que las imágenes se vean bien en cualquier dispositivo sin descargar archivos enormes en móviles, usá srcset y sizes.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Imágenes Responsive</title>
  </head>
  <body>
    <h1>Imagen Adaptable</h1>

    <!-- La imagen cambia según el ancho de pantalla -->
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      srcset="
        https://docs.div.zone/img/divzone-social-card.jpg   360w,
        https://docs.div.zone/img/divzone-social-card.jpg   720w,
        https://docs.div.zone/img/divzone-social-card.jpg  1200w
      "
      sizes="
        (max-width: 600px) 100vw,
        (max-width: 900px) 50vw,
        33vw
      "
      alt="Imagen responsive que se adapta al tamaño de pantalla"
      width="360"
      height="200"
    />
  </body>
</html>
  • srcset: lista de imágenes con sus anchos reales (360w, 720w, 1200w).
  • sizes: indica al navegador qué tamaño ocupará la imagen en diferentes breakpoints.
  • El navegador elige automáticamente la mejor resolución según el dispositivo y la densidad de píxeles.

Variante 4: Imagen rota — el poder de alt​

El atributo alt no solo es para SEO: es lo que se muestra cuando la imagen no carga.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Imagen Rota</title>
  </head>
  <body>
    <h1>Qué pasa cuando una imagen no carga</h1>

    <!-- Imagen que carga correctamente -->
    <figure>
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="Logo de DivZone Docs en fondo oscuro con texto blanco"
        width="360"
        height="200"
      />
      <figcaption>✓ Imagen cargada correctamente</figcaption>
    </figure>

    <!-- Imagen con ruta incorrecta: muestra el texto alternativo -->
    <figure>
      <img
        src="https://sitio-que-no-existe.com/imagen-rota.jpg"
        alt="Logo de DivZone Docs en fondo oscuro con texto blanco"
        width="360"
        height="200"
      />
      <figcaption>✗ Imagen rota — fijate que se muestra el texto alternativo</figcaption>
    </figure>
  </body>
</html>

Un buen alt describe la imagen de forma clara y concisa, permitiendo que usuarios con lectores de pantalla entiendan qué contiene.

Mini-desafío: Ponelo a prueba​

Creá una página HTML que contenga:

  • Un <h1> con el título "Mi Galería"
  • Dos imágenes dentro de etiquetas <figure> con su respectivo <figcaption>
  • A la segunda imagen agregale loading="lazy"
  • Una tercera imagen a propósito con una URL incorrecta para ver cómo se comporta el alt
  • Todas las imágenes deben tener alt descriptivo, width y height

Escribí el código desde cero. Si te trabás, volvé a las variantes 1 y 4.

Errores comunes con imágenes HTML​

ErrorPor qué es un problema
Olvidar el atributo altLos lectores de pantalla no pueden describir la imagen y el SEO pierde contexto. Es obligatorio por accesibilidad WCAG
No definir width y heightLa página "salta" cuando las imágenes terminan de cargar (layout shift). Definir dimensiones reserva el espacio de antemano
Usar imágenes enormes sin optimizarUna foto de 4000px en un espacio de 400px hace que la página pese megas innecesarios. Redimensioná y comprimí antes de subir
Rutas incorrectas en srcSi la URL es inválida o relativa mal escrita, la imagen no se muestra. Verificá siempre las rutas
Poner texto largo en altalt debe ser descriptivo pero conciso (125 caracteres máximo recomendado). No es un figcaption extendido

Preguntas frecuentes​

¿El atributo alt es obligatorio?​

Sí, la especificación HTML5 y las pautas de accesibilidad WCAG requieren el atributo alt en todas las imágenes <img>. Si la imagen es puramente decorativa, podés usar alt="" (vacío) para que los lectores de pantalla la ignoren. Pero si la imagen aporta contenido, siempre debe tener una descripción significativa.

¿Cómo evito que una imagen se deforme al cambiar su tamaño?​

Definí width y height con los valores reales de la imagen, y usá CSS max-width: 100% y height: auto para que escale proporcionalmente. Si solo cambiás uno de los dos atributos sin mantener la relación de aspecto, la imagen se estira o aplasta. La propiedad CSS object-fit: cover o object-fit: contain también ayuda a controlar cómo la imagen se ajusta a su contenedor.

🚀 Practicá con DivZone AI

¿Ya sabés insertar imágenes? Creá una galería de imágenes con DivZone AI y analizá cómo se usan los atributos src, alt, width y height en un proyecto generado automáticamente. ¡Ver código real es la mejor forma de aprender!