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.
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 --><imgsrc="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 --><imgsrc="img/foco.original.jpg"alt="vista de focos."><!-- Usar la versión optimizada --><imgsrc="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 --><imgsrc="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><imgsrc="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.
