Subir imágenes

Puedes usar diferentes tipos de imágenes, como el logo de la empresa, imágenes del producto, presentaciones de diapositivas, banners e imágenes de artículos del blog. También puedes cortar y cambiar el tamaño de las imágenes, y personalizar la configuración de los elementos multimedia del tema para cambiar el borde o la sombra de los elementos que se muestran en la tienda.

Para mostrar las imágenes en la tienda online exactamente como desees, tienes que usar la relación de aspecto de la imagen correcta. Las imágenes se optimizan de manera automática en la tienda online con la red de distribución de contenido de Shopify (CDN).

Nota

No es necesario comprimir las imágenes manualmente antes de subirlas. Siempre sube aquellas que tengan la mejor calidad posible.

Subir una imagen al editor de temas

Puedes agregar imágenes al tema en el editor de temas. También puedes subirlas en la sección Contenido > Archivos del panel de control de Shopify. Para obtener más información, consulta Subir y gestionar archivos.

Pasos:

Escritorio

1. Desde el Panel de control de Shopify, ve a Tienda online > Temas.
2. Haz clic en Personalizar en el tema al que quieres subir una imagen.
3. Opcional: Si deseas agregar una imagen a una página de la tienda que sea distinta a la de inicio, haz clic en el menú desplegable de la página de inicio y, luego, selecciona la plantilla que deseas editar.
4. En la barra lateral del editor de temas, haz clic en la sección o el bloque donde deseas agregar una imagen.
5. En el campo Imagen, toma una de las siguientes medidas:
   • Para subir una imagen desde la computadora, realiza los siguientes pasos:
     1. Haz clic en Seleccionar imagen > Agregar imágenes.
     2. Busca y abre la imagen en la computadora.
     3. Haz clic en Listo.

- Para usar una imagen de archivo gratis de Burst, realiza los siguientes pasos: 1. Haz clic en Explorar imágenes gratuitas. 2. Busca una imagen que deseas usar. 3. Haz clic en Seleccionar.

1. Haz clic en Guardar.

iPhone

1. En la aplicación de Shopify, toca el botón ….

2. En la sección Canales de ventas, toca Tienda online.

3. Toca Gestionar todos los temas.

4. Toca Personalizar en el tema en donde quieres subir una imagen.

5. Opcional: Si quieres agregar una imagen a una página de la tienda que no sea la de inicio, toca el menú desplegable de la página de inicio y, luego, selecciona la plantilla que quieres editar.

6. Toca Secciones y, luego, toca la sección o el bloque al que deseas agregar una imagen.

7. En el campo Imagen, toma una de las siguientes medidas:

   • Para subir una imagen desde un dispositivo, sigue los pasos a continuación:
     1. Toca Seleccionar imagen > Agregar imágenes.
     2. Busca y abre la imagen en el dispositivo.
     3. Toca el botón Listo.

- Para usar una imagen de archivo gratis de Burst, realiza los siguientes pasos: 1. Toca Explorar imágenes gratuitas. 2. Busca una imagen que deseas usar. 3. Toca el botón Listo.

1. Toca Guardar.

Android

1. En la aplicación de Shopify, toca el botón ☰.

2. En la sección Canales de ventas, toca Tienda online.

3. Toca Gestionar todos los temas.

4. Toca Personalizar en el tema en donde quieres subir una imagen.

5. Opcional: Si quieres agregar una imagen a una página de la tienda que no sea la de inicio, toca el menú desplegable de la página de inicio y, luego, selecciona la plantilla que quieres editar.

6. Toca Secciones y, luego, toca la sección o el bloque al que deseas agregar una imagen.

7. En el campo Imagen, toma una de las siguientes medidas:

   • Para subir una imagen desde un dispositivo, sigue los pasos a continuación:
     1. Toca Seleccionar imagen > Agregar imágenes.
     2. Busca y abre la imagen en el dispositivo.
     3. Toca el botón Listo.

- Para usar una imagen de archivo gratis de Burst, realiza los siguientes pasos: 1. Toca Explorar imágenes gratuitas. 2. Busca una imagen que deseas usar. 3. Toca el botón Listo.

1. Toca ✓.

Agregar imágenes usando metacampos

Si tienes metacampos configurados en las imágenes, puedes usar el selector de fuente dinámico para agregar una imagen a la tienda online. Para obtener más información sobre metacampos y formatos de imagen compatibles, consulta Agregar valores a metacampos.

Definir un punto focal en una imagen

