Aprender a insertar imágenes en HTML con la etiqueta img es clave para construir páginas web con contenido visual optimizado. Aquí verás cómo cargar imágenes, mejorar su rendimiento y hacerlas accesibles, ideal para quienes empiezan en desarrollo web.

El HTML te permite estructurar contenido de texto, imágenes y video. Cuando agregas imágenes, no solo importa que se vean: también importa cómo cargan, cómo se describen y cómo se integran con el resto del contenido.

¿Cómo se usa la etiqueta img en HTML?

La etiqueta img es la encargada de renderizar imágenes en el navegador. A diferencia de body o head, esta etiqueta no se cierra con un slash porque no lleva contenido entre aperturas y cierres. Todo lo que necesita va dentro de la etiqueta de apertura como propiedades [02:30].

Para que una imagen aparezca, necesitas indicarle al navegador dónde encontrarla. Eso lo haces con el atributo src (source), que apunta a la ruta del archivo dentro de tu proyecto.

html <img src="img/paisaje.jpg">

Si tu archivo HTML está en la misma raíz que la carpeta img, basta con escribir el nombre de la carpeta seguido del nombre de la imagen. El editor te va autocompletando las rutas disponibles.

¿Por qué la etiqueta img no se cierra? Porque no contiene texto ni elementos hijos. Toda su información, como la fuente y la descripción, vive dentro de la etiqueta de apertura como atributos.

¿Por qué optimizar imágenes antes de subirlas al sitio?

Una imagen sin optimizar puede pesar varios megabytes y hacer que tu sitio cargue lento. La buena práctica es mantener las imágenes alrededor de 200 KB o menos para asegurar una carga rápida en el navegador [05:40].

Una herramienta útil es TinyPNG, donde arrastras la imagen y la página la comprime automáticamente. En el ejemplo de la clase, una imagen original de 3 MB bajó a 863 KB y luego a solo 26 KB tras optimizarla por segunda vez.

Para revisar el peso real de tus imágenes en el navegador, puedes usar la herramienta de inspección en la pestaña Network, refrescar la página y ver cuántos kilobytes está descargando cada recurso.

• Imágenes en megabytes ralentizan el sitio.
• El rango ideal está entre 100 y 250 KB.
• Optimizar mejora tanto la experiencia como el SEO.

Después de comprimir, reemplaza la versión original por la optimizada en tu carpeta img y actualiza la ruta en src.

¿Para qué sirve el atributo alt en una imagen?

El atributo alt describe el contenido de la imagen y es fundamental para la accesibilidad. Si la imagen no carga por algún error, el navegador muestra el texto del alt en su lugar.

html <img src="img/paisaje.jpg" alt="paisajes montañosos">

Más importante aún: las personas con problemas visuales que navegan con lectores de pantalla dependen del alt para entender qué hay en la imagen. El software lee la descripción y les da contexto sobre el contenido visual.

¿Qué pasa si dejo el alt vacío? Pierdes accesibilidad y SEO. Los lectores de pantalla no podrán describir la imagen y los buscadores no entenderán de qué trata.

Nunca dejes el alt en blanco si la imagen aporta información. Es una práctica básica de inclusión y de buen desarrollo web.

¿Cómo controlar el tamaño de una imagen con width y height?

A veces tienes una imagen optimizada pero con dimensiones más grandes de lo que tu diseño necesita. Para eso existen las propiedades width (ancho) y height (alto), que se escriben en píxeles dentro de la etiqueta [10:15].

html <img src="img/foco.jpg" alt="vista de focos" width="200" height="150">

Con estas propiedades puedes ajustar visualmente la imagen sin modificar el archivo original. Son útiles cuando necesitas un tamaño específico dentro del layout.

• width controla el ancho en píxeles.
• height controla la altura en píxeles.
• Ambas se escriben como atributos dentro de la etiqueta img.

Usa estas propiedades con criterio: si abusas de ellas en imágenes muy grandes, el navegador igual descarga el archivo completo aunque lo muestre pequeño.

¿Cómo agregar una descripción visible con figure y figcaption?

Cuando necesitas que tu imagen tenga una descripción visible debajo, la combinación ganadora es figure más figcaption. A diferencia de img, ambas etiquetas sí tienen apertura y cierre porque contienen otros elementos.

html

<figure> <img src="img/montanas.jpg" alt="montañas con lago cristalino"> <figcaption>Vista panorámica de los Alpes suizos</figcaption> </figure>

La etiqueta figure agrupa la imagen y su descripción como un solo elemento semántico. El figcaption muestra el texto debajo de la imagen y queda visible para cualquier usuario [13:50].

Algunos developers usan un div con un párrafo debajo de la imagen para lograr el mismo efecto visual. Funciona, pero pierdes la semántica que aporta figure. Cuando inspeccionas el HTML, ves que tu imagen y su caption forman parte de un mismo elemento, lo que ayuda a buscadores y lectores de pantalla a entender la relación entre ambos.

Usa figure y figcaption siempre que la descripción sea parte del contenido visual: fotos con pie de foto, ilustraciones técnicas o gráficas con notas explicativas.

¿Ya probaste optimizar tus propias imágenes con TinyPNG? Cuéntame en los comentarios cuánto bajó el peso de tu archivo.