Imágenes en HTML: buenas prácticas de rendimiento y accesibilidad

Publicado: 08/12/2025 Por: Juan Felipe Orozco Cortés
📚 Contenido de la guía ⌃

Las imágenes son, casi siempre, el recurso que más pesa en una página web. También son de lo que más ayuda a explicar ideas y vender productos. Esta guía reúne las buenas prácticas mínimas que deberías aplicar en todos tus proyectos: desde cómo guardar el archivo, hasta cómo escribir el img para que cargue rápido y se entienda con lectores de pantalla.

Vamos a ver las imágenes como un sistema de tres piezas que trabajan juntas: el archivo que subes, el HTML que escribes y la experiencia de la persona que visita tu sitio. Cada figura de la guía resume visualmente una parte de ese sistema.

Diagrama en triángulo que conecta archivo, HTML y persona alrededor de una imagen saludable.
Figura 1: Una imagen web saludable nace del archivo, el HTML y la experiencia de la persona.

1. Antes de optimizar, decide para qué sirve la imagen

No todas las imágenes son iguales. Algunas son puro adorno, otras explican una idea clave y otras son parte de la interfaz (iconos de menú, botones de cerrar, etc.). Saber qué tipo de imagen tienes te ayuda a decidir el alt, el formato y hasta si deberías usar un fondo CSS en lugar de un <img>.

  • Decorativas: no añaden información nueva. Fondos, texturas, adornos.
  • Informativas: explican o refuerzan una idea (diagramas, gráficos, capturas).
  • Funcionales / UI: iconos que disparan acciones (botones, menús, estados).
  • Complejas: gráficos con muchos detalles que necesitan explicación extra.

En la siguiente figura tienes una clasificación visual de estos tipos para que tomes la decisión correcta antes de escribir una sola etiqueta.

Diagrama que clasifica las imágenes de una página como decorativas, informativas o de interfaz.
Figura 2: Clasificación rápida de las imágenes según su intención.

2. Anatomía de un img que carga rápido y no mueve todo

La mayoría de problemas de rendimiento con imágenes no viene del backend, sino de un img mal escrito. Si cuidas estos atributos, ya vas muy por delante:

  • src: la URL optimizada (formato y tamaño correctos).
  • alt: el significado de la imagen (o vacío si es decorativa).
  • width / height: reservan espacio y reducen Cumulative Layout Shift (CLS).
  • loading="lazy": carga diferida para imágenes fuera del viewport.
  • decoding="async": le da margen al navegador para pintar sin bloquear.

La siguiente figura es un mapa visual de estos atributos alrededor de un mismo img.

Diagrama que señala alt, width, height, loading y decoding alrededor de un elemento img.
Figura 3: Mapa visual de los atributos que convierten un img normal en uno saludable. 
<img
  class="imagen-responsiva"
  src="https://tucodigocotidiano.yarumaltech.com/files/portatil_800.avif"
  alt="Desarrolladora escribiendo código en un portátil sobre un escritorio ordenado."
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
/>

3. Tamaño, relación de aspecto y el miedo al CLS

Cuando no indicas width y height, el navegador no sabe cuánto ocupa la imagen hasta que la descarga. Eso provoca “saltos” de layout que afectan la métrica CLS (Cumulative Layout Shift).

Truco moderno: puedes usar width y height reales de la imagen, y dejar que el navegador calcule automáticamente la relación de aspecto. Incluso puedes usar aspect-ratio en CSS para reservar el espacio antes de que cargue. 

<style>
  .hero-imagen {
    max-width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
  }
</style>

<img
  class="hero-imagen"
  src="/files/hero_blog_1200.jpg"
  alt="Cabecera del blog con interfaz limpia y código en pantalla."
  width="1200"
  height="600"
  loading="lazy"
  decoding="async"
/>

4. Formatos de imagen: el archivo también es una decisión de rendimiento

No es lo mismo una foto que un icono vectorial. Elegir el formato correcto puede reducir el peso a la mitad sin perder calidad visible.

  • JPEG / JPG: fotos, degradados suaves, sin necesidad de transparencia fina.
  • PNG: iconos con pocos colores, transparencia nítida, capturas de pantalla.
  • SVG: logos e ilustraciones vectoriales, escalables sin perder nitidez.
  • WebP / AVIF: versiones modernas, menos peso para fotos e ilustraciones.

La siguiente figura resume los usos recomendados para cada formato.

Tarjetas comparando formatos de imagen: JPG, PNG, SVG, WebP y AVIF, con sus usos recomendados.
Figura 4: Resumen visual de los formatos de imagen más comunes en la web.

5. Imágenes responsivas: no envíes 1200px a un móvil de 360px

Con srcset y sizes puedes ofrecer varias versiones de la misma imagen y dejar que el navegador elija cuál descargar según el tamaño real de la pantalla y del layout.

La idea es simple:

  • srcset: lista de archivos con su anchura intrínseca (400w, 800w, 1200w…).
  • sizes: “si el viewport mide tanto, la imagen ocupa aproximadamente X”.

La figura siguiente representa la misma imagen en móvil, tablet y escritorio, con pesos distintos según el dispositivo.

Tres dispositivos mostrando la misma imagen con diferentes resoluciones y pesos.
Figura 5: Servir la misma imagen con pesos distintos según el dispositivo. 
<img
  class="imagen-responsiva"
  src="https://tucodigocotidiano.yarumaltech.com/files/hero_800.jpg"
  srcset="
    https://tucodigocotidiano.yarumaltech.com/files/hero_400.jpg 400w,
    https://tucodigocotidiano.yarumaltech.com/files/hero_800.jpg 800w,
    https://tucodigocotidiano.yarumaltech.com/files/hero_1200.jpg 1200w
  "
  sizes="
    (max-width: 640px) 92vw,
    (max-width: 1024px) 80vw,
    720px
  "
  alt="Misma escena adaptada a móvil, tablet y escritorio."
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
/>

Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.

← Volver a Guías

Comentarios y Valoraciones

No hay comentarios aún. ¡Sé el primero en opinar!

Por favor espere...