Mejor tamaño de imagen para sitios web: la guía con todas las opciones

El 63 % de los usuarios que navegan por Internet lo hace desde su dispositivo móvil. Un 36 % utiliza el ordenador y casi poco más de un 2 % emplea la tablet. Esto implica una gran variedad de tipos de pantallas en uso. Por eso es fundamental saber elegir el mejor tamaño de imagen, para que todos los visitantes de tu web tengan una buena experiencia de usuario desde cualquier dispositivo.

Si las imágenes no están optimizadas, podrían mostrarse demasiado pequeñas y borrosas o, por el contrario, demasiado grandes, lo que ralentiza la carga de la página y obliga a hacer desplazamientos incómodos por la pantalla para ver el contenido completo.

La buena noticia es que optimizar tus fotografías para varios dispositivos es más sencillo de lo que parece. Si seleccionas las dimensiones adecuadas, mantienes el tamaño de los archivos bajo control y utilizas un diseño web responsive, podrás ofrecer a tus clientes una experiencia de navegación fluida y de calidad.

¿Cuál es el mejor tamaño de imagen para sitios web?

Ancho en píxeles: una anchura de 2500 píxeles es ideal para pantallas grandes y, con un diseño responsive, puede ajustarse correctamente a dispositivos más pequeños. Así evitarás que las imágenes se corten o pierdan calidad, asegurando una buena visualización en cualquier pantalla

Tamaño de la imagen: el mejor tamaño (en píxeles) depende del uso que le des. Por ejemplo, las imágenes de fondo deben tener un ancho de al menos 2560 píxeles para pantallas grandes, mientras que en una publicación de blog, 1200 píxeles suelen ser suficientes.

Peso del archivo: cualquier imagen que supere los 2 MB afectará la velocidad de carga de tu sitio web, por lo que es recomendable no pasar esta barrera. En la mayoría de los casos, basta con mantener las fotografías alrededor de 500 KB para asegurar un rendimiento óptimo.

Atributo de imagen: El texto alternativo o etiqueta alt no repercute en el rendimiento de tu sitio. Es utilizado por programas de lectura de pantalla para describir las imágenes a personas con discapacidad visual, siendo un elemento clave de la accesibilidad en la web. Redacta un texto conciso y que no supere los 100 caracteres. También es el que se mostrará si en algún momento no cargan las imágenes.

¿Por qué es importante el tamaño de las imágenes para tu web?

En las webs, el tamaño de las imágenes influye en tres aspectos esenciales: la experiencia del usuario, la velocidad de la página y el posicionamiento SEO. Por eso es tan necesario escoger el adecuado. La siguiente tabla proporciona las dimensiones recomendadas para imágenes en sitios web tanto en ordenador como en móviles:

Tipo de imagen	Dimensiones en escritorio (An x Al)	Dimensiones en móvil (An x Al)	Relación de aspecto
Background	2560 x 1400 pixels	360 x 640 pixels	16:9
Principal	1280 x 720 pixels	360 x 200 pixels	16:9
Banner	1200 x 400 pixels	360 x 120 pixels	3:1
Blog	1200 x 800 pixels	360 x 240 pixels	3:2
Logo (rectángulo)	400 x 100 pixels	160 x 40 pixels	4:1
Logo (cuadrado)	100 x 100 pixels	100 x 100 pixels	1:1
Favicon	16 x 16 pixels	16 x 16 pixels	1:1
Íconos redes	32 x 32 pixels	48 x 48 pixels	1:1
Lightbox (full screen)	1920 x 1080 pixels	360 x 640 pixels	16:9
Miniatura	300 x 300 pixels	90 x 90 pixels	1:1

Crea una buena experiencia de usuario

Tener fotografías con el tamaño correcto para cada uso en tu sitio web mejora la impresión que se llevan tus clientes, ya que pueden acceder al nivel de detalle preciso sin necesidad de desplazarse para ver el producto completo.

Cuando las imágenes son de baja resolución, pixeladas o demasiado pequeñas, afectan negativamente a la percepción de tu contenido. Por el contrario, fotos de alta calidad y bien dimensionadas aumentan el valor percibido de tus productos y ofrecen más información visual.

