Casi todos los consejos sobre este tema se quedan en «depende» o en un número sin ninguna explicación detrás. Aquí tienes los números y, después, el razonamiento, para que puedas ajustarlos cuando tu caso no sea el habitual.
La tabla
| Dónde va | Ancho | Peso objetivo |
|---|---|---|
| Hero a todo el ancho | 1920 px | menos de 300 KB |
| Imagen dentro de un artículo | 1200 px | menos de 200 KB |
| Imagen a media columna o con texto alrededor | 800 px | menos de 120 KB |
| Miniatura de tarjeta o de lista | 400 px | menos de 50 KB |
| Avatar | 200 px | menos de 20 KB |
| Imagen para compartir (Open Graph) | 1200 × 630 px | menos de 300 KB |
| Favicon | 32 × 32 y 180 × 180 | unos pocos KB |
Toma los pesos como objetivos, no como límites. Una fotografía con mucho detalle merece más bytes que un gráfico plano. Si te pasas siempre un 20%, no pasa nada; si estás en cuatro veces la cifra, algo anda mal.
De dónde salen esos anchos
El número que manda es el ancho al que se muestra la imagen, no el ancho de la pantalla. La mayoría de los sitios de contenido limitan la columna de lectura a algo entre 650 y 800 px, porque las líneas largas son más difíciles de leer. Así que una imagen dentro de un artículo se muestra a unos 700 px por grande que sea el monitor, y por eso 1200 px es generoso y no tacaño.
Las imágenes hero son la excepción: de verdad ocupan todo el viewport, así que tienen que cubrir un ancho de escritorio habitual. 1920 px cubre la inmensa mayoría de las pantallas. Subir a 2560 px sirve a una pequeña minoría de monitores enormes con un costo real para todos los demás.
La cuestión retina
Las pantallas de alta densidad meten dos o tres píxeles físicos en cada píxel CSS, así que una imagen que se muestra a 700 px puede aprovechar 1400 px de detalle real. La conclusión ingenua es duplicar todos los números de arriba. No lo hagas.
Duplicar el ancho cuadruplica la cantidad de píxeles, y el beneficio visible cae rápido. Dos cosas mejoran mucho ese balance:
- Comprime más la versión grande. Una imagen 2× al 60% de calidad se ve mejor que una 1× al 90%, y muchas veces pesa menos. La resolución extra esconde los artefactos.
- Sirve las dos y deja que elija el navegador. El atributo
srcsette permite ofrecer un archivo 1× y otro 2×; el navegador descarga solo el que necesita. Esta es la respuesta correcta si tu sitio puede hacerlo.
Si solo puedes publicar un archivo, ir a alrededor de 1,5× el ancho de visualización y comprimir un poco más es el término medio pragmático. En el caso del artículo, eso cae justo en los 1200 px de la tabla.
La vista previa social es un caso aparte
La imagen que aparece cuando alguien comparte tu enlace es de 1200 × 630 px y, a diferencia de todo lo demás en esta página, eso es una especificación y no una sugerencia. Facebook, LinkedIn y X recortan hacia esa proporción, y equivocarte significa que tu vista previa sale con franjas negras o con las cabezas cortadas.
Dos cosas con las que la gente tropieza: cualquier texto que pongas encima tiene que ser grande, porque muchas veces se muestra a un tercio de su tamaño dentro de un feed; y el archivo tiene que ser accesible en una URL absoluta, porque los scrapers no resuelven rutas relativas.
Cómo llegar a los objetivos
Redimensionar hace la mayor parte del trabajo y la compresión lo remata, en ese orden, porque el ahorro de verdad está en redimensionar. Las dos cosas ocurren en una sola pasada en el compresor de imágenes: elige el ancho máximo de la tabla, deja la calidad en 75 y te muestra el antes y el después en bytes, así ves si quedaste por debajo del objetivo. Si necesitas un tamaño exacto en píxeles en vez de un tope —un hueco de banner que pide exactamente 1200 × 628, por ejemplo—, el redimensionador de imágenes acepta los números directamente.
Procesar por lotes importa más de lo que parece. Veinte fotos de producto de 3 MB cada una son 60 MB de peso de página que deberían ser unos 3 MB. Hacerlas de una en una es la forma de abandonar el trabajo a mitad de camino.
Qué se rompe de verdad cuando te equivocas
Los Core Web Vitals de Google incluyen Largest Contentful Paint, que mide cuánto tarda en aparecer el elemento visible más grande. En la mayoría de las páginas ese elemento es una imagen, así que un hero demasiado grande se mide directamente como una página lenta, y los Core Web Vitals influyen en el posicionamiento.
También hay un costo más simple. Alguien que entra desde un celular con mala señal está pagando cada byte, y se va mucho antes de que tu hero de 6 MB termine de llegar. Nunca lo ves en analytics como un rebote, porque la página nunca cargó lo suficiente para registrar la visita.
Algo más que vale la pena hacer además del tamaño
Agrega los atributos width y height a tus etiquetas <img>, con las dimensiones reales. Así el navegador reserva el espacio exacto antes de que llegue la imagen, en lugar de recomponer el layout cuando aparece. Ese salto es el Cumulative Layout Shift, el otro Core Web Vital, y es lo que hace que toques el botón equivocado porque la página se movió. Cuesta dos atributos y elimina el problema por completo.
La forma más rápida de resolverlo es abrir el compresor de imágenes, soltar todo de una vez, poner el ancho máximo de la tabla de arriba y dejar la calidad en 75. Procesa el lote entero y te muestra el total ahorrado, así ves de un vistazo si estás por debajo del objetivo. No se sube nada: el redimensionado ocurre en tu navegador.
Si tus archivos siguen pesando mucho después de redimensionar, casi siempre el culpable es el formato: una fotografía metida en un PNG seguirá siendo grande le des el ancho que le des. PNG vs JPG vs WebP explica cuál va en cada sitio y por qué las capturas de pantalla se comportan de forma muy distinta a las fotos.
Preguntas frecuentes
¿Cuál es el mejor tamaño de imagen para una web?
1920 px de ancho para un hero a todo el ancho, 1200 px para una imagen dentro de un artículo, 800 px para una imagen a media columna o con texto alrededor, y 400 px para miniaturas. El número que importa es el ancho al que se muestra, no el de la pantalla.
¿Cuántos KB debería pesar una imagen web?
Menos de 200 KB para una imagen dentro de un artículo, menos de 300 KB para un hero y menos de 50 KB para una miniatura. Son objetivos y no límites: una fotografía con mucho detalle justifica más que un gráfico plano.
¿Debo duplicar el tamaño de las imágenes para pantallas retina?
No a ciegas. Duplicar el ancho cuadruplica los píxeles. O sirves los dos tamaños con srcset y dejas que elija el navegador, o vas a alrededor de 1,5× el ancho de visualización y comprimes un poco más: la resolución extra disimula muy bien los artefactos de compresión.
¿Qué tamaño debe tener una imagen para compartir en redes?
1200 × 630 píxeles. A diferencia de los demás números de aquí, esto es una especificación y no una sugerencia: Facebook, LinkedIn y X recortan hacia esa proporción. Mantén cualquier texto grande, porque muchas veces se muestra a un tercio de su tamaño.
¿Por qué necesito width y height en las etiquetas img?
Para que el navegador reserve el espacio correcto antes de que cargue la imagen, en vez de recomponer la página cuando llega. Ese salto es el Cumulative Layout Shift, un Core Web Vital, y es lo que hace que toques el botón equivocado porque la página se movió.
Última actualización 19 de septiembre de 2026