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.