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

¿Qué es image size?

"Image size" en la web es un término confuso porque significa tres cosas distintas:

• Dimensiones (intrinsic size) — width × height en píxeles.
• Tamaño archivo (byte size) — cuántos KB/MB.
• Tamaño display (rendered size) — qué tan grande aparece en el viewport.

Cada uno es independientemente optimizable.

Por qué importa image size

Tamaños archivo recomendados

Comparación formatos imagen

Imágenes responsivas

<picture>
  <source srcset="hero-800.avif 800w, hero-1200.avif 1200w"
          type="image/avif">
  <source srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          type="image/webp">
  <img src="hero-1200.jpg"
       width="1200" height="675"
       loading="lazy">
</picture>

Mejores prácticas image size

• Especificar width + height attrs.
• Comprimir agresivamente.
• Usar formatos modernos.
• Resize a display size.
• srcset para responsive.
• Lazy-load below-fold.
• Preload hero image.
• CDN con image optimization.
• Strip metadata.
• SVG para iconos + logos.

Pitfalls comunes

• Servir full-resolution a móvil.
• Sin srcset.
• Width/height faltantes.
• PNG para fotos.
• JPEG para transparencia.
• Formatos no optimizados.
• Bloat memoria decodificada.

Herramientas para optimizar

FAQ: image size

¿Mejor formato imagen?

Para fotos: AVIF con WebP y JPEG fallbacks.

¿Cuán pequeño hero image?

Bajo 200KB ideal.

¿Lazy-load todas las imágenes?

No — solo below-the-fold.

¿Diferencia intrinsic size vs display size?

Intrinsic = dimensiones reales. Display = qué tan grande en CSS.

¿Por qué PNG produce archivos enormes para fotos?

PNG es lossless.

¿Cómo funciona srcset?

Navegador picks mejor imagen según viewport.

¿Tamaño archivo máximo aceptable?

1MB es alto; 2MB+ es wasteful.

Testea performance imágenes con LoadFocus

LoadFocus corre auditorías Lighthouse desde 25+ regiones para flaggear imágenes oversized. Regístrate en loadfocus.com/signup.