Las imágenes de la marca de calzado sostenible Allbirds, por ejemplo, promueven una buena experiencia de usuario al destacar claramente las diferentes características de sus artículos.

Optimiza la velocidad de carga de tu página web

Cuando se utilizan imágenes de gran tamaño en una web, el servidor tarda más en procesarlas y mostrarlas. La métrica Largest Contentful Paint mide el tiempo que tarda en cargarse el elemento visual más grande del sitio. Un dato que puedes comprobar, junto con otros indicadores de rendimiento, utilizando Google PageSpeed Insights.

Las imágenes más pequeñas (sobre todo en cuanto a peso de archivo) suelen cargarse más rápido en la mayoría de dispositivos, mejorando la experiencia de los usuarios y el rendimiento de la página.

Este es un ejemplo de una página con tiempos de carga lentos debido a imágenes grandes. El servidor tarda, de media, 2,1 segundos en mostrar la primera imagen y 4,1 segundos en cargar la imagen más grande. Para evitar que esto ocurra, es recomendable que la mayoría de las imágenes no superen los 100 KB, y que las más grandes, como las de fondo, se mantengan hasta 500 KB.

El 53 % de los visitantes de un sitio web móvil lo abandonan si tarda 3 segundos o más en cargar, por lo que esos 1,1 segundos adicionales pueden hacer que esta web pierda muchos clientes. Optimizar el peso de las imágenes es vital para reducir la tasa de rebote y aumentar las posibilidades de venta.

Ayuda a mejorar el ranking de tu tienda online

El ranking de un sitio web se refiere a su posición en los resultados de búsqueda cuando los usuarios consultan un término específico. Google utiliza múltiples factores en su algoritmo para decidir qué páginas aparecen primero y, entre ellos, la calidad de las imágenes juega un papel clave.

Además de cargar más rápido, las páginas bien posicionadas ofrecen una experiencia visual superior. Si quieres que tus clientes potenciales encuentren tu tienda online fácilmente, asegúrate de que las fotografías de tu web estén optimizadas para el SEO y sigan las recomendaciones de Google.

Guía para elegir el mejor tamaño de imagen para sitios web

Cada imagen publicada en la web tiene que cumplir unos requisitos específicos en cuanto a tamaño, según su función. A continuación te contamos todos los detalles.

Imágenes de fondo o background

La imagen de fondo es la más grande que encontrarás en un sitio web. Tal y como indica su nombre, sirve de fondo para tu página de inicio o cualquier otra landing page.

• Anchura recomendada: 2500 píxeles
• Altura recomendada: 1406 píxeles
• Relación de aspecto: 16:9
• Peso del archivo: 2 MB como máximo
• Ejemplo: el minorista de bicicletas Cowboy destaca su producto utilizándolo como imagen de fondo en la página de inicio. La bicicleta se visualiza en pantalla completa, independientemente del dispositivo que utilice el usuario.

Imágenes de inicio o principales

Las imágenes de inicio son similares a las de fondo, pero suelen tener menos altura, alrededor de la mitad. Son una excelente opción si necesitas incluir más texto en la pantalla sin obligar a los usuarios a hacer scroll para verlo.

• Anchura recomendada: entre 1280 y 2500 píxeles
• Altura recomendada: entre 720 y 900 píxeles
• Relación de aspecto: 16:9
• Peso del archivo: máximo 2 MB
• Ejemplo: en BLK & BLD han optado por una imagen que ocupa todo el ancho de la página, pero con menos altura, resaltando tanto la foto de la cabecera como tres de sus especialidades a continuación.

Banners

Los banners pueden variar en tamaño y forma, dependiendo de dónde se coloquen y qué quieras mostrar a tus visitantes. El tipo más común en los sitios web son los anuncios publicitarios.

Uno de los servicios más populares para gestionar estos anuncios es Google Ads, que proporciona directrices específicas sobre los tamaños de imagen que aceptan:

