La etiqueta para imagen en HTML

Las imágenes son elementos esenciales en cualquier página web, ya que pueden enriquecer el contenido o mejorar la estética del sitio. Dependiendo de su propósito, las imágenes pueden clasificarse en dos categorías principales:

  1. Imágenes de contenido: Son fundamentales para transmitir información o complementar el texto. Se insertan directamente en el HTML utilizando la etiqueta <img>.
  2. Imágenes decorativas: Sirven para mejorar el diseño visual sin aportar contenido informativo. Se suelen aplicar como fondos mediante CSS con la propiedad background-image.

📷 La etiqueta <img>

La etiqueta <img> permite incorporar imágenes en el contenido de una página web. Es una etiqueta auto-cerrada y requiere, al menos, dos atributos esenciales:

  • src: Especifica la ruta o URL de la imagen.blog.betrybe.com
  • alt: Proporciona una descripción alternativa de la imagen, útil para lectores de pantalla y en casos donde la imagen no se carga correctamente.

Ejemplo básico:

htmlCopiarEditar<img src="logo.png" alt="Logotipo de la empresa">

Atributos adicionales:

  • width y height: Definen las dimensiones de la imagen en píxeles. Aunque no son obligatorios, especificarlos ayuda al navegador a reservar el espacio adecuado antes de que la imagen se cargue, evitando saltos en el diseño.Elementor
  • loading: Controla la estrategia de carga de la imagen.
    • eager: Carga inmediata (por defecto).
    • lazy: Carga diferida hasta que la imagen esté cerca de entrar en el viewport.Elementor
  • decoding: Indica cómo debe el navegador decodificar la imagen.
    • sync: Decodificación síncrona.
    • async: Decodificación asíncrona.
    • auto: El navegador decide la mejor estrategia.Elementor
  • fetchpriority: Establece la prioridad de descarga de la imagen.

🖼️ Imágenes responsivas con srcset y sizes

Para adaptar las imágenes a diferentes dispositivos y resoluciones, se utilizan los atributos srcset y sizes en la etiqueta <img>.

  • srcset: Define una lista de imágenes con diferentes resoluciones o tamaños. Ejemplo:
htmlCopiarEditar  <img src="imagen-800.jpg" 
       srcset="imagen-400.jpg 400w, imagen-800.jpg 800w, imagen-1200.jpg 1200w" 
       alt="Descripción de la imagen">

En este caso, el navegador seleccionará la imagen más adecuada según la resolución de la pantalla y las condiciones definidas en sizes.

  • sizes: Especifica el tamaño que la imagen debe ocupar en diferentes condiciones de visualización. Ejemplo:
htmlCopiarEditar  <img src="imagen-800.jpg" 
       srcset="imagen-400.jpg 400w, imagen-800.jpg 800w, imagen-1200.jpg 1200w" 
       sizes="(max-width: 600px) 480px, 800px" 
       alt="Descripción de la imagen">

Aquí, si el ancho de la ventana es de 600 píxeles o menos, la imagen ocupará 480 píxeles; en otros casos, ocupará 800 píxeles.

Estos atributos permiten que el navegador elija la mejor opción de imagen, optimizando la carga y la visualización en distintos dispositivos. MDN Web Docs

🎯 Mejores prácticas

  • Accesibilidad: Siempre proporciona un texto alternativo descriptivo en el atributo alt para mejorar la accesibilidad.
  • Rendimiento: Utiliza loading="lazy" para imágenes que no son críticas en la carga inicial de la página.Elementor
  • Diseño responsivo: Emplea srcset y sizes para adaptar las imágenes a diferentes tamaños de pantalla y resoluciones.
  • Evita distorsiones: Mantén la proporción de aspecto de las imágenes para prevenir deformaciones visuales.
  • Optimización: Comprime las imágenes y utiliza formatos modernos como WebP para reducir el tamaño de los archivos sin perder calidad.

Implementar correctamente las imágenes en HTML no solo mejora la estética de tu sitio web, sino que también contribuye a una mejor experiencia de usuario y a un rendimiento más eficiente.