Cómo Insertar y Optimizar Imágenes en HTML 🖼️

Las imágenes son elementos visuales cruciales que enriquecen cualquier página web, capturando la atención del usuario y transmitiendo información de manera efectiva. HTML proporciona la etiqueta <img> para incluir estos recursos, y su uso correcto, junto con una adecuada optimización, es vital para el rendimiento y la accesibilidad de tu sitio.

La Etiqueta <img>: Sintaxis y Atributos Básicos 🏷️

La etiqueta <img> es la encargada de insertar imágenes en un documento HTML. Es una etiqueta vacía (auto-cerrada), lo que significa que no necesita una etiqueta de cierre separada.

La sintaxis fundamental incluye dos atributos esenciales:

src (Source): Este atributo especifica la ubicación o ruta del archivo de imagen. Puede ser una ruta relativa (dentro de tu propio proyecto) o una URL absoluta (a una imagen alojada en otro servidor).
```
<img src="assets/imagen-paisaje.jpg">
```
alt (Alternative Text): Proporciona un texto alternativo que describe la imagen. Este texto es crucial por varias razones:
- Accesibilidad: Los lectores de pantalla para personas con discapacidad visual leen este texto, permitiéndoles entender el contenido de la imagen.
- SEO (Optimización para Motores de Búsqueda): Los motores de búsqueda utilizan el texto alt para comprender de qué trata la imagen, lo que puede mejorar el posicionamiento de tu página.
- Copia de Seguridad: Si la imagen no se carga (por un error en la ruta, una conexión lenta, etc.), el texto alternativo se mostrará en su lugar.
```
<img src="logo.png" alt="Logotipo de nuestra empresa de diseño gráfico">
```

Atributos Comunes para Controlar Imágenes 🛠️

Además de src y alt, existen otros atributos útiles:

width y height: Definen las dimensiones de la imagen en píxeles o porcentajes. Es importante especificar ambos para evitar cambios de diseño bruscos (layout shifts) durante la carga de la página. Puedes usar auto para que el navegador calcule la dimensión proporcionalmente.
```
<img src="producto.jpg" alt="Teléfono inteligente" width="300" height="200">
<img src="banner.jpg" alt="Oferta de verano" width="100%" height="auto">
```
loading: Controla cómo se carga la imagen. El valor lazy es excelente para el rendimiento, ya que le indica al navegador que cargue la imagen solo cuando esté cerca de la ventana de visualización del usuario, no al inicio.
```
<img src="galeria-vacaciones.jpg" alt="Familia en la playa" loading="lazy">
```
border (Obsoleto en HTML5 para Estilo): Aunque existió en versiones anteriores de HTML para añadir un borde a la imagen (ej. border="5"), en HTML5 se desaconseja su uso para estilizado. La apariencia de los bordes debe controlarse exclusivamente con CSS para mantener la separación entre contenido y presentación. Si una imagen es un enlace, el navegador puede aplicar un borde predeterminado (a menudo azul), que también debe eliminarse o estilizarse con CSS.

Formatos de Imagen para la Web y Optimización 📊

Elegir el formato de imagen adecuado y optimizarlas es crucial para la velocidad de carga de tu página web. Los navegadores web soportan principalmente los siguientes formatos:

JPEG (.jpg / .jpeg):
- Características: Formato con compresión con pérdida, lo que significa que elimina cierta información para reducir el tamaño del archivo. No soporta transparencia ni animación.
- Uso Ideal: Fotografías y imágenes con muchos colores y degradados suaves, donde una ligera pérdida de calidad no es perceptible y el tamaño de archivo es prioritario.
PNG (.png):
- Características: Formato con compresión sin pérdida, lo que garantiza que la calidad de la imagen no se degrade. Es ideal para gráficos que requieren transparencia (PNG-24 y PNG-32) y para imágenes con áreas de color uniforme. No soporta animación.
- Uso Ideal: Logotipos, iconos, ilustraciones, gráficos con texto y cualquier imagen que requiera transparencia o alta fidelidad de color sin pérdida.
GIF (.gif):
- Características: Formato de compresión sin pérdida, limitado a 256 colores. Permite animaciones simples.
- Uso Ideal: Animaciones cortas y simples (gifs animados) e imágenes con pocos colores y formas simples (como iconos muy básicos), aunque PNG suele ser mejor para imágenes estáticas.
SVG (.svg):
- Características: Gráficos vectoriales escalables. Son imágenes basadas en XML, lo que significa que se pueden escalar a cualquier tamaño sin perder calidad y tienen un tamaño de archivo muy pequeño para gráficos simples. Se pueden animar con CSS/JS.
- Uso Ideal: Logotipos, iconos, ilustraciones, gráficos e infografías que necesitan ser nítidos en cualquier resolución.
WebP (.webp):
- Características: Formato moderno desarrollado por Google. Ofrece una compresión superior (tanto con como sin pérdida) a JPEG y PNG, resultando en archivos más pequeños sin comprometer significativamente la calidad. Soporta transparencia y animación.
- Uso Ideal: Es un formato versátil y cada vez más recomendado para todo tipo de imágenes en la web, siempre que se asegure la compatibilidad con navegadores (aunque ya es muy amplia).

Técnicas de Optimización de Imágenes 📈

Más allá de elegir el formato correcto, la optimización es clave:

Comprimir Imágenes: Utiliza herramientas online como TinyPNG, ImageOptim (para macOS) o Squoosh para reducir el tamaño del archivo sin una pérdida notoria de calidad. Esto acelera la carga de la página.
Dimensiones Adecuadas: Redimensiona las imágenes a las dimensiones exactas en que se mostrarán en la web antes de subirlas. No subas una imagen de 4000px si solo se mostrará a 800px.

Mejora Semántica con <figure> y <figcaption> 📚

Para asociar una descripción o título a una imagen de forma semántica, HTML5 introdujo las etiquetas <figure> y <figcaption>:

<figure>
    <img src="img/edificio-moderno.jpg" alt="Edificio de arquitectura moderna en una ciudad">
    <figcaption>Un ejemplo de arquitectura contemporánea que domina el horizonte urbano.</figcaption>
</figure>

<figure>: Representa contenido auto-contenido, como ilustraciones, diagramas, fotografías o listados de código.
<figcaption>: Proporciona una leyenda o descripción para el contenido de <figure>.

Aunque visualmente la página pueda verse similar a si el texto estuviera en un párrafo regular, a nivel semántico esta estructura le indica a los buscadores y a las tecnologías asistivas que el texto de figcaption está directamente asociado y describe la imagen. Esto contribuye significativamente al SEO y a la accesibilidad, mejorando el posicionamiento en los resultados de búsqueda de imágenes.

Optimizar la inserción de imágenes no solo mejora el atractivo visual, sino que también es fundamental para la velocidad de carga, la accesibilidad y el posicionamiento de tu sitio web.