Es aconsejable consultar siempre las medidas exactas con cada plataforma anunciante. Aunque para banners no publicitarios, las opciones rectangulares (por ejemplo, 360 x 120 píxeles) se adaptan bien y no ocupan demasiado espacio. Un peso inferior a 150 KB te asegurará una carga rápida.

Imágenes de blog

Las imágenes de blog pueden variar en tipo y tamaño. Por ejemplo, la foto anterior es del blog de Siroko, una tienda online de ropa y accesorios para ciclismo y deportes de nieve. Esta imagen destacada tiene unas dimensiones de 1440 x 900 píxeles, pero el tamaño de renderizado se adapta a diferentes dispositivos, con opciones que van desde 480 x 300 hasta el tamaño original, según el ancho disponible en la pantalla.

Anchura recomendada: 2240 píxeles

Altura recomendada: 1260 píxeles

Relación de aspecto: 16:9

Peso del archivo: 2 MB como máximo.

Logos

Es probable que el logo sea una de las imágenes más pequeñas de tu sitio web (a menos que cuente con un favicon en la barra de pestañas). Según el diseño del logotipo de tu marca, tendrás que escoger una relación de aspecto rectangular o cuadrada.

La mayoría de los logos encajan en una relación cuadrada de 1:1, pero las proporciones rectangulares funcionan bien para nombres de marca más largos, cuando el logotipo consta de palabras en lugar de un gráfico, o si combina ambos recursos, como en el logo de Shopify, que tiene una relación 4:1.

Anchura recomendada: 100 píxeles (400 píxeles si es rectangular 4:1)

Altura recomendada: 100 píxeles

Relación de aspecto: 1:1, 4:1

Peso del archivo: 1 MB como máximo (menor si es posible para optimizar la carga).

Recomendaciones de tamaños de imágen para dispositivos móviles

Aplica estos tres consejos para que las imágenes de tu web funcionen de manera eficiente también en smartphones y tablets.

1. Escoge las dimensiones adecuadas

En pantallas de dispositivos móviles, es útil poder ampliar las imágenes. Hay que encontrar un equilibrio entre el tamaño de la imagen y el peso del archivo, para que los usuarios puedan hacer zoom sin ralentizar la carga de la página.

Utiliza imágenes cuadradas de alta resolución para tus productos, con unas dimensiones óptimas de 2048 x 2048 píxeles, lo que dará a tu tienda un aspecto uniforme y atractivo. Las fotos de menor tamaño también son válidas, pero deben tener al menos 800 x 800 píxeles para que al ampliar se vean bien.

Las imágenes cuadradas y verticales son las que se visualizan mejor en dispositivos móviles. Sin embargo, para el mismo ancho una fotografía vertical requiere 3072 píxeles de altura, lo que incrementa el peso del archivo. En cualquier caso, la misma relación de aspecto para todas las imágenes destacadas y miniaturas asegura una apariencia profesional y coherente en todo tu ecommerce, desde la página de inicio hasta las páginas de colección.

El creador de páginas de Shopify permite subir imágenes de hasta 4472 x 4472 píxeles con un tamaño de archivo máximo de 20 MB, pero para una mejor optimización y carga rápida de la página, es preferible seguir las dimensiones recomendadas.

2. Reduce el peso de los archivos

Las imágenes pesadas pueden afectar considerablemente la velocidad de tu web, sobre todo cuando los usuarios acceden desde su móvil. Cuanto más lenta sea tu página, más probabilidades hay de que los visitantes la abandonen y elijan otra opción de su búsqueda en Google.

Para evitar esto, es recomendable comprimir las imágenes grandes y reducir su peso. Además, aunque Shopify permite subir archivos de hasta 20 MB, muchas plataformas establecen límites menores.

Existen herramientas online gratuitas y muy fáciles de usar, como el redimensionador de imágenes de Shopify, o las aplicaciones TinyPNG y Compress JPEG que comprimen las fotografías sin perder calidad. También puedes utilizar editores de fotos como Photoshop, GIMP o Pixelmator Pro para optimizar tus imágenes, ajustando el tamaño y exportándolas para web con un peso reducido.