Puedes usar puntos focales para definir la parte más importante de una imagen en la tienda online. Cuando estableces un punto focal en una imagen, se convierte en el área de atención. Los puntos focales siempre se muestran en marco, incluso si tienes un tema que recorta la imagen para que se ajuste al diseño. Además, te dan más control sobre la forma en que se muestra la imagen en diferentes tamaños de pantalla y cuando los temas usan diferentes proporciones de aspecto.

Solo puedes tener un punto focal por imagen, pero se puede cambiar o eliminar en cualquier momento.

Compatibilidad de puntos focales con temas gratuitos de Shopify

Puedes definir un punto focal en las siguientes versiones de los temas gratuitos de Shopify:

• Versión 3.0.0 y posterior de Colorblock
• Versión 5.0.0 y posterior de Craft
• Versión 5.0.0 y posterior de Crave
• Versión 7.0.0 y posterior de Dawn
• Versión 1.0.0 y posterior de Origin
• Versión 1.0.0 y posterior de Publisher
• Versión 2.0.0 y posterior de Refresh
• Versión 3.0.0 y posterior de Ride
• Versión 1.0.0 y posterior de Rise
• Versión 5.0.0 y posterior de Sense
• Versión 0.0.1 y posterior de Spotlight
• Versión 4.0.0 y posterior de Studio
• Versión 4.0.0 y posterior de Taste
• Versión 1.0.0 y posterior de Trade

Si usas un tema externo, revisa la documentación sobre el tema para averiguar si es compatible con los puntos focales.

Agregar un punto focal a una imagen

Si agregas un punto focal a una imagen y, luego, usas esa imagen en varias partes de la tienda online, entonces se aplica el mismo punto focal.

Dependiendo de la forma en que el tema recorta y cambia el tamaño de las imágenes, es posible que el punto focal no siempre esté centrado visualmente.

Pasos:

1. Haz clic en una imagen de cualquiera de los siguientes lugares en el panel de control de Shopify:

   • En la sección Contenido > Archivos
   • En el editor de temas
   • En la sección Multimedia de las publicaciones de producto en la sección Productos
   • En el editor de Shopify Email
   • En la sección Metacampos de cualquier recurso que tenga un metacampo de referencia de archivo para agregar una imagen.

2. Haz clic en la imagen o arrastra el punto azul para seleccionar la parte de la imagen en donde quieres establecer un punto focal.

3. Haz clic en Guardar.

Nota

Puedes mover un punto focal abriendo la imagen nuevamente y haciendo clic en un área diferente de la imagen para establecer un nuevo punto focal.

Eliminar el punto focal de una imagen

Pasos:

1. Haz clic en una imagen de cualquiera de los siguientes lugares en el panel de control de Shopify:

   • En la sección Contenido > Archivos
   • En el editor de temas
   • En la sección Multimedia de las publicaciones de producto en la sección Productos
   • En el editor de Shopify Email
   • En la sección Metacampos de cualquier recurso que tenga un metacampo de referencia de archivo para agregar una imagen.

2. Haz clic en Eliminar.

3. Haz clic en Guardar como nuevo.

Formatos de imagen

Los siguientes formatos de imagen son compatibles:

• JPEG
• JPEG progresivo
• PNG
• GIF
• HEIC
• WebP
• AVIF

Nota

Shopify detecta automáticamente qué formatos de imagen son compatibles con el navegador de tu cliente y luego muestra automáticamente la imagen en el mejor formato disponible. Obtén más información sobre las capacidades de transformación de las imágenes en Shopify.

Usar imágenes en formato JPEG

Las imágenes JPEG son ideales para fotografía y otras imágenes fijas con colores complejos. El formato JPEG tiene una paleta con millones de colores. También tiene compresión con pérdida, lo que puede ayudar a reducir los tiempos de carga de páginas sin pérdidas notables en la calidad de las imágenes. Usa este formato para los siguientes tipos de imágenes:

• productos
• Banners o presentaciones de diapositivas.
• Páginas y artículos del blog

Usar imágenes en formato PNG

Las imágenes PNG son ideales para gráficos e íconos con colores planos y sin gradientes. El formato PNG también es compatible con las transparencias en imágenes. Úsalo para los siguientes tipos de imágenes:

• logos
• iconos
• Bordes y adornos

Compresión automática de imágenes y selección de formato

Para agilizar el tiempo de carga de las páginas, Shopify comprime automáticamente las imágenes cuando se muestran en la tienda online. Cuando se comprime una imagen, se reduce el tamaño del archivo para que las páginas se carguen más rápido.

Además, Shopify determina automáticamente el mejor formato de archivo posible para entregar las imágenes. Por ejemplo, cuando detectemos que el navegador web de un cliente admite formatos de imagen modernos, como WebP y formato de archivo de imagen AV1 (AVIF), las imágenes se entregarán en esos formatos.

