Image Size: Definición, Optimización Web, Mejores Prácticas

¿Qué es image size?

"Image size" (tamaño de imagen) significa tres cosas distintas en la web: las dimensiones en píxeles (por ejemplo 1920 x 1080), el peso del archivo en KB o MB que viaja por la red y el tamaño de visualización, es decir, lo grande que se dibuja la imagen en la página en píxeles CSS. Cada uno puede estar mal por separado y se corrige de forma distinta.

Una foto de 4000 x 3000 y 8 MB mostrada como miniatura de 200 x 150 desperdicia ancho de banda (se descarga el archivo completo) y CPU (el navegador la reduce). Una buena optimización de imágenes ajusta los tres.

Por qué importa el tamaño de imagen

Una imagen suele ser el elemento del Largest Contentful Paint, y según web.dev un LCP de 2,5 segundos o menos se considera bueno. La falta de dimensiones es una causa frecuente de cambios de diseño.

Cómo elegir el formato

Según web.dev, WebP y AVIF suelen comprimir mejor que los formatos antiguos y conviene usarlos siempre que se pueda. Ofrécelos con un respaldo en JPEG mediante <picture>. La diferencia entre la compresión con pérdida y sin pérdida tiene su propia entrada.

Servir el tamaño adecuado

Con srcset y sizes el navegador elige el candidato que encaja con el espacio de visualización y la densidad de pantalla, de modo que un móvil no descargue el archivo de escritorio. Define siempre width y height: permiten reservar espacio antes de que cargue la imagen.

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1200.avif 1200w"
          sizes="(max-width: 600px) 100vw, 1200px">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          sizes="(max-width: 600px) 100vw, 1200px">
  <img src="hero-1200.jpg" alt="Panel de producto"
       width="1200" height="675" decoding="async">
</picture>

Referencias de peso por tipo de imagen

Son presupuestos de trabajo, no estándares. Júzgalos con tu LCP medido, no con la cifra.

Mejores prácticas

• Redimensiona al mayor tamaño al que se muestra realmente la imagen y guarda una versión 2x solo donde las pantallas la necesiten.
• Comprime: una calidad con pérdida de entre 75 y 85 suele ser difícil de distinguir del original, pero compruébalo con tus imágenes.
• Usa loading="lazy" en las imágenes bajo el pliegue, pero no en la del LCP. La carga diferida retrasa la petición.
• Da a la imagen del LCP fetchpriority="high" y precárgala si el navegador la descubre tarde.
• Elimina los metadatos que la página no necesita, como EXIF.
• Sirve desde una CDN, idealmente una que convierta y redimensione bajo demanda.

Errores comunes con el tamaño de imagen

• Servir el original de la cámara a todos los dispositivos.
• No usar srcset, de modo que los móviles reciben archivos de escritorio.
• PNG para fotos: archivos enormes sin ganancia visible.
• JPEG para logos o cualquier cosa que necesite transparencia.
• Cargar de forma diferida la imagen principal, lo que retrasa el LCP.
• Omitir width y height.

Cómo medir el peso de las imágenes

Lighthouse señala las imágenes sobredimensionadas con la auditoría "Properly size images", que suspende una imagen cuando su tamaño mostrado es al menos 4 KiB menor que el real. La monitorización de velocidad de LoadFocus ejecuta auditorías de Lighthouse programadas desde 25 regiones en la nube y sigue las Core Web Vitals, así que una imagen principal pesada se ve como una regresión del LCP y no como una sorpresa. Para datos reales de usuarios, prueba el verificador gratuito de Core Web Vitals. Para leer más: por qué mejorar las imágenes de tu web y 10 pasos para acelerar tu web.

Preguntas frecuentes: image size

¿Cuál es el mejor formato de imagen para la web?

Para fotos, AVIF o WebP con respaldo en JPEG. Para logos e iconos, SVG. PNG cuando necesitas detalle sin pérdida y aceptas un archivo mayor.

¿Cuánto debe pesar una imagen principal?

No hay un límite fijo. Menos de unos 200 KB es un presupuesto inicial habitual. Compruébalo con tu LCP medido y ajústalo.

¿Debo cargar todas las imágenes de forma diferida?

No. Solo las que están bajo el pliegue. Carga la imagen del LCP de inmediato y valora fetchpriority="high" para ella.

¿Qué diferencia hay entre tamaño intrínseco y tamaño de visualización?

El tamaño intrínseco son las dimensiones reales en píxeles de la imagen. El de visualización es lo grande que se dibuja en píxeles CSS. El navegador escala, pero descarga igualmente la imagen completa.

¿Por qué pesan tanto las fotos en PNG?

PNG no tiene pérdida y conserva cada píxel. Las fotos tienen mucha variación de color que la compresión sin pérdida apenas reduce, mientras que JPEG, WebP y AVIF descartan detalle que el ojo casi no nota.

¿Cómo funciona srcset?

Listas la misma imagen en varios anchos. El navegador combina el ancho de visualización de sizes con la densidad de pantalla y descarga el mejor candidato.