Cómo insertar imágenes en HTML paso a paso con ejemplos claros

Agregar imágenes a un sitio web es esencial para hacerlo más visual, atractivo y comprensible. En este artículo te enseñaré paso a paso cómo insertar imágenes en HTML, explicando la sintaxis, atributos importantes y buenas prácticas para lograr una visualización correcta en cualquier navegador.

¿Qué etiqueta se usa para insertar imágenes en HTML?

Para insertar imágenes en una página web usamos la etiqueta <img>. Esta es una etiqueta vacía, lo que significa que no tiene una etiqueta de cierre como otras (<p>, <div>, etc.).

<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">

Paso 1: Usar la etiqueta `<img>`

La sintaxis básica incluye dos atributos esenciales:

src: Indica la ruta o URL de la imagen.
alt: Es el texto alternativo que se muestra si la imagen no carga y es importante para la accesibilidad y el SEO.

Ejemplo:

<img src="imagenes/foto.jpg" alt="Fotografía de un atardecer">

Paso 2: Asegúrate de que la ruta sea correcta

Puedes usar:

Rutas relativas: Si la imagen está en la misma carpeta que tu archivo HTML o en una subcarpeta.
Rutas absolutas o URL externas: Si la imagen está en otro sitio web o servidor.

<!-- Ruta relativa -->
<img src="assets/logo.png" alt="Logo de la empresa">

<!-- Ruta absoluta -->
<img src="https://example.com/imagenes/banner.jpg" alt="Banner promocional">

Paso 3: Agregar atributos adicionales útiles

Tamaño:

<img src="foto.jpg" alt="Ejemplo" width="300" height="200">

Nota: Aunque puedes usar width y height en HTML, es preferible controlarlo con CSS para una mejor práctica.

Título:

<img src="ejemplo.jpg" alt="Ejemplo de imagen" title="Pasa el cursor aquí">

Paso 4: Optimiza para SEO y accesibilidad

Usa nombres de archivo descriptivos: foto-playa.jpg es mejor que img1.jpg.
Siempre incluye el atributo alt.
Usa imágenes comprimidas y en formatos adecuados como .webp o .jpg para mejorar la velocidad de carga.

Paso 5: Usa CSS para mejorar el estilo

Aunque HTML es suficiente para insertar una imagen, puedes usar CSS para personalizarla visualmente:

<img src="foto.jpg" alt="Descripción" class="imagen-redonda">

.imagen-redonda {
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

Insertar imágenes en HTML es una de las habilidades más básicas y útiles al crear páginas web. Con solo una línea de código puedes mejorar visualmente cualquier sitio. Asegúrate de usar buenas prácticas para asegurar una buena experiencia para todos los usuarios y un mejor posicionamiento en buscadores.

html