Tired of
lengthy page building?
Try GemPages to create pages faster and smarter with AI-powered feature.
TABLE OF CONTENTS
- ¿Por qué es importante optimizar el tamaño de las imágenes de Shopify?
- Pautas sobre el tamaño de las imágenes en Shopify
- Los mejores formatos de archivos de imagen de Shopify
- ¿Cómo optimizar tus imágenes de Shopify?
- Optimice las imágenes de Shopify para realzar el atractivo de su tienda
- Preguntas frecuentes sobre el tamaño de las imágenes en Shopify
Back to Blog List
Hoja de trucos definitiva sobre el tamaño de las imágenes en Shopify
Updated:
14
minutes read
Una investigación realizada por Salsify ha demostrado que el 30% de los compradores estadounidenses no comprarán si faltan imágenes del producto o si son de baja calidad. Y alrededor del 60% de la generación Z, que actualmente está dando forma al futuro del comercio electrónico , no usaría un sitio web que se carga demasiado lento.
Esto significa que mejorar la experiencia de compra visual con imágenes de alta calidad es increíblemente importante.
¿Cómo puedes entonces presentar tus productos de la mejor manera posible?
Optimizando tus imágenes.
En este artículo, compartiremos todo lo que necesita saber sobre el tamaño de imagen de Shopify , los mejores formatos de archivo para acelerar el tiempo de carga del sitio y dos formas menos conocidas de optimización de imágenes.
¿Por qué es importante optimizar el tamaño de las imágenes de Shopify?
Los propietarios de tiendas suelen centrarse más en un bonito diseño de escaparate que en prestar la debida atención a la optimización de las imágenes. No quieren que los visitantes vean la representación de los sitios y se pregunten cuándo aparecerá el espacio web en blanco. Esto puede provocar la frustración de los clientes y, lo que es peor, que abandonen el sitio sin realizar ninguna transacción.
Es importante optimizar el tamaño de las imágenes de Shopify por algunas razones clave:
- Mejora la velocidad de carga de la página: cuanto más tarde en cargarse tu página, más probabilidades habrá de que tus visitantes se vayan a otro sitio web. No te preocupes, ¡te revelamos 11 prácticas recomendadas para mejorar la velocidad de carga de la página de Shopify !
- Reducir el uso del ancho de banda: optimizar las imágenes puede reducir significativamente el tamaño de las mismas, reduciendo así el uso del ancho de banda y dando como resultado menores costos de alojamiento.
- Mejor experiencia móvil: el tamaño de las imágenes de Shopify para dispositivos móviles y de escritorio es diferente. Al mejorar el rendimiento de su sitio web en dispositivos móviles , los visitantes se sentirán más inclinados a quedarse y la tasa de conversión aumentará naturalmente.
- Aumente la tasa de conversión: una experiencia de compra más rápida y fluida puede generar tasas de conversión más altas, ya que es más probable que los clientes completen su compra si tienen una experiencia positiva en su sitio.
- Mejores clasificaciones en los motores de búsqueda: tiempos de carga más rápidos y una mejor experiencia de usuario también pueden mejorar su clasificación en los motores de búsqueda, lo que genera una mayor visibilidad y tráfico a su sitio.
Pautas sobre el tamaño de las imágenes en Shopify
Shopify te permite subir imágenes con un tamaño máximo de 4472 x 4472 píxeles y un tamaño de archivo de hasta 20 megabytes. Sin embargo, para fotos de productos cuadradas, las dimensiones recomendadas suelen ser 2048 x 2048 píxeles. Al utilizar estas imágenes de alta resolución, tu tienda tendrá una apariencia profesional y ofrecerá excelentes capacidades de zoom para una mejor experiencia del cliente.
Las imágenes de tu tienda en línea son comprimidas automáticamente por Shopify para garantizar tiempos de carga rápidos.
Shopify también ofrece la posibilidad de transformar dinámicamente sus imágenes con operaciones de recorte y cambio de tamaño para distintas resoluciones de pantalla. Si el tráfico proviene principalmente de dispositivos móviles, las fotos cuadradas son la mejor opción. De esta forma, todas las imágenes se mostrarán de forma adaptativa en distintos tamaños de pantalla.
Además, para que tus imágenes parezcan tener el mismo tamaño, necesitas usar una relación de aspecto consistente , o relación alto-ancho, para todas las imágenes que agregues a tus páginas de inicio, páginas de colección y páginas de productos.
A continuación, se muestra una descripción general de los tamaños de imagen de Shopify más populares para tipos de imágenes específicos:
|
Tipos de imágenes |
Dimensiones (px) |
Relación de aspecto |
|
Imagen del producto |
2048 x 2048 |
1:1 |
|
Imagen de colección |
1024 x 1024 |
1:1 |
|
Imagen de fondo |
1920 x 1080 |
16:9 |
|
Imagen del héroe |
1920 x 1080 |
16:9 |
|
Imagen de presentación de diapositivas |
1920 x 1080 |
16:9 |
|
Imagen de superposición de texto |
1920 x 1080 |
16:9 |
|
Imagen de la entrada del blog |
1920 x 1080 |
16:9 |
|
Imagen del logotipo |
250 x 250 |
1:1 |
1. Tamaño de la imagen del producto de Shopify
El tamaño ideal de imagen de producto de Shopify es 2048 x 2048 px. Las imágenes para páginas de productos tienen un tamaño limitado a 3 MB para no afectar la velocidad de carga del sitio web.
El formato cuadrado (relación de aspecto 1:1) de tus imágenes ayudará a que se muestren correctamente y se vean bien sin importar cuán largo sea el contenido.
Además, si habilita el zoom en las imágenes de sus productos, estas deben tener al menos 800 x 800 px . De esta manera, los clientes podrán hacer zoom sin ver imágenes borrosas o pixeladas.
Ahora, echemos un vistazo a Harpersage, una exitosa tienda de ropa . Harpersage facilita a los clientes visualizar el pantalón desde diferentes ángulos y muestra claramente cómo combinarlo. El zoom de la imagen muestra el producto con asombrosos detalles.
Harpersage tiene una página de productos impresionante
Consejo: Para obtener más información sobre cómo producir imágenes de productos impecables, consulte esta guía de 10 minutos y deje que su espíritu "hazlo tú mismo" tome el volante.
Simplifica la edición de imágenes en tu tienda Shopify
Ajuste sus páginas con facilidad con el generador de páginas de GemPages, la edición de imágenes y las herramientas de optimización esenciales incluidas.
2. Tamaño de la imagen de la colección de Shopify
Para las imágenes destacadas de las páginas de colección, utilice la relación de aspecto para evitar que se recorten. La relación predeterminada es cuadrada (1:1).
El tamaño recomendado para la imagen de la colección es de 1024 x 1024 px . Y las imágenes para la página de la colección no pueden ser más grandes que 4472 x 4472 px y 20 MB.
Dado que las imágenes están una al lado de la otra, mostrarlas todas en la misma relación de aspecto hará que la página se vea más impresionante.
Como puedes ver a continuación, Joya, otra hermosa tienda Shopify , ha hecho un trabajo increíble con la experiencia de usuario y la interfaz de usuario generales. Al pasar el cursor sobre la imagen individual, se muestra una muestra de la textura del producto.
La hermosa página de colección de Joya
Consejo: hemos recopilado algunas prácticas recomendadas para crear una página de colección con un alto índice de conversión (con ejemplos comprobados). ¡No dudes en consultarlas!
3. Tamaño de la imagen de fondo de Shopify
El tamaño más común para la imagen de fondo es 1920 x 1080 px y tiene una relación de aspecto de 16:9 . Por lo tanto, su fondo puede verse genial en cualquier dispositivo. Y el tamaño de sus archivos debe ser de un máximo de 3 MB para no afectar la carga de la página.
Pero la historia no termina ahí. Las imágenes de fondo en Shopify se optimizan automáticamente para una amplia gama de pantallas. Si las imágenes son demasiado grandes, es posible que algunas partes se corten, especialmente en pantallas más pequeñas. O si tienes una copia en los laterales de tus imágenes, es posible que no se muestre en dispositivos móviles.
Consejo : puedes diseñar fácilmente una imagen de fondo atractiva modificando la posición del fondo o añadiendo un efecto de desplazamiento directamente desde el editor de GemPages. No es necesario codificar.
Más información: Cómo agregar una imagen de fondo | Tutorial de GemPages
4. Tamaño de la imagen principal de Shopify
Normalmente, la imagen principal debe tener al menos 1920 píxeles de ancho y 1080 píxeles de alto para garantizar una resolución nítida cuando se vea en pantalla completa.
Los temas son adaptables, lo que significa que el tamaño de la imagen principal cambia según el tamaño de la pantalla. Por lo tanto, deja espacio alrededor del marco de la imagen para tener en cuenta las partes que puedan quedar cortadas.
Otra cosa que debes tener en cuenta es que el tamaño de la imagen de Shopify con superposición de texto varía según los distintos dispositivos y pantallas. Debes evitar agregar texto y CTA directamente en la imagen principal. En su lugar, en el Editor, superpón el texto y el botón CTA delante de tu imagen y ajústalos específicamente en todos los dispositivos.
Tomemos como ejemplo a Fluxies . La imagen principal del banner capturó al instante el estilo y la apariencia de sus productos. Mantienen el fondo lo más neutral posible para que el texto sea el centro de atención.
El banner de héroe de Fluxies crea instantáneamente una conexión emocional con sentimientos acogedores, relajados y cómodos.
En el tema Dawn, la altura de la imagen del banner principal se puede personalizar entre pequeña, mediana y grande. Si bien no hay dimensiones específicas, se recomiendan 1920 x 1080 px para computadoras de escritorio y 800 x 800 px para dispositivos móviles.
Consejo: con GemPages , puedes ajustar fácilmente el aspecto de tus banners principales y agregar una imagen específica para dispositivos móviles para obtener la mejor experiencia en todos los dispositivos.
GemAcademy Premium: Exclusivamente para usuarios pagos de GemPages
¡Explora consejos y trucos útiles para crear páginas impresionantes y obtén hasta un 30% de descuento en aplicaciones esenciales de Shopify!
5. Tamaño de la imagen del banner de Shopify
El tamaño del banner de Shopify depende de tus necesidades y del diseño de tu sitio web. Estos son los tamaños más comunes de Google Ads:
|
Tipos de banners |
Dimensiones (px) |
|
Tabla de clasificación |
728 x 90 |
|
Rectángulo grande |
336 x 280 |
|
Rectángulo mediano |
300 x 250 |
|
Banner móvil |
300 x 50 |
|
Bandera |
468 x 60 |
|
Amplio rascacielos |
160 x 600 |
|
Cuadrado |
250 x 250 |
|
Plazoleta |
200 x 200 |
Tenga en cuenta que una imagen que se ve bien en una computadora de escritorio puede ser horrible en un dispositivo móvil. Por lo tanto, vale la pena verificar la capacidad de respuesta de sus imágenes antes de presionar el botón de publicación.
6. Tamaño de imagen de presentación de diapositivas de Shopify
El tamaño ideal para una imagen de diapositiva de Shopify es entre 1920 píxeles de ancho y 1080 píxeles de alto .
En el momento en que ingresas al blog de Stojo , te darás cuenta de que un tamaño más grande no siempre es mejor. La imagen en miniatura y el tamaño de fuente del título son demasiado grandes. Por lo tanto, no puede atraer a los visitantes para que comiencen a leer porque la introducción se encuentra debajo de la sección "arriba del pliegue".
Aquí hay un gran ejemplo de cómo debe mostrar las imágenes de su presentación de diapositivas de nuestro usuario "glowy": Growhub
Glowhub captura sus propias fotografías de estilo de vida con una presentación de diapositivas
7. Tamaño de la imagen del blog de Shopify
El tamaño perfecto para una imagen destacada de un blog es 1920 x 1080 px, que es una relación de aspecto de 16:9 . El tamaño máximo del archivo es de 3 MB , pero lo ideal es que sea más pequeño sin sacrificar la calidad.
Sin embargo, las dimensiones no son definitivas. Los tamaños de las imágenes dependerán de los requisitos del tema de Shopify. También depende en gran medida de la cantidad de pantalla que quieras que ocupe la imagen destacada de tu blog.
También es importante tener en cuenta el ancho de la imagen. ¿Por qué? Porque si tu imagen es demasiado pequeña, Shopify la estirará para que encaje en la pantalla. El resultado se verá pixelado y poco profesional.
Un ejemplo de una imagen destacada en el blog de Shopify para tu inspiración de Stojo
8. Tamaño del logotipo de Shopify
¿Por qué importa el tamaño del logotipo?
Si un logotipo es más pequeño que el tamaño requerido, se estirará y se volverá ilegible. Al mismo tiempo, se comprimirá automáticamente en una calidad negativa si el logotipo es más grande de lo necesario. Sea cual sea el caso, elegir el tamaño de logotipo adecuado hará que su marca tenga un aspecto más profesional.
Shopify recomienda que la imagen del logotipo tenga un máximo de 250 píxeles de ancho y 250 píxeles de alto . El tamaño del archivo puede ser de al menos 1 MB , pero lo ideal es que sea más pequeño sin sacrificar la calidad. El logotipo debe tener forma rectangular o cuadrada, según sus necesidades.
Como puedes ver arriba, el logotipo de Stojo tiene una relación de aspecto de 2:1 y está ubicado en el centro del encabezado.
Los mejores formatos de archivos de imagen de Shopify
El segundo aspecto principal que hay que tener en cuenta al optimizar las imágenes de Shopify es el formato de archivo. Estos son los formatos de archivo de imagen que Shopify admite:
- JPEG
- PNG
- GIF
- HEIC
- WebP
- AVIF
Nota: Shopify detecta automáticamente qué formatos de imagen son compatibles con sus navegadores y luego muestra la imagen en el mejor formato disponible.
Por ejemplo, en Shopify, las imágenes se convierten automáticamente a WebP o AVIF cuando son compatibles, pero a JPG como alternativa si no son compatibles.
Ahora, echemos un vistazo más de cerca a los dos formatos de imagen populares que puedes usar en tu tienda en línea.
|
Tipos de archivos |
Descripción |
Tipos de imágenes recomendados |
|
Formato JPEG (JPG) |
Las imágenes JPEG:
|
|
|
PNG |
Las imágenes PNG:
|
|
GIF es otro formato de archivo común. Los archivos GIF son útiles para agregar imágenes dentro del contenido y para ilustraciones o gráficos básicos.
Como mencionamos anteriormente, existen otros formatos, pero no todos los navegadores los admiten. Lo ideal es utilizar el formato JPEG para imágenes con mucho color y el formato PNG para imágenes sencillas.
¿Cómo optimizar tus imágenes de Shopify?
Ya conoces el valor de la optimización de imágenes, los tamaños de imágenes recomendados de Shopify y los formatos de imágenes para tu tienda. Ahora es el momento de poner en práctica todos tus conocimientos optimizando tus imágenes para crear una tienda sorprendente y de carga rápida.
De forma predeterminada, Shopify hace mucho para optimizar las imágenes de su tienda:
- CDN de Shopify : los archivos de imagen se copian y distribuyen entre servidores de todo el mundo, y cada visitante de la tienda ve una imagen generada por el servidor más cercano.
- Compresión automática de archivos: el tamaño de archivo se optimiza automáticamente cuando se carga en Shopify. Los visitantes verán la imagen con el tamaño más adecuado según el dispositivo que estén usando y su velocidad de conexión. Si bien el cambio de calidad no es perceptible a simple vista, acelerará la carga de la página.
- Conversión automática de formato de archivo: Shopify determina qué formatos de sitio son compatibles y envía la mejor opción.
Y a continuación, también compartimos otros dos consejos para la optimización de imágenes.
1. Comprueba el tamaño de las imágenes en tu tienda Shopify
Ahora, hemos hablado de la forma más rápida de averiguar el tamaño de las imágenes de Shopify (sin descargar las imágenes), que se llama opción Inspeccionar/Inspeccionar elemento . Este método está al alcance de tu mano y siempre es accesible desde Safari, Chrome o Firefox.
A continuación te indicamos cómo comprobar el tamaño de las imágenes en tu tienda Shopify:
- Haz clic derecho en la imagen cuyas dimensiones deseas conocer
- Elija la opción Inspeccionar
- En el lado derecho, pase el cursor sobre la URL para ver la ventana emergente con todas las propiedades de la imagen.
En este caso, la imagen se optimiza automáticamente de 1140 x 1140 px a 398 x 398 px para adaptarse a la pantalla.
2. Comprime y edita tus imágenes de Shopify
Es una resolución ideal para cambiar el tamaño de la imagen antes de subirla a tu sitio web. Sin embargo, puedes reducir manualmente el tamaño de las imágenes después de subirlas.
Con GemPages, puede ajustar fácilmente la resolución de la imagen, personalizar el espaciado, las esquinas, la opacidad, las animaciones, las acciones de flujo, insertar enlaces de imágenes, agregar texto alternativo, etcétera.
Simplifica la edición de imágenes en tu tienda Shopify
Cree páginas como las imaginó con las mejores herramientas de creación de páginas, edición de imágenes y optimización incluidas.
Para optimizar la imagen, puede dirigirse a la opción Configuración > Calidad de imagen > Más clara/más clara . Luego, se comprimirá la imagen.
También puedes modificar la resolución de la imagen. Sin embargo, esta función está disponible para imágenes cargadas en el servidor de Shopify y en la CDN UCare de GemPages.
Optimice las imágenes de Shopify para realzar el atractivo de su tienda
Diseñar tu imagen de Shopify con el tamaño y formato correctos la primera vez te resultará mucho más difícil, en lugar de tener que ir y venir arreglando todo una vez que ya esté hecho.
Si sigue estas pautas de tamaño de imagen de Shopify, su sitio será más apreciado por los motores de búsqueda, navegadores y redes, y se cargará más rápido para sus lectores.
Consejo profesional: use GemPages para optimizar la imagen de su producto. Como aplicación que se puede integrar en Shopify para crear y personalizar su tienda en línea, GemPages posee muchos elementos y funciones para ayudar a los creadores de tiendas.
La imagen de producto de GemPages, ubicada dentro del módulo de producto, facilita la visualización de imágenes de productos provenientes de su panel de administración de Shopify. Incluye:
Imagen principal : el elemento visual principal, extraído como imagen inicial de la sección Medios en tu Panel de control de Shopify > Producto.
Galería de imágenes : una recopilación de imágenes extraídas de la misma sección de Medios, presentadas en un formato de galería visual.
Más información: Imágenes de productos de Shopify: una guía de 10 minutos para principiantes (2023)
El elemento Muestras de GemPages ofrece otra forma de mostrar las variaciones de sus productos. Si su producto tiene distintas variantes para mostrar, esta función es una excelente opción.
Nuevamente, la optimización de imágenes es una técnica sencilla que no requiere mucho esfuerzo. Y optimizar las imágenes en tus tiendas es aún más fácil con GemPages , simplemente habilitando la optimización de imágenes directamente desde el editor.
¿No estás listo para comprometerte pero aún así quieres probar?
¡No hay problema! Comienza con el plan gratuito de GemPages. Explora funciones maravillosas que pueden hacer maravillas en tu tienda.
Preguntas frecuentes sobre el tamaño de las imágenes en Shopify
What is the best image dimension in Shopify?
For images, Shopify doesn't have a one-size-fits-all dimension. Instead, different types of images require different sizes. The recommended image size for product image is 2048 x 2048 px, which is a 1:1 aspect ratio. The image size for the banner is 1920 x 1080 px (16:9) aspect ratio).
Does Shopify automatically resize images?
Yes. Shopify automatically optimizes the file size when it’s uploaded to your stores.
What is the best Shopify mobile image size?
A Shopify image on mobile devices can be up to 4472 x 4472 px, with a file size of up to 20 megabytes. But Shopify typically suggests using 2048 x 2048 px for square product photos.
What aspect ratio are Shopify product images?
While Shopify doesn't require a specific aspect ratio for product images, it's best to use a 1:1 aspect ratio and a recommended size of 2048 x 2048 px. Meanwhile, the images should be at least 800 x 800 px to avoid blurriness when zooming in.
Why are Shopify images blurry?
Shopify images can be blurry due to the following:Inappropriate image size: Any image smaller than the recommended size might get cut off or appear blurry if it needs to fill the browser width. Check out the best size for your Shopify images in our article.Low-resolution images: If you upload images with a low resolution, they can appear blurry or pixelated when displayed on the website. Image compression: Shopify automatically compresses product images to reduce their size and improve page loading time. This compression can cause the images to appear blurry.Theme settings: Some Shopify themes allow you to customize the image display settings. If the theme settings are not configured properly, it can be blurry.Responsive design: Images can be blurry when down-sized to fit responsive Shopify themes.
What format should Shopify images be in?
We suggest using either JPG, PNG, or WebP formats for images to enhance page loading time. JPG is convenient for maintaining decent quality at smaller sizes. PNG ensures higher quality with lossless compression but results in larger file sizes. WebP, on the other hand, offers superior compression specifically designed for web images, with an average file size reduction of over 30% compared to traditional formats like PNG and JPEG.
What is the best size for product images on Shopify Rectangle?
For rectangular product images, consider the optimal aspect ratio of 4:3 or 3:2, such as 1200 x 900 pixels, 1500 x 1000 pixels, or 2000 x 1333 pixels. However, the recommended size to have a high-quality product upload is at least 1024 x 1024 pixels.
- ¿Por qué es importante optimizar el tamaño de las imágenes de Shopify?
- Pautas sobre el tamaño de las imágenes en Shopify
- Los mejores formatos de archivos de imagen de Shopify
- ¿Cómo optimizar tus imágenes de Shopify?
- Optimice las imágenes de Shopify para realzar el atractivo de su tienda
- Preguntas frecuentes sobre el tamaño de las imágenes en Shopify