El conjunto de todas tus imágenes de inicio o de fondo no debería pesar más de 1 MB, y las fotos de productos tendrían que estar en torno a 300 KB para asegurar la velocidad de tu tienda online.

3. Adapta el tamaño de las fotos a las pantallas móviles

Shopify redimensiona automáticamente las imágenes para adaptarlas a pantallas más pequeñas. Esto simplifica el proceso de optimización para dispositivos móviles y garantiza que tus fotos se vean bien sin que tú tengas que preocuparte por hacer ajustes.

Sin embargo, en otras plataformas, puede ser necesario redimensionarlas manualmente para que se vean bien en diferentes dispositivos. Además, recuerda que las pantallas de escritorio y móviles tienen orientaciones distintas, lo que puede afectar a cómo se muestran las imágenes. Aunque la compresión sin pérdida preserva la calidad, también genera archivos grandes que ralentizan la carga de la página. Considera usar los tamaños de imagen más pequeños con la mejor resolución.

Ajustar las dimensiones de las fotos a los requisitos de las pantallas móviles desde el principio, como viste en el punto 1, te ayudará a mejorar aún más la experiencia del usuario, asegurando una navegación rápida y fluida.

Los mejores formatos de imágenes para la web

Aquí tienes una lista de los formatos más utilizados en la fotografía de productos y sus particularidades.

JPG

El JPG (o JPEG) es el tipo de archivo más común para imágenes digitales. Su principal ventaja es la compatibilidad con la mayoría de dispositivos y programas. Ofrece un buen equilibrio entre un tamaño reducido y una alta calidad de imagen. Además, permite ajustar la compresión para disminuir el peso sin sacrificar la nitidez o el rango cromático.

PNG

El PNG fue creado para mejorar el formato GIF, eliminando la limitación de 256 colores. Es perfecto para imágenes que necesitan fondo transparente, como logotipos. Aunque es un formato sin pérdida, lo que significa que no reduce la calidad de la imagen al comprimirse, sus archivos suelen ser más pesados en comparación con JPG. Además, es ampliamente compatible, pero no tan universal como el JPG.

HEIC

HEIC se utiliza sobre todo en dispositivos Apple. Este formato ahorra espacio gracias a su tecnología de compresión avanzada, permitiendo que los archivos ocupen hasta la mitad que un JPG equivalente. Aunque ofrece una alta eficiencia, su principal desventaja es que no es compatible fuera del ecosistema Apple.

WebP

El WebP es un formato moderno diseñado para la web. Garantiza una reducción superior a JPG y PNG, disminuyendo el tamaño de los archivos en un promedio del 30%. Es compatible tanto con compresión con pérdida como sin pérdida. Esto lo hace ideal para optimizar la velocidad de carga en páginas web sin sacrificar la calidad de imagen, pero no todos los navegadores ni herramientas de edición lo soportan.

GIF

GIF es conocido por su capacidad para mostrar animaciones y su limitación a 256 colores, lo que lo hace menos adecuado si quieres imágenes de alta calidad. Aunque el PNG lo ha reemplazado en gran medida para fotografías estáticas, el GIF sigue siendo popular en la web para animaciones simples, porque es el único compatible con todos los navegadores.

TIFF

El formato TIFF es sin pérdida, lo que lo hace adecuado para imágenes de alta calidad. Es compatible con muchas aplicaciones de edición y diseño gráfico, y puede almacenar varias imágenes en un solo archivo. Sin embargo, los archivos TIFF tienden a ser muy grandes, lo que los hace poco prácticos para su uso en la web o en situaciones donde el almacenamiento es limitado.

Cómo averiguar el tamaño de las imágenes de una web

La forma más rápida de conocer el tamaño de las imágenes en cualquier página web (sin descargarlas) es usando la herramienta de inspección del navegador.

Este método funciona en cualquier sistema operativo, ya sea macOS, Windows o Linux, ya que solo depende del navegador. Sin embargo, es compatible únicamente con Safari, Firefox y navegadores basados en Chrome.

