No existe un tamaño de imagen “correcto” único para una página web — los números correctos dependen del rol que juega la imagen en la página. Esto es una referencia de trabajo para los casos comunes, con el razonamiento para que puedas extenderla a casos que no están acá.
Tabla de referencia por rol
| Rol | Ancho | Peso objetivo |
|---|---|---|
| Cabecera / banner de ancho completo | hasta 1920px | menos de 200KB |
| Foto de blog / dentro del contenido | 800-1200px | menos de 100KB |
| Imagen principal de página de producto | 800-1200px | menos de 150KB |
| Miniatura de grilla o listado | 300-500px | menos de 50KB |
| Avatar de autor / ícono chico | 200-400px | menos de 20KB |
| Logo (si es raster, no SVG) | tamaño real de visualización x2 | menos de 20KB |
Estos objetivos asumen que la imagen ya se redimensionó a un ancho máximo razonable para su rol — los objetivos de peso sin un límite de dimensión no significan mucho, ya que siempre se puede llegar a un peso chico achicando las dimensiones muy por debajo de lo necesario.
Por qué 1920px es un techo práctico para imágenes de ancho completo
Servir una imagen más ancha que unos 1920px significa que estás codificando detalle de píxel que supera el ancho real renderizado en la gran mayoría de las pantallas de los visitantes — hasta los monitores grandes suelen renderizar una ventana de navegador bien por debajo de su resolución nativa completa, y el CSS va a reducir una imagen sobredimensionada para que encaje en su contenedor de todos modos. Ese achicamiento no reduce el peso de descarga; el archivo completo igual se transfiere antes de escalarse visualmente hacia abajo. Ajustar el tamaño de la imagen fuente para que coincida con su ancho máximo real de visualización, en vez de “lo bastante grande para estar seguro”, es de donde sale buena parte del peso innecesario de una página.
Imágenes retina o de alta densidad: úsalas de forma selectiva, no universal
Una imagen a resolución 2x (el doble de dimensiones en píxeles para el mismo tamaño de visualización) se ve medible y notablemente más nítida en pantallas de alta densidad para contenido donde la nitidez a corta distancia de visualización importa — logos, íconos, imágenes de cabecera con texto superpuesto. Para contenido fotográfico general visto brevemente y a distancia normal de scroll, la mayoría de la gente no nota conscientemente la diferencia entre 1x y 2x, pero el costo en peso es real (aproximadamente el doble). Un enfoque razonable: sirve 2x para elementos chicos y críticos en detalle (logos, íconos) y quédate con 1x, bien comprimido, para contenido fotográfico más grande donde el costo en peso de duplicar no vale una mejora de nitidez apenas perceptible.
Las grillas necesitan compresión agresiva, no moderada
Como una grilla de productos o contenido muestra muchas imágenes a la vez, cada imagen individual recibe solo una mirada rápida del visitante — exactamente la situación donde la compresión agresiva (un objetivo de peso bajo en relación a lo que usaría una sola imagen de cabecera) tiene el menor costo visible y el mayor beneficio acumulado, ya que el peso total de la página escala con la cantidad de imágenes mostradas.
El srcset cambia el objetivo de “un tamaño” a “un conjunto de tamaños”
Si tu sitio usa imágenes responsivas (srcset/sizes), no estás eligiendo un tamaño objetivo único — estás eligiendo un objetivo para cada variante de punto de quiebre, y las variantes más chicas deberían redimensionarse de verdad a su propio ancho objetivo, no ser solo la misma imagen grande comprimida a distintos pesos. Alguien desde el celular debería descargar un archivo que sea realmente más chico en dimensiones de píxel, no solo más comprimido, para obtener el beneficio completo.
Preguntas frecuentes
- ¿Qué dimensiones debería tener una imagen de cabecera o banner?
- 1920px de ancho es un máximo seguro habitual, que cubre la gran mayoría de los anchos de pantalla de escritorio sin necesidad de ampliar. La altura depende del diseño, pero un rango común es 600-1000px para un banner completo. Más allá de 1920px de ancho, estás sirviendo píxeles que superan el viewport real de casi cualquier visitante, sin beneficio visible — el CSS va a reducir la imagen para que encaje de todos modos, y solo dejaste el archivo más pesado sin motivo.
- ¿Necesito imágenes en 2x o 3x para pantallas retina o de alta densidad?
- Para imágenes donde la nitidez realmente importa a corta distancia de visualización — logos, íconos e imágenes de cabecera con texto — servir una versión al doble de resolución (por ejemplo, un espacio de 1200px de ancho recibe una imagen de 2400px de ancho) mejora notablemente la nitidez en pantallas retina. Para la mayoría del contenido fotográfico visto a distancia normal, la diferencia entre 1x y 2x es mucho más difícil de notar, y servir 2x o 3x de forma indiscriminada para todo prácticamente duplica o triplica el peso total de imágenes por un beneficio que la mayoría de los visitantes no va a registrar de forma consciente. Reserva las variantes de alta densidad para contenido donde la nitidez es el punto central.
- ¿Cuál es el tamaño correcto para fotos de producto en una grilla de e-commerce?
- Miniaturas de grilla o listado: 300-500px de ancho, menos de 50KB — se muestran chicas, se ven de forma rápida, en alto volumen por página. Imagen principal de la página de producto: 800-1200px de ancho, menos de 150KB, ya que el cliente puede hacer zoom o mirarla de cerca antes de comprar. Si tu plataforma admite zoom al pasar el mouse o clic para ampliar, esa vista ampliada puede usar una imagen fuente aparte y más grande, cargada solo bajo demanda, en vez de servir esa resolución a todos por defecto.
- ¿Toda imagen de una página debería tener el mismo objetivo de peso de archivo?
- No — trata los objetivos de peso de archivo como proporcionales a la atención visual que recibe la imagen y al tamaño en que se muestra, no como una regla fija. Un banner de ancho completo recibe más atención visual y necesita más margen (hasta unos 200KB) que una miniatura de apoyo en una grilla de una docena de imágenes parecidas (menos de 50KB cada una), donde cada una individualmente recibe solo una mirada rápida.
- ¿Cómo cambian estos números con el `srcset` responsivo?
- El `srcset` te permite servir archivos de imagen distintos según el viewport real y la densidad de píxeles del visitante, así que alguien desde el celular descarga un archivo genuinamente más chico que alguien en escritorio para el mismo espacio de imagen, en vez de que todos descarguen el mismo archivo grande y el CSS lo reduzca del lado del cliente. Si usas `srcset`, los objetivos de tamaño de arriba aplican a tu variante más grande (normalmente la versión de escritorio en 1x); las variantes de los puntos de quiebre más chicos deberían redimensionarse de verdad (no solo comprimirse) de forma proporcional a su propio ancho objetivo.