A diferencia de las redes sociales — que tienen especificaciones fijas y bien documentadas — los sitios web tienen diseños variables, diseños responsivos y contextos de uso muy diferentes. Un banner de página de inicio ocupa el 100% del ancho de la pantalla. Una foto de producto puede aparecer en 400px o en 800px según el dispositivo. Una imagen de blog se muestra dentro de una columna de texto.
No existe un único tamaño correcto para "imagen de sitio web" — pero existen rangos recomendados para cada contexto, y entenderlos marca la diferencia entre un sitio rápido y bien presentado y un sitio lento con imágenes borrosas o demasiado pesadas.
Por qué el tamaño de imagen afecta a tu sitio
Surgen dos problemas distintos cuando las imágenes no están optimizadas:
- Imágenes demasiado grandes en píxeles: el navegador descarga una foto de 4000px para mostrarla en 800px — el 80% de los datos transferidos se descartan de inmediato. El sitio se vuelve lento sin ninguna ganancia visual.
- Imágenes demasiado pesadas en KB/MB: incluso con las dimensiones correctas, una foto sin compresión puede pesar 3 MB cuando podría pesar 150 KB con calidad visual idéntica en pantalla.
Ambos problemas tienen soluciones diferentes: el primero exige redimensionamiento (ajustar los píxeles); el segundo exige compresión (reducir el peso sin alterar los píxeles). En la práctica, aplicar ambos en secuencia es lo que produce el mejor resultado.
💡 Regla general: el ancho máximo de cualquier imagen para web rara vez necesita superar los 1920px — que es el ancho de un monitor Full HD. Para imágenes que nunca ocupan la pantalla completa (columnas, grillas de productos, miniaturas), el límite es aún menor. Por encima de eso, estás desperdiciando ancho de banda y perjudicando la carga.
Tabla de referencia — tamaños por tipo de imagen
| Tipo de imagen | Dimensiones recomendadas | Peso ideal | Formato |
|---|---|---|---|
| Banner / hero (ancho completo) | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| Banner escritorio (diseño boxed) | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| Banner móvil | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| Foto de producto (e-commerce) | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| Miniatura de producto | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| Imagen de artículo / blog | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| Miniatura de post (listado) | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| Logo en el header | 200–400 px de ancho | 5–30 KB | SVG / PNG / WebP |
| Íconos de interfaz | 24–64 px | 1–5 KB | SVG |
| Favicon | 16, 32, 180, 192, 512 px | 1–10 KB cada uno | .ico + PNG |
| Open Graph (vista previa social) | 1200 × 630 px | 80–150 KB | JPG / WebP |
| Fondo de sección | 1920 × altura variable | 100–300 KB | WebP / JPG |
| Foto de perfil / avatar (sitio) | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| Imagen de testimonio / cliente | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
Dimensiones por tipo de sitio
Sitios institucionales y portafolios
Los sitios institucionales generalmente tienen un ancho máximo de contenido entre 960px y 1440px. Las imágenes de banner o hero suelen ocupar el 100% del ancho del diseño — así que 1440–1920px de ancho es suficiente para monitores modernos. Las imágenes de sección (fotos de equipo, oficina, servicios) rara vez necesitan superar los 800px de ancho.
- Banner principal: 1920 × 700–900px, por debajo de 200 KB
- Foto de equipo: 400–600 × 400–600px, por debajo de 60 KB
- Foto de servicio / sección: 800–1200 × 500–700px, por debajo de 100 KB
Blogs y portales de contenido
En los blogs, la columna de contenido rara vez supera los 760–800px de ancho. Una imagen destacada (featured image) en 1200px es más que suficiente para cubrir cualquier diseño responsivo sin desperdicio. Las miniaturas en el listado de posts son aún más pequeñas — generalmente 300–500px.
- Featured image: 1200 × 630px, por debajo de 100 KB
- Imágenes dentro del artículo: 800–1200px de ancho, por debajo de 80 KB cada una
- Miniatura en el listado: 400 × 250px, por debajo de 30 KB
E-commerce y tiendas en línea
En e-commerce, las fotos de producto son el elemento más crítico — son la principal herramienta de convencimiento del cliente. La resolución necesita ser suficiente para el zoom (cuando el sitio ofrece esta función), pero el peso debe controlarse para no perjudicar la velocidad de las páginas de listado, que cargan muchas imágenes al mismo tiempo.
- Foto principal del producto (cuadrada): 800–1200 × 800–1200px, 80–150 KB en WebP
- Fotos adicionales del producto: mismo tamaño que la principal
- Miniatura en la grilla de productos: 300–500 × 300–500px, 20–50 KB
- Banner de categoría / promoción: 1440 × 400–600px, 80–150 KB
🛍️ Para e-commerce: usa siempre fondo blanco o neutro en las fotos de producto — además de facilitar la compresión (las grandes áreas de color uniforme comprimen muy bien), garantiza consistencia visual entre productos de proveedores diferentes y mejora la experiencia de comparación en el carrito.
Landing pages
Las landing pages están diseñadas para una única acción de conversión — y la velocidad es crítica: los estudios muestran que cada segundo adicional de carga reduce la tasa de conversión en un 7–12%. Las imágenes en landing pages necesitan optimizarse agresivamente.
- Hero / fondo: 1440–1920px de ancho, por debajo de 150 KB — prioridad máxima
- Foto de producto / servicio: 600–800px, por debajo de 80 KB
- Íconos de beneficios: SVG siempre que sea posible
- Foto de testimonio: 80–120px circular, por debajo de 15 KB
El impacto del factor 2× (pantallas Retina y HiDPI)
Las pantallas Retina (Apple) y HiDPI (otros fabricantes) tienen densidad de píxel duplicada — lo que significa que muestran más píxeles por pulgada que los monitores comunes. Para que las imágenes se vean nítidas en esas pantallas, la imagen necesita tener el doble de píxeles del espacio de visualización.
Ejemplo: una imagen mostrada en 400px de ancho en una pantalla Retina necesitaría 800px de ancho para verse nítida. Enviar solo 400px resulta en una imagen ligeramente borrosa en iPhones y MacBooks.
La solución más práctica es usar imágenes con el doble del ancho de visualización máximo — pero comprimir bien para que el peso no se duplique en la misma proporción. Una imagen de 800px bien comprimida en WebP generalmente pesa menos que una de 400px en PNG sin optimizar.
Formato correcto para cada situación
| Situación | Formato ideal | Por qué |
|---|---|---|
| Fotografías (producto, banner, equipo) | WebP lossy | 25–35% más pequeño que JPG con calidad equivalente |
| Logo en el header | SVG | Vectorial, cualquier tamaño sin pérdida, archivo más pequeño |
| Logo cuando SVG no es compatible | PNG con fondo transparente | Preserva la transparencia necesaria |
| Íconos de interfaz | SVG | Escalable, animable vía CSS, archivo diminuto |
| Captura de pantalla con texto | WebP lossless o PNG | Texto nítido — JPG crea artefactos alrededor de las letras |
| Open Graph / vista previa social | JPG o WebP | Compatibilidad máxima con plataformas de vista previa |
| Fondo con transparencia | WebP con canal alfa o PNG | Único formato con transparencia además del PNG |
Cómo preparar las imágenes antes de subirlas
El flujo recomendado para cualquier imagen destinada a un sitio web es:
- Define las dimensiones de uso. ¿Cuál es el espacio máximo que esa imagen va a ocupar en el diseño? Usa la tabla de referencia anterior o inspecciona el elemento en el navegador (F12 → seleccionar el espacio de la imagen).
- Redimensiona al doble del espacio de visualización. Para cubrir pantallas Retina sin desperdicio excesivo. Usa el Redimensionador de Imagen para definir el ancho exacto en píxeles.
- Convierte a WebP. Si tu sitio o CMS admite WebP (la mayoría de los modernos lo hacen), convierte antes de subir. Usa el Conversor de Imagen para una conversión rápida.
- Comprime. Aplica compresión para reducir el peso dentro de los rangos recomendados. Usa el Compresor de Imagen para optimizar JPG, PNG y WebP sin pérdida visual perceptible.
- Verifica el resultado. Abre la imagen comprimida y compárala con el original. Si la diferencia no es visible, el resultado es bueno.
Prepara las imágenes de tu sitio ahora
Redimensiona y comprime las imágenes de tu sitio en segundos — sin instalar nada, sin crear cuenta.
Cómo verificar el tamaño actual de las imágenes de tu sitio
Para identificar si las imágenes de tu sitio actual están optimizadas, usa estas herramientas:
- Google PageSpeed Insights (pagespeed.web.dev): analiza la URL y lista imágenes con oportunidad de reducción, mostrando la ganancia estimada en KB para cada una.
- Chrome DevTools → Network → Img: filtra las solicitudes por tipo de imagen y observa el tamaño de cada archivo cargado. Ordena por tamaño para identificar las más pesadas.
- WebPageTest.org: análisis detallado con waterfall, mostrando qué imágenes se cargan primero y cuánto tiempo tardan.
Errores más comunes de tamaño de imagen en sitios web
- Subir fotos directo de la cámara: las fotos de cámara tienen 3–12 MB y 4000–8000px de ancho. Ningún sitio necesita imágenes así sin redimensionar y comprimir antes.
- Usar PNG para fotos: las fotos en PNG quedan 5–10× más grandes que en JPG o WebP sin ninguna ganancia visual. Usa PNG solo para imágenes con transparencia o gráficos con bordes nítidos.
- No tener versión móvil de las imágenes: servir una imagen de 1920px para un celular de 390px es puro desperdicio. El atributo
srcsetde HTML resuelve esto automáticamente. - Olvidar las imágenes Open Graph: cuando alguien comparte una página en WhatsApp o LinkedIn sin imagen de vista previa configurada, la plataforma muestra una miniatura genérica o en blanco. Configura siempre la meta etiqueta
og:imagecon una imagen de 1200×630px. - Logo en JPG: el fondo blanco forzado del JPG aparece en contextos con fondo de color o transparente. El logo siempre en SVG o PNG.