Tamaños de imágenes para la web | Estrategias Digitales conHector

Hay tantos tamaños como pantallas y propósitos

👉 Con estos tres cuadros tienes una guía rápida de referencia para preparar tus imágenes pixel perfect.

Imágenes de Fondo

La siguiente tabla sirve de guía para las imágenes tipo fondo completo sin espacios en blanco.

🖥️ Desktop
📱 Tablet
📲 Móvil

La imagen ocupa todo el espacio disponible. Sin menú ni espacios.
La imagen se sitúa luego del menú principal del sitio, sin dejar espacios en blancos al final
La imagen se sitúa luego del menú doble clásico de una tienda y espacios abajo para los puntos de navegación

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	1901 × 920 px	~ 2:1	Ocupa toda la pantalla en monitores Full HD.
Hero con menú	1901 × 810 px	~ 3:1	Ideal para secciones destacadas
Hero Tienda slider	1901 × 720 px	~ 3:1	Ideal para banners tipo sliders.
Fondo	2560 × 1400 px	16:9	Para pantallas ultra grandes y 4K.

Importante recordar que NUNCA está disponible el 100% del espacio de la pantalla.
– El menú del navegador Chrome/Safari ocupa mínimamente 100px (está arriba)
– El menú del Windows/Mac ocupa mínimamente 60px (está abajo)
– El scrollbar ocupa mínimamente 19px (está a la derecha)

📱 Tablet (pantallas medianas)

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	1024 × 768 px	4:3	Se adapta bien a iPad estándar.
Banner horizontal	1280 × 500 px	~5:2	Más alto que en desktop para legibilidad.
Imagen de artículo	1280 × 960 px	4:3	Proporción clásica, cómoda para lectura.
Fondo	2048 × 1536 px	4:3	Resolución típica de tablets Apple.

📲 Móvil (pantallas pequeñas)

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	720 × 1280 px	9:16 (vertical)	Optimizado para scroll vertical.
Banner horizontal	360 × 200 px	~9:5	Compacto y legible en pantallas pequeñas.
Imagen de artículo	480 × 360 px	4:3	Miniaturas y previews.
Fondo	1080 × 1920 px	9:16	Para pantallas móviles modernas.

Imágenes de Producto

La siguiente tabla sirve de guía para las imágenes de producto. Dependiendo del tipo de producto, pueden ser cuadradas, horizontales o verticales.

🖥️ Desktop
📱 Tablet
📲 Móvil

🖥️ Desktop (pantallas grandes)

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	1901 × 920 px	~ 2:1	Ocupa toda la pantalla en monitores Full HD.
Hero con menú	1901 × 810 px	~ 3:1	Ideal para secciones destacadas
Hero Tienda slider	1901 × 720 px	~ 3:1	Ideal para banners tipo sliders.
Fondo	2560 × 1400 px	16:9	Para pantallas ultra grandes y 4K.

📱 Tablet (pantallas medianas)

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	1536 × 1152 px	4:3	Se adapta bien a iPad estándar.
Banner horizontal	1280 × 500 px	~5:2	Más alto que en desktop para legibilidad.
Imagen de artículo	1280 × 960 px	4:3	Proporción clásica, cómoda para lectura.
Fondo	2048 × 1536 px	4:3	Resolución típica de tablets Apple.

📲 Móvil (pantallas pequeñas)

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	720 × 1280 px	9:16 (vertical)	Optimizado para scroll vertical.
Banner horizontal	360 × 200 px	~9:5	Compacto y legible en pantallas pequeñas.
Imagen de artículo	480 × 360 px	4:3	Miniaturas y previews.
Fondo	1080 × 1920 px	9:16	Para pantallas móviles modernas.

Imágenes de Banners

La siguiente tabla sirve de guía para las imágenes promocionales tipo banners en los diferentes tamaños comunes.

🖥️ Desktop
📱 Tablet
📲 Móvil

🖥️ Desktop (pantallas grandes)

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	1901 × 920 px	~ 2:1	Ocupa toda la pantalla en monitores Full HD.
Hero con menú	1901 × 810 px	~ 3:1	Ideal para secciones destacadas
Hero Tienda slider	1901 × 720 px	~ 3:1	Ideal para banners tipo sliders.
Fondo	2560 × 1400 px	16:9	Para pantallas ultra grandes y 4K.

📱 Tablet (pantallas medianas)

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	1536 × 1152 px	4:3	Se adapta bien a iPad estándar.
Banner horizontal	1280 × 500 px	~5:2	Más alto que en desktop para legibilidad.
Imagen de artículo	1280 × 960 px	4:3	Proporción clásica, cómoda para lectura.
Fondo	2048 × 1536 px	4:3	Resolución típica de tablets Apple.

📲 Móvil (pantallas pequeñas)

Tipo de imagen	Dimensiones recomendadas	Relación de aspecto	Notas
Hero / cabecera	720 × 1280 px	9:16 (vertical)	Optimizado para scroll vertical.
Banner horizontal	360 × 200 px	~9:5	Compacto y legible en pantallas pequeñas.
Imagen de artículo	480 × 360 px	4:3	Miniaturas y previews.
Fondo	1080 × 1920 px	9:16	Para pantallas móviles modernas.