Internet está por todas partes y la gente utiliza una gran variedad de dispositivos diferentes para acceder a él. Antiguamente, los ordenadores de mesa eran la principal forma de usar Internet, ¿pero hoy en día? En 2023 casi el 60% del tráfico web mundial provino de dispositivos móviles.
Lo que esto implica es que hay que optimizar las imágenes correctamente para los usuarios que hagan compras desde sus móviles. En caso de no hacerlo, es probable que las imágenes se vean más pequeñas de lo que deberían y los usuarios tengan que hacer zoom y scroll en la página. O, lo que es peor, que directamente no vean ninguna imagen.
Pero, buenas noticias: no es nada complicado asegurarse de que las imágenes de tu web son compatibles con los diferentes dispositivos de acceso. Entre los principales métodos encontramos, en primer lugar, elegir el tamaño de imagen adecuado (en cuanto a píxeles y a peso del archivo) y emplear herramientas online para optimizar las imágenes.
Sigue nuestro tutorial para optimizar tus imágenes correctamente tanto para dispositivos móviles como para ordenadores.
El tamaño ideal de las imágenes para una web
Anchura en píxeles: En la mayoría de los casos, 2500 píxeles suele ser una buena opción para permitir ampliar una imagen a tamaño completo en un navegador. Las imágenes con menos píxeles pueden aparecer cortadas o borrosas al ajustarse al ancho del navegador.
Tamaño de la imagen: En términos generales, el tamaño ideal (en píxeles) de tus imágenes dependerá del uso que hagas de ellas. Por ejemplo, las imágenes de fondo tienen que ser más grandes que las imágenes que pongas en una publicación de tu blog.
Peso del archivo: Cualquier archivo mayor de 20 MB puede afectar gravemente a la velocidad de tu web. En la mayoría de los casos es mejor optar por imágenes más ligeras (hasta 2 MB de tamaño) .
Atributos: Los atributos de imágenes (texto alternativo o etiquetas alternativas) son elementos de texto y no afectan al rendimiento de tu web. No obstante, son útiles para las personas con discapacidad visual que utilizan lectores de pantalla, así que es bueno que el texto de los atributos sea breve y conciso.
¿Por qué es importante el tamaño de las imágenes para tu web?
En las webs, el tamaño de las imágenes es importante por tres razones principales: la experiencia de usuario, la velocidad de la página y el ranking. Las malas elecciones con respecto al tamaño de las imágenes pueden repercutir en estas tres métricas a la vez.
Esto conlleva que utilizar las imágenes con los tamaños más adecuados para su uso también puede ayudarte a mejorar las tres métricas al mismo tiempo.
Website image type | Desktop image dimensions (W x H) | Mobile image dimensions (W x H) | Recommended aspect ratio |
---|---|---|---|
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 (rectangle) | 400 x 100 pixels | 160 x 40 pixels | 4:1 |
Logo (square) | 100 x 100 pixels | 60 x 60 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 |
Thumbnail | 300 x 300 pixels | 90 x 90 pixels | 1:1 |
Porque mejora la experiencia de usuario
Utilizar el tamaño de imagen correcto para cada uso ayuda a mejorar la experiencia de usuario, pues facilita la visualización de la web sin tener que utilizar el zoom para ver los detalles o hacer scroll para ver la imagen entera.
Por el contrario, las imágenes de alta calidad y tamaño correcto aumentan el valor percibido de sus productos y ofrecen más información visual a los clientes potenciales.
Por ejemplo, vea cómo estas imágenes de la zapatería sostenible Allbirds mejoran la experiencia del usuario al señalar claramente las distintas características de su producto:
Porque mejora la velocidad de la página
Cuando en las webs se utilizan imágenes de gran tamaño, el servidor necesita más tiempo para cargar la página cada vez que un usuario accede a ella. En términos de SEO de imágenes, a esta métrica se le conoce como "contentful paint".
Las imágenes más pequeñas (sobre todo en lo que respecta al peso del archivo) suelen necesitar menos tiempo para cargar en todos los dispositivos.
Aquí tienes un ejemplo de una página con una mala velocidad de carga.
Puedes ver que el servidor tiene una velocidad media de carga de 2,1 segundos para la primera imagen, y de 4,1 segundos para la imagen de mayor tamaño. La mitad de los clientes abandonan sus carritos cuando la página tarda más de 3 segundos en cargar, así que es importante que tu página sea más rápida para evitar una tasa de rebote alta.
Porque mejora el ranking de las webs
El ranking de una web puede hacer referencia al ranking general de una web (o al ranking del dominio), o también a lo cerca de la primera posición que aparece cuando un usuario busca un término específico en un motor de búsqueda.
El algoritmo de Google utiliza un montón de métricas para determinar qué aparece en la primera página de resultados, y la calidad de las imágenes (y la experiencia de usuario que estas generan) está contemplada en el algoritmo actual.
Guía para elegir el tamaño de las imágenes de tu web
En esta sección vamos a repasar los requisitos de tamaño para cada tipo de imagen de una web, ya que no son los mismos para todas las imágenes. En una web hay cinco tipos de imágenes principales: imágenes de fondo, imágenes de inicio, banners, imágenes para blogs y logos.
Imágenes de fondo
La imagen de fondo es el tipo de imagen más grande que encontrarás en una web. Tal y como sugiere el nombre, sirve de telón de fondo para tu página de inicio (aunque también suelen aparecer en las principales páginas pilar de la web).
Anchura máxima de la imagen: 2500 píxeles
Altura máxima de la imagen: 1406 píxeles
Relación de aspecto: 16:9
Peso del archivo: 20 MB como máximo
Aquí tienes un buen ejemplo de una imagen de fondo en la web de un ecommerce:
Blue Banana Brand coloca su producto en el centro de atención de su web. Usando imágenes grandes de sus más recientes prendas.
Imágenes de inicio
Es posible que alguna vez hayas confundido las imágenes de inicio con las imágenes de fondo, pero la principal diferencia es que las primeras suelen tener menos altura, casi la mitad. Este tipo de imágenes es una muy buena opción si quieres que el texto de la web aparezca directamente en la pantalla y que los usuarios no tengan que hacer scroll para leerlo.
Anchura máxima de la imagen: entre 1280 y 2500 píxeles
Altura máxima de la imagen: entre 720 y 900 píxeles
Relación de aspecto: 16:9
Peso del archivo: 10 MB como máximo, pero lo ideal es que pese menos (sin sacrificar la calidad)
Aquí tienes un ejemplo de una imagen de inicio en vivo y en directo:
Como ves, en BLK & BLD optaron por elegir una imagen que ocupara todo el ancho y una relación de aspecto fija más corta.
Banners
Los banners tienen algo más de enjundia que el resto de imágenes, pues pueden adoptar diferentes tamaños y formas según lo que se quiera mostrar al usuario. No obstante, el tipo de banner más habitual en las webs son anuncios.
Como Google Ads es uno de los servicios más populares en este ámbito, te dejamos aquí las recomendaciones de nuestros amigos de Google sobre los mejores tamaños para banners:
Como ves, opciones hay mil. Pero si lo que quieres es un banner que no sea un anuncio, las opciones rectangulares (p. ej. 300 x 200 o 970 x 90 píxeles) suelen ser las mejores. Dado que usar imágenes ligeras ayuda a mejorar la velocidad de la web, lo ideal sería un máximo de 5 MB.
Imágenes para blogs
Las imágenes para blogs también se dan en tamaños y tipos diferentes. No obstante, cuando hablamos de la imagen principal de cada publicación (es decir, la que aparece en la mitad superior de la página), lo ideal es que todas las imágenes del blog tengan un tamaño uniforme.
Anchura máxima de la imagen: 2240 píxeles
Altura máxima de la imagen: 1260 píxeles
Relación de aspecto: 16:9
Peso del archivo: 3 MB como máximo, pero lo ideal es que pese menos (sin sacrificar la calidad)
Al principio de esta página encontrarás un ejemplo de lo que es una imagen para blogs, pero aquí tienes otro de La Fiesta de Olivia:
Logo
El logo será probablemente la imagen más pequeña de tu web (a no ser que contemos el Favicon de la barra de pestañas). Según el tipo de logo, podrás elegir entre dos opciones: rectangular o cuadrado.
La mayoría de los logos tienen una relación 1:1. Pero si ves un logo más rectangular, lo normal es que tenga una relación de aspecto de 2:3, (cuando parezca prácticamente cuadrado), o de 4:1.
Anchura máxima de la imagen: 250 píxeles
Altura máxima de la imagen: 250 píxeles
Relación de aspecto: 1:1, 2:3, 4:1
Peso del archivo: 1 MB como máximo, pero lo ideal es que pese menos (sin sacrificar la calidad)
El logo de la web de Shopify, por ejemplo, tiene una relación de 4:1.
Este tamaño de imagen es bueno para los logos de las marcas que tienen un nombre más largo, o para los logos que son solo palabras y carecen de elementos gráficos.
Recomendaciones de tamaños de imágenes para dispositivos móviles
1. Escoge las dimensiones adecuadas
Es fundamental encontrar un equilibrio entre imágenes suficientemente grandes, que permitan hacer zoom a los usuarios que lo deseen, e imágenes con el peso óptimo, que no ocupen demasiado espacio ni ralenticen el tiempo de carga de la página.
En Shopify puedes subir imágenes de hasta 4472 x 4472 píxeles y con un peso de hasta 20 MB. No obstante, el creador de páginas de Shopify recomienda utilizar imágenes de 2048 x 2048 píxeles para las fotos cuadradas de productos.
Las imágenes de alta resolución darán a tu tienda un aspecto profesional y bien acabado, y ofrecen grandes posibilidades en cuanto al zoom. Recuerda que, para que el zoom funcione, las imágenes tienen que tener más de 800 x 800 píxeles.
Utiliza la misma relación de aspecto entre la anchura y la altura en todas tus imágenes destacadas para conseguir una apariencia uniforme en toda tu línea de productos y en las páginas de tu colección. Por ejemplo, puedes ponerlas todas cuadradas.
La imagen destacada es la primera imagen de un producto que aparecerá en la tienda, ya sea en la página de inicio, en la página del carrito, en la página de pago o en las páginas de la colección. Las miniaturas deben tener también todas el mismo tamaño y la misma forma para que la tienda tenga un aspecto refinado.
No olvides que muchos de tus clientes navegan desde dispositivos móviles, y que las imágenes cuadradas son más fáciles de distribuir en las pantallas más pequeñas. Adicionalmente, las imágenes cuadradas y verticales ocupan más espacio en la pantalla del teléfono móvil, lo que permite a los clientes ver mejor las fotos.
2. No te olvides del peso de los archivos
Las imágenes muy pesadas pueden afectar enormemente a la velocidad de tu web, sobre todo cuando los usuarios intenten acceder a ella desde un smartphone. Y, cuanto más lenta sea tu web, más posibilidades habrá de que el usuario la abandone y visite otra de las opciones de su búsqueda de Google.
Por eso es mejor comprimir las imágenes grandes para que no pesen tanto, sobre todo porque muchas webs tienen un peso máximo para los archivos que permiten subir. Shopify, por ejemplo, permite un peso máximo de 20 MB.
Hay herramientas online que te pueden ayudar a comprimir imágenes, como TinyPNG o Compress JPEG. En estas herramientas simplemente tienes que arrastrar tus imágenes pesadas hasta el área de subida, comprimirlas para que pesen menos (sin perder calidad) y volver a descargarlas.
Lo habitual y recomendable es que el conjunto de todas tus imágenes de inicio o de fondo no pese más de 1 MB y que las fotos de productos pesen en torno a 300 KB.
3. Redimensiona las fotos para los dispositivos móviles
Shopify redimensiona automáticamente el tamaño de las imágenes para ajustarlas a las pantallas más pequeñas, pero a veces algunas fotos requieren un ajuste manual extra. Ten en cuenta que las pantallas de los dispositivos móviles y de los ordenadores no solo tienen tamaños diferentes, sino que también tienen orientaciones diferentes.
Shopify intenta ajustar las imágenes cortándolas ligeramente, pero lo mejor es que las imágenes que uses sean cuadradas y que tus productos estén centrados tanto vertical como horizontalmente.
Por otro lado, las imágenes con exceso de resolución, como las que tienen el tamaño máximo de Shopify de 4000 x 4000 píxeles, pueden quedar borrosas al redimensionarse para los dispositivos móviles. Reducir tu imagen a un tamaño más manejable y adaptarla a una forma más adecuada para los dispositivos móviles puede contribuir a que tu tienda tenga mejor aspecto en todos los dispositivos. Prueba con el editor de imágenes de Shopify, que es gratuito y permite reducir el tamaño de las imágenes rápidamente.
Recuerda que los archivos grandes también pueden ralentizar el tiempo de carga de tu web. En el ecommerce cada segundo cuenta, sobre todo en los dispositivos móviles, así que la optimización de tus imágenes debería ser una de tus prioridades.
Por un lado, la compresión sin pérdida ofrece la mejor calidad de las imágenes. Pero, por otro lado, en ocasiones genera archivos enormes que necesitan mucho tiempo para cargar (sobre todo cuando se hace una carga masiva), lo que puede ralentizar el tiempo de carga de tu página y hacer que los visitantes abandonen tu tienda. Esto ocurre sobre todo en los dispositivos móviles, en los que a veces se tiene una conexión a Internet más lenta y la espera a que la imágenes terminen de cargarse puede resultar frustrante para los clientes.
El diseño adaptable y los algoritmos de Shopify hacen un buen trabajo en lo que respecta a ajustar el tamaño y adaptar tus imágenes a los diferentes dispositivos, pero si les echas una mano y eliges bien el peso para cada ocasión, la experiencia de compra puede ser todavía mejor.
Los mejores formatos de imágenes para webs
Veamos cuáles son los formatos más utilizados en la fotografía de productos y qué particularidades ofrecen cada uno. Aquí tienes una lista ordenada por la frecuencia de uso en la fotografía de productos.
JPG
JPG es el formato de archivo más común para imágenes digitales. Tiene una gran compatibilidad y combina su peso pequeño con una gran rango cromático. Su compresión te permite equilibrar el peso del archivo con la calidad de la imagen.
PNG
El archivo PNG se creó para mejorar el archivo GIF y eliminar su limitación de 256 colores. Tiene gran compatibilidad, sin pérdida (reduce el peso del archivo sin reducir su calidad) y es compatible con las transparencias, es decir, con los fondos transparentes. Entre sus desventajas: el peso de los archivos PNG puede ser grande debido a la compresión sin pérdida y el formato no es universalmente compatible como JPG.
HEIC
Los archivos HEIC son un formato para ahorrar espacio que, gracias a una avanzada tecnología de compresión, ocupa la mitad de espacio que un archivo JPEG equivalente. A menudo se utiliza para almacenar fotos en archivos de iOS, pues se trata del formato estándar de Apple.
WebP
Es un formato de imagen moderno. Brinda una compresión superior de las imágenes de una web y reduce el peso de los formatos tradicionales de archivos como PNG y JPEG en más de un 30% de media.
GIF
GIF ofrece archivos ligeros gracias a la compresión y reducción de las imágenes a 256 colores. Aunque en gran medida ha quedado sustituido por PNG, se sigue usando para animaciones, pues es el único formato compatible con ambos tipos de contenido y compatible con todos los navegadores.
TIFF
TIFF es un formato de compresión sin pérdida compatible con una amplia variedad de aplicaciones web y de edición. Ofrece una resolución de imagen de gran calidad y permite guardar varias imágenes y páginas cómodamente en un único archivo. No obstante, los archivos tienden a ser pesados.
En resumen:
JPG es el más cómodo y ofrece un buen equilibrio entre un peso ligero y una buena calidad.
PNG ofrece una compresión sin pérdida de mayor calidad, pero los archivos son muy pesados.
GIF es útil para, por ejemplo, vídeos de 360 grados que sean archivos ligeros.
TIFF, en cambio, ofrece gran calidad, los archivos suelen ser pesados y poco prácticos.
Cómo saber cuál es el tamaño de las imágenes de tu web
La forma más rápida de saber el tamaño de las imágenes de cualquier página web (sin descargar la imágen y mirar sus propiedades) es utilizar la herramienta para desarrolladores/inspeccionar los elementos del navegador.
Este método funciona independientemente de si usas el sistema operativo macOS, Windows o Linux, pues depende solo del navegador. La parte mala es que solo funciona con Safari, Firefox y navegadores basados en Chrome.
Lo único que tienes que hacer es ir a una web, colocar el ratón sobre la imagen de la que quieres extraer información y hacer clic con el botón derecho o usar Control/CTRL + clic para que se despliegue el menú de opciones.
Busca la opción "Inspeccionar":
Al hacer clic en "Inspeccionar" aparecerá toda la información sobre el código de la página. Puede parecer intimidante, pero que no cunda el pánico, que te seguimos guiando.
En el panel de inspección debería aparecer destacada la información sobre la imagen en la que has hecho clic. Al colocar el ratón en el texto destacado, la imagen se recubrirá de una capa azul que te permitirá identificar a qué parte corresponde el código que estás leyendo.
En este caso, puedes ver que el navegador (Brave) te indica el tamaño de la imagen y cuántos píxeles tiene. No obstante, esa cifra cambiará cuando la página se redimensione. Pero si colocas el ratón en el enlace donde se encuentra la imagen almacenada, aparecerán las propiedades fijas de la imagen:
¡Y eso es todo! No hace falta descargar la imagen ni ninguna herramienta específica, todo lo que necesitas está ya en el navegador. Para salir del panel de inspección solo tienes que hacer clic en la X de la esquina superior derecha o izquierda.
Herramientas para la optimización de imágenes
El mejor enfoque es valerte de una herramienta de optimización para redimensionar las imágenes. Aquí te presentamos dos herramientas muy buenas que pueden ayudarte a hacerlo desde tu panel de control de Shopify.
El optimizador de imágenes de Squirai
El optimizador de imágenes de Squirai funciona con velocidad verificada y se asegura de que tus imágenes estén listas desde el punto de vista del SEO. Además, optimiza automáticamente todas las imágenes de tu web, también las imágenes nuevas que vayas añadiendo luego.
Del mismo modo, 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
El optimizador de imágenes de LoyaltyHarbour es un plug-in que funciona de manera similar a la herramienta de Squirai: comprime las imágenes de tu web.
No obstante, no tiene la opción de añadir una marca de agua. A cambio, su completo panel de control te permite generar automáticamente el texto alternativo de las imágenes y convertirlas al tipo de archivo que mejor convenga a la velocidad de tu página.
Por otro lado, si tienes la capacidad, también puedes usar Photoshop para reducir el tamaño del archivo, pero esto puede ser un proceso más complicado que el de las herramientas anteriores.
Emplea las mejores imágenes para la web de tu marca
Que tu web cuente con imágenes adecuadas para los diferentes tamaños de pantalla es esencial para que las webs tengan una apariencia interesante y un buen posicionamiento en los motores de búsqueda. Pero el peso de tus imágenes es importante: si son demasiado pesadas, te arriesgas a que la web tarde demasiado en cargar, y si son demasiado ligeras, te arriesgas a que la experiencia de usuario sea mala.
Según el tipo de imagen que necesites, habrá diferentes recomendaciones sobre su tamaño. En lugar de intentar acordarte de todas, guárdate esta guía en tus favoritos y consúltala cada vez que subas imágenes.
Eso sí, si usas Shopify y alguna de las herramientas de optimización recomendadas más arriba, no tendrás que preocuparte por que el tamaño de tus archivos te ralentice la web.