Para mejorar el rendimiento al reducir el tamaño del archivo, los GIF se convierten automáticamente al formato WebP animado.

Límites de subida de imágenes

Las cargas de imágenes a Shopify tienen restricciones en cuanto a megapíxeles y tamaño de archivo, que se mide en megabytes. Los megapíxeles se usan con el objetivo de indicar cuántos millones de píxeles componen una imagen, mientras que los megabytes se usan para indicar cuántos millones de bytes de memoria o espacio en disco ocupa una imagen.

Las imágenes cargadas en Shopify no pueden exceder ninguno de los siguientes límites:

• 20 megapíxeles
• 20 megabytes

Para encontrar el valor de los megapíxeles de la imagen, puedes hacer la siguiente ecuación:

(pixel width x pixel height)/1,000,000

Por ejemplo, una imagen con una resolución de 4.900 px por 6.930 px tiene 33,9 megapíxeles según la ecuación: (4900x6930)/1,000,000 = 33.9 MP.

Nota

Hay diferentes límites de tamaño de imagen y archivo para subir imágenes de productos.

Perfiles de color de la imagen

Cuando ves una imagen en la tienda online, los colores podrían mostrarse de forma diferente a los de la imagen original que subiste a Shopify. Esto suele suceder cuando una imagen tiene un perfil de color, que es un conjunto de datos almacenados en un archivo con extensión .ICC o .ICM.

Los perfiles de color normalmente están incrustados en las imágenes para ayudar a estandarizar la forma en que los colores se muestran en diferentes dispositivos. Cuando las imágenes se muestran en tu tienda online, sus perfiles de color se eliminan.

Los perfiles de color se eliminan por las siguientes razones:

• No todos los dispositivos pueden leer perfiles de color .ICC o .ICM, por lo que mantenerlos intactos puede provocar inconsistencias en los colores de las imágenes en distintos dispositivos.
• Cuando una imagen subida no tiene un perfil de color, el navegador web asume el perfil de color sRGB, que es el más común para mostrar imágenes en la web. Esto garantiza que se muestren las mismas imágenes en todos los navegadores web y dispositivos principales.
• Los perfiles de color pueden ocupar grandes cantidades de espacio en disco, lo que puede prolongar los tiempos de carga de las páginas.

Eliminar el perfil de color de una imagen

Puedes eliminar el perfil de color de tu imagen guardándola sin el perfil de color antes de subirla a Shopify. Este proceso varía según tu programa de edición de imágenes.

Ver la documentación de Adobe sobre cómo asignar o eliminar un perfil de color (Illustrator, Photoshop) y asignar o eliminar un perfil de color (InDesign).

Mejores prácticas para presentaciones de diapositivas, banners de imágenes e imágenes de ancho completo

Muchos temas de Shopify incluyen imágenes grandes o presentaciones de diapositivas que se adaptan al tamaño de tu pantalla o a la altura de tu navegador.

Si usas uno de estos temas o tienes una presentación de diapositivas o imagen de fondo de gran tamaño, debes saber qué tipos de imágenes se muestran mejor.

Debido a que las imágenes grandes no caben en todos los dispositivos, algunas veces Shopify muestra solo parte de la imagen dependiendo del dispositivo que estés usando. Si tu presentación de diapositivas contiene muchas imágenes grandes, es posible que algunas partes de las imágenes no sean visibles.

Consideraciones para usar imágenes en presentaciones de diapositivas o banners de imágenes

Para asegurarte de que las imágenes funcionen bien con el tema, considera lo siguiente:

• Las imágenes que usas para presentaciones de diapositivas o fondos no tienen que contener texto. Si el texto es parte de la imagen, puede moverse, recortarse o ajustarse según el tema. Usa el editor de temas para agregar texto y enlaces a las presentaciones de diapositivas y fondos.

• Para las imágenes que usas en presentaciones de diapositivas o como fondos, elige imágenes simples a fin de que cualquier texto superpuesto sea fácil de leer.

Imágenes anchas en pantallas altas

Es posible que las imágenes anchas se recorten a la izquierda y a la derecha si se utiliza un dispositivo con una pantalla alargada, como un teléfono móvil o tablet, en modo retrato para verlas. En el siguiente ejemplo, si las personas son la parte más importante de la imagen, puedes colocar un punto focal en el lado derecho de la imagen.

Imágenes altas en pantallas anchas

Es posible que las imágenes se recorten arriba y abajo si se utiliza un dispositivo de pantalla ancha, como una computadora portátil o un monitor de escritorio, para verlas. En el siguiente ejemplo, si el calzado es la parte más importante de la imagen, puedes colocar un punto focal en la parte inferior de la imagen.