Tamaños de imagen para web: hero, blog, producto, logo, OG | We.Inc
Una tabla de tamaños en píxeles, proporciones y presupuestos de peso para cada hueco de imagen de una web, más una calculadora que convierte el ancho de tu diseño en tamaños srcset.
Dimensiona cada imagen según el espacio más ancho que ocupa y luego duplica ese ancho para las pantallas de alta densidad. Un hero a todo el ancho funciona a 2560 por 1440, una imagen dentro del texto del blog a 1600 de ancho, una foto de producto cuadrada a 2048 por 2048 en Shopify y una imagen para compartir en redes a 1200 por 630. Mantén las fotos por debajo de unos 200 KB.
Tamaños rápidos para los huecos más comunes
Hueco
Píxeles a exportar
Proporción
Hero a todo el ancho
Imagen en el cuerpo del blog
Foto de producto (Shopify)
Imagen para compartir (og:image)
Logo
SVG, o PNG a 2x su tamaño en pantalla
La del logo
No existe un estándar oficial para una imagen hero o de blog. Lo que sí existe es una cuenta sencilla: cuántos píxeles CSS de ancho tiene el hueco, multiplicado por la densidad de pantalla en la que quieres que se vea nítida. La tabla de abajo aplica esa regla a cada hueco habitual y, cuando una plataforma publica su propia cifra, como Shopify para productos o Facebook para las imágenes compartidas, usamos la cifra publicada.
Busca el hueco en la tabla, o mide con el inspector del navegador qué ancho ocupa en tu diseño.
Escribe ese ancho CSS en la calculadora y elige las densidades que quieres cubrir.
Exporta los anchos que indica, comprime cada uno y pega el srcset generado en tu etiqueta img.
Compara el peso del archivo con la columna de presupuesto antes de subirlo.
Exporta a 2x el ancho mostrado; 3x añade un peso que poca gente nota en una foto.
Recorta a la proporción antes de subir, para que el diseño nunca tenga que estirar la imagen ni añadirle bandas.
Pon los atributos width y height en cada img para que el navegador reserve el espacio antes de que llegue el archivo.
Usa preferentemente SVG para logos e iconos, porque un archivo vectorial se ve nítido a cualquier tamaño con una sola descarga pequeña.
Deja la imagen para compartir en 1200 por 630 incluso en sitios estrechos, ya que las apps sociales la descargan aparte de tu diseño.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen hero?
Para un hero que ocupa todo el ancho del navegador, exporta 2560 por 1440 para pantallas grandes y añade versiones de 1280 y 1920 de ancho en srcset para que móviles y portátiles descarguen menos. Si el hero está dentro de un contenedor de 1200 píxeles, con 2400 de ancho basta.
¿Qué tamaño tienen las imágenes de producto de Shopify?
El centro de ayuda de Shopify dice que las imágenes de producto cuadradas suelen verse mejor a 2048 por 2048 píxeles. Se pueden subir hasta 5000 por 5000 píxeles y deben pesar menos de 20 MB. Mantén la misma proporción en todas las fotos de producto para que las cuadrículas de colecciones queden alineadas.
¿Qué tamaño tiene una imagen Open Graph para compartir?
La documentación de Facebook sobre contenido compartido recomienda al menos 1200 por 630 píxeles, una proporción de 1.91 a 1 y un archivo de menos de 8 MB. Las imágenes más pequeñas siguen funcionando hasta 600 por 315, pero se muestran a un tamaño reducido.
¿Cuánto debe pesar el archivo, además de los píxeles?
El tamaño en píxeles y el peso del archivo son cosas distintas. Una foto de 1600 de ancho guardada en WebP o en un JPEG bien comprimido suele quedar entre 80 y 200 KB. Si una imagen pesa mucho más, baja el ajuste de calidad o cambia de formato antes de reducir sus dimensiones.
¿Necesito imágenes distintas para móvil?
Normalmente no hacen falta recortes distintos, solo copias más pequeñas del mismo archivo listadas en srcset. Usa el elemento picture solo cuando un móvil necesite otro recorte, como una versión vertical de un banner ancho.
La única regla detrás de cada cifra
Los navegadores maquetan las páginas en píxeles CSS. Un móvil o un portátil retina meten dos o tres píxeles físicos en cada uno de ellos, así que una imagen exportada justo a su ancho CSS se ve borrosa en esas pantallas. Duplicar el ancho lo soluciona para casi todo el mundo.
Pasar de 2x rara vez compensa en las fotos. El archivo vuelve a pesar aproximadamente el doble y el detalle extra apenas se nota a una distancia de visión normal.
La proporción importa más que los píxeles exactos
La mayoría de los diseños escalan las imágenes para que encajen en su columna, así que la proporción decide cómo queda una imagen en la página. Elige una proporción por hueco, recorta todas las imágenes a ella y la cuadrícula se mantiene ordenada sea cual sea el ancho.
Las opciones habituales son 16:9 para heros e imágenes de artículos, 1:1 para productos y avatares, 4:5 para tarjetas verticales y 1.91:1 para imágenes compartidas.
Los presupuestos mantienen las páginas rápidas
La imagen más grande de la parte visible sin desplazarse suele ser el elemento que determina el Largest Contentful Paint. Un hero pesado ralentiza la página más que cualquier otro archivo, así que merece el mayor cuidado.
Fija un presupuesto por hueco y respétalo. Cuando una foto no cabe en el presupuesto con buena calidad, prueba WebP o AVIF antes de reducir la resolución.
Tamaños de imagen para cada hueco
Los anchos de los huecos corresponden a diseños de escritorio típicos. Mide tu propio tema y aplica la regla de 2x si el tuyo es distinto.
Tamaños de exportación, proporciones y presupuestos de peso por hueco
Hueco
Ancho CSS
Píxeles a exportar
Proporción
Presupuesto
Nota
Hero a todo el ancho
100vw (hasta 1280+)
250 KB
Añade copias de 1280 y 1920 de ancho en srcset
Hero dentro de contenedor
200 KB
El doble del ancho del contenedor
Franja de banner
150 KB
Deja el texto lejos de los bordes; los laterales se recortan en el móvil
Imagen destacada del blog
800 a 1200
1600 x 900 hasta 2400 x 1350
150 KB
Ajústala al ancho de contenido de tu tema
Imagen en el cuerpo del blog
720 a 800
16:9 o 3:2
150 KB
Las columnas de texto son más estrechas que los heros
Foto de producto
Tarjeta de cuadrícula
200 KB
El tamaño cuadrado recomendado por Shopify
Tarjeta de colección o categoría
800 x 800 o 800 x 1000
1:1 o 4:5
80 KB
Usa una sola proporción en toda la cuadrícula
Foto de equipo o avatar
40 KB
Suele mostrarse en un círculo; centra la cara
Logo en la cabecera
unos 160
SVG, o PNG de 320 de ancho
La del propio logo
20 KB
El SVG se ve nítido a cualquier tamaño
Textura de fondo
150 KB
Una calidad más baja vale detrás del texto
Imagen para compartir (og:image)
No se muestra en la página
Menos de 8 MB (mejor mucho menos)
El tamaño recomendado por Facebook
Favicon
16 a 32
SVG más ICO o PNG de 32 x 32
5 KB
Consulta la guía de favicons para ver todos los tamaños
Marcado para un hero responsive
Hero a todo el ancho con tres anchos
El navegador elige el archivo más pequeño que sigue cubriendo el viewport a la densidad de la pantalla. width y height fijan la proporción para que nada salte mientras carga.
Calculadora de tamaños de imagen
Introduce el ancho que ocupa una imagen en tu diseño, en píxeles CSS, y elige las densidades de pantalla que quieres cubrir. La calculadora indica los anchos en píxeles que debes exportar y escribe el srcset correspondiente.