La Etiqueta IMG

La etiqueta <img> permite incrustar imágenes en una página web. Es esencial para mostrar contenido visual como fotografías, gráficos, iconos o logotipos. Aquí aprenderás a usarla correctamente, optimizando para rendimiento y accesibilidad.

Sintaxis básica

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

• src: Ruta de la imagen (obligatoria).

• alt: Texto alternativo (obligatorio para accesibilidad).

• width y height: Dimensiones en píxeles (opcionales, pero recomendados).

Atributos clave

Atributo	Descripción
src	URL de la imagen (absoluta o relativa).
alt	Texto descriptivo para accesibilidad y si la imagen no carga.
srcset	Define imágenes alternativas para diferentes resoluciones (responsive).
sizes	Especifica tamaños según condiciones de medios (ej: (max-width: 600px)).
loading	Controla la carga diferida (lazy para imágenes fuera de la pantalla inicial).
title	Texto informativo que aparece al pasar el cursor (no sustituye a alt).

Ejemplos prácticos

Imagen básica

<img 
  src="foto.jpg" 
  alt="Montañas nevadas al atardecer" 
  width="1200" 
  height="800"
>

Imagen responsive con srcset

<img 
  src="imagen-default.jpg" 
  srcset="
    imagen-small.jpg 480w,
    imagen-medium.jpg 768w,
    imagen-large.jpg 1200w
  " 
  sizes="(max-width: 600px) 480px, 800px" 
  alt="Paisaje natural"
>

Lazy loading para mejorar el rendimiento

<img 
  src="banner.jpg" 
  alt="Oferta especial" 
  loading="lazy" 
  width="1600" 
  height="900"
>

Accesibilidad

alt descriptivo:

<!-- Incorrecto -->
<img src="logo.png" alt="Logo"> 

<!-- Correcto -->
<img src="logo.png" alt="Logo de TechCorp: un globo terráqueo digital">

Imágenes decorativas: Si la imagen no aporta información, usa alt="".

Evitar texto en imágenes: Si es necesario, repite el texto en alt.

Estilización con CSS

Personaliza la apariencia:

img {
  border-radius: 8px; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%; /* Responsive */
  height: auto; /* Mantiene la proporción */
}

/* Imagen circular */
img.avatar {
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

Errores comunes

Olvidar el atributo alt

<!-- Incorrecto -->
<img src="foto.jpg"> 

Usar width y height incorrectos

<!-- Distorsiona la imagen -->
<img src="foto.jpg" width="500" height="300" style="width: 800px;"> 

No optimizar imágenes

• Subir imágenes pesadas (mejor usar formatos modernos como WebP o AVIF).

• No usar loading="lazy" para imágenes fuera de la pantalla inicial.

Mejores prácticas

1. Optimiza el formato:

   • WebP: Mejor relación calidad/tamaño.

   • JPEG: Para fotografías.

   • PNG: Para gráficos con transparencia.

2. Usa srcset y sizes: Adapta imágenes a diferentes dispositivos.

3. Especifica width y height: Prevista cambios de layout durante la carga.

4. Lazy loading: Mejora el rendimiento con loading="lazy".

Ejemplo avanzado (Imagen con figura y leyenda)

<figure>
  <img 
    src="aurora-boreal.jpg" 
    alt="Aurora boreal en Noruega" 
    width="1920" 
    height="1080"
    loading="lazy"
  >
  <figcaption>Fotografía tomada en Tromsø, Noruega. Créditos: Jane Doe</figcaption>
</figure>

Seguridad y derechos

• No hotlinkear imágenes externas: Usa siempre imágenes propias o con licencia.

• Atribución: Respeta los derechos de autor (especialmente en Creative Commons).

Conclusión:

La etiqueta <img> es clave para integrar contenido visual en la web. Recuerda:

• Prioriza la accesibilidad con alt descriptivo.

• Optimiza el rendimiento con formatos modernos y lazy loading.

• Usa <figure> y <figcaption> para imágenes con contexto.

¡Convierte tus páginas en experiencias visuales atractivas y eficientes!