Resumen

Insertar imágenes en HTML es más que mostrar una foto: es construir una estructura semántica, con accesibilidad y rendimiento. Aquí aprenderás a usar la etiqueta img, el atributo src para rutas, el alt para describir, y a optimizar archivos para que tu sitio cargue rápido.

¿Cómo insertar imágenes en HTML con la etiqueta img?

La etiqueta img renderiza imágenes directamente en el navegador. Es un elemento vacío: no lleva etiqueta de cierre. Debe colocarse dentro de body y necesita el atributo src para apuntar a la ruta del archivo y alt para la descripción.

<!-- Estructura básica -->
<img src="img/paisaje.jpg" alt="paisajes montañosos.">
  • img es un elemento sin contenido interno: no se cierra con slash.
  • src define la ruta relativa al archivo HTML.
  • alt aporta una descripción breve y útil.
  • Sin src no se muestra nada.

¿Cómo referenciar rutas y renderizar en el navegador?

Organiza una carpeta img y usa rutas relativas desde tu index.html. El editor suele autocompletar nombres de carpetas y archivos.

<!-- Dentro de index.html, apuntando a /img -->
<img src="img/montana-optimizada.jpg" alt="montañas con lago cristalino.">
  • Estructura clara de proyecto.
  • Ruta coherente con carpetas.
  • Guardar cambios y refrescar para ver el renderizado.

¿Qué diferencia tiene img respecto a otras etiquetas?

  • Es de tipo vacío: no lleva contenido entre etiquetas.
  • Sus valores viven en propiedades o atributos: src, alt, width, height.

¿Cómo optimizar imágenes para la web y mejorar rendimiento?

Las imágenes grandes ralentizan la carga. La buena práctica es reducir el peso del archivo antes de usarlo. Se mostró el uso de TinyPNG para comprimir imágenes pesadas y reemplazar versiones “original” por versiones optimizadas.

  • Regla práctica: alrededor de 200 KB por imagen para carga ágil.
  • Evitar imágenes de megabytes: son muy pesadas.
  • Ejemplo: de ~3 MB a 863 KB, y luego hasta 26 KB tras optimización adicional.
  • Verifica el peso real en las herramientas del navegador: pestaña Network muestra los KB/MB descargados.

Sugerencias aplicadas en el flujo: - Mantener dos archivos cuando convenga: nombre “original” y versión optimizada. - Reemplazar en src la versión “original” por la optimizada. - Probar la carga y el tamaño en Network para validar la mejora.

<!-- Evitar cargar el archivo pesado -->
<img src="img/foco.original.jpg" alt="vista de focos.">

<!-- Usar la versión optimizada -->
<img src="img/foco.jpg" alt="vista de focos.">

¿Cómo mejorar accesibilidad y semántica con alt, width, height, figure y figcaption?

El atributo alt es clave para accesibilidad: si la imagen falla, el usuario ve el texto alternativo y los lectores de pantalla lo anuncian. Además, puedes ajustar dimensiones con width y height cuando la imagen optimizada sigue siendo grande.

<!-- Dimensiones controladas en pixeles -->
<img src="img/foco.jpg" alt="vista de focos." width="200" height="150">
  • alt describe el contenido visual de forma concreta.
  • width y height ajustan el tamaño en el layout.

Para descripciones visibles bajo la imagen, utiliza figure y figcaption. Es una solución semántica superior a usar img + p dentro de un div.

<figure>
  <img src="img/montana-optimizada.jpg" alt="montañas con lago cristalino.">
  <figcaption>vista panorámica de los Alpes suizos.</figcaption>
</figure>
  • figure agrupa imagen y su contexto.
  • figcaption muestra una descripción visible asociada.
  • Mejora la semántica y la comprensión del contenido.

¿Tienes dudas sobre rutas, pesos en KB o el uso de figure y figcaption? Cuéntamelo en los comentarios y revisamos tu caso paso a paso.