Sigue estos pasos:

• Abre la web que deseas analizar.
• Coloca el ratón sobre la imagen de la que quieres obtener información.
• Haz clic derecho (o usa Control/CTRL + clic en macOS) para abrir el menú.
• Selecciona la opción "Inspeccionar".

Al hacer clic en "Inspeccionar", verás el código de la página en un panel. Puede parecer complicado al principio, pero no te preocupes. En el panel aparecerá resaltada la información correspondiente a la fotografía que seleccionaste.

Al mover el ratón sobre el texto destacado, la imagen se cubrirá con una capa azul, permitiéndote identificarla fácilmente.

En el panel podrás ver el tamaño renderizado de la imagen, que es cómo se muestra actualmente en la página, aunque este valor puede cambiar si redimensionas la ventana. Al hacer clic en el enlace de la imagen, tendrás acceso también al tamaño original con el que se cargó.

¡Y listo! No necesitas descargar la fotografía ni usar ninguna herramienta adicional. Para cerrar el panel de inspección, simplemente clica en la X en la esquina superior.

Herramientas para la optimización de imágenes

Las herramientas de optimización de imágenes online son una forma sencilla, rápida (y generalmente gratuita) de cambiar su tamaño. Te mostramos tres herramientas muy fáciles de usar:

Redimensionador de imágenes de Shopify

Esta herramienta gratuita de Shopify te permite ajustar fácilmente el tamaño de tus imágenes para usarlas en diferentes plataformas y redes sociales sin que pierdan calidad.

Solo tienes que subir tu imagen y elegir entre dimensiones predefinidas para publicaciones e historias de Instagram, miniaturas de YouTube y otros formatos comunes en páginas web y redes sociales.

El optimizador de imágenes de Squirai

La app Squirai ha sido diseñada para garantizar que todas las imágenes de tu sitio web estén optimizadas para SEO.

Funciona de manera automática, mejorando las fotos ya publicadas y optimizando cualquier nueva imagen que subas en el futuro. También te permite personalizar y aplicar una marca de agua para proteger tus fotografías de productos sin tener que manejar ningún código.

Optimizador de imágenes de LoyaltyHarbour

LoyaltyHarbour Image Optimizer funciona de manera similar a la app Squirai, comprimiendo las imágenes de tu sitio web para mejorar la velocidad de carga.

Además, su panel de control te permite configurar el texto alternativo de las imágenes y convertirlas al formato de archivo más adecuado para optimizar el rendimiento de la página.

Por otro lado, como ya hemos comentado, también puedes usar Photoshop o algún editor de fotos similar para reducir el tamaño del archivo, pero las aplicaciones anteriores te ahorrarán mucho tiempo y esfuerzo.

Optimiza las imágenes de tu tienda online para destacar

Contar con imágenes adaptadas a los diferentes tamaños de pantalla es crucial no solo para que tu web luzca profesional, sino también para mejorar su posicionamiento en los motores de búsqueda. El tamaño de las imágenes influye en el SEO, la experiencia de usuario y la velocidad de carga, tres factores clave para el éxito de tu sitio web.

Si las imágenes son demasiado grandes, ralentizan la página y aumentan el riesgo de que los usuarios la abandonen. Por el contrario, si son demasiado pequeñas, pueden verse pixeladas o borrosas, afectando la apariencia de tu tienda online.

El creador de páginas web de Shopify optimiza automáticamente las imágenes que subes, ajustando su tamaño para adaptarse a diferentes dispositivos y pantallas, lo que ayuda a mantener una buena velocidad de carga sin perder calidad. Haz una prueba gratuita ahora y descubre lo fácil que es montar una tienda online en cuestión de minutos.

Además, en la Shopify App Store encontrarás herramientas adicionales como Squirai o LoyaltyHarbour Image Optimizer que te ofrecen un mayor control sobre la gestión de fotografías en tu ecommerce. Comprimen las imágenes sin pérdida de calidad, añaden marcas de agua y configuran texto alternativo de manera automática para mejorar el posicionamiento en buscadores, entre otras funciones.