El Mejor Tamaño y Formato de Imagen para Sitios Web en 2026
Las imágenes sin optimizar son la principal causa de sitios web lentos. Esta guía te da recomendaciones concretas de dimensiones, tamaños de archivo y formatos basadas en cómo se muestran realmente las imágenes en sitios web modernos.
La Regla de Oro: Sirve las Imágenes al Tamaño de Visualización
Nunca subas una imagen de 4000px de ancho si solo se mostrará a 800px de ancho. El navegador descarga la imagen completa pero la muestra a una fracción de su tamaño — todo ese dato extra es ancho de banda desperdiciado.
Redimensiona siempre tus imágenes al tamaño máximo en que se mostrarán antes de subirlas.
Dimensiones Recomendadas por Caso de Uso
| Tipo de Imagen | Ancho Máximo | Tamaño de Archivo Objetivo |
|---|---|---|
| Banner/hero de ancho completo | 1920px | Menos de 200 KB |
| Imagen destacada de blog | 1200px | Menos de 100 KB |
| Imagen en línea de blog | 800px | Menos de 60 KB |
| Foto de producto (e-commerce) | 1000px | Menos de 80 KB |
| Miniatura / imagen de tarjeta | 400px | Menos de 25 KB |
| Logotipo (rasterizado) | 200px | Menos de 10 KB |
| Textura de fondo | 1000px (mosaico) | Menos de 30 KB |
Recomendaciones de Mejor Formato
- Fotos e imágenes de producto: WebP (primera opción) o JPG al 80% de calidad
- Logotipos e íconos: SVG (vectorial) — escala perfectamente a cualquier tamaño, archivos diminutos
- Capturas de pantalla e imágenes de interfaz: PNG o WebP sin pérdida
- Ilustraciones con colores planos: SVG o WebP
Objetivos de Core Web Vitals
Google puntúa las páginas según Core Web Vitals. Para las imágenes, la métrica relevante es Largest Contentful Paint (LCP) — qué tan rápido carga la imagen principal visible:
- Bueno: LCP menor a 2.5 segundos
- Necesita mejora: 2.5 – 4 segundos
- Deficiente: Más de 4 segundos
Si tu imagen principal pesa más de 200 KB, probablemente esté contribuyendo a un mal puntaje de LCP en conexiones móviles.
Flujo de Trabajo Paso a Paso para Optimizar Imágenes
- Determina el tamaño de visualización — Verifica el ancho máximo real en CSS/HTML al que se renderizará tu imagen.
- Redimensiona a ese ancho — Usa nuestro Redimensionador de Imágenes. Incluye versiones 2x para pantallas retina (si es necesario).
- Convierte a WebP — Usa JPG a WebP o PNG a WebP.
- Comprime — Usa nuestro Compresor de Imágenes con una calidad de 75–80%.
- Define los atributos width y height — Evita el Cumulative Layout Shift (CLS), otra métrica de Core Web Vitals.
- Agrega carga diferida —
loading="lazy"para imágenes debajo del pliegue.
Pantallas Retina / HiDPI
Las pantallas retina (la mayoría de los teléfonos y MacBooks modernos) muestran a una densidad de píxeles 2x o 3x. Un espacio de 400px de ancho en tu página requiere una imagen de 800px para verse nítida en retina. Usa el atributo HTML srcset para servir diferentes tamaños según la densidad de pantalla:
<img
src="image-400.webp"
srcset="image-400.webp 1x, image-800.webp 2x"
width="400" height="300"
alt="Descripción"
>Usuarios de Next.js
Si usas Next.js, el componente <Image> se encarga de todo esto automáticamente — redimensiona, sirve WebP y agrega carga diferida de forma nativa. Solo proporciona la imagen original de alta resolución y deja que Next.js optimice la entrega.