Subir imágenes

Puedes usar distintos tipos de imágenes, como el logo de la empresa, imágenes de productos, presentaciones de diapositivas, banners e imágenes de artículos del blog. También puedes transformar las imágenes con acciones de recorte y cambio de tamaño, y customize your media settings in your theme para cambiar el borde o la sombra de toda la multimedia que se muestra en la tienda.

Para mostrar las imágenes en la tienda online exactamente como deseas, debes usar la image aspect ratio correcta. Las imágenes se optimizan automáticamente para la tienda online con el Shopify Content Delivery Network (CDN).

Subir una imagen en el editor de temas

Puedes agregar imágenes al tema desde el editor de temas. También puedes subir imágenes en la sección Contenido > Files del panel de control de Shopify. Para obtener más información, consulta Uploading and managing files.

Pasos:

Agregar imágenes con metacampos

Si tienes metafields configurados para las imágenes, puedes usar el dynamic source picker para agregar una imagen a la tienda online. Para obtener más información sobre metacampos y formatos de imagen compatibles, consulta Adding values to metafields.

Configurar 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 configuras un punto focal en una imagen, esa zona se convierte en el área de enfoque. Los puntos focales siempre se muestran dentro del encuadre, incluso si el tema recorta la imagen para ajustarla al diseño. Los puntos focales te dan más control sobre cómo se muestra la imagen en distintos tamaños de pantalla y cuando los temas usan diferentes aspect ratios.

Solo puedes tener un punto focal por imagen, pero puedes cambiarlo o quitarlo en cualquier momento.

Compatibilidad de los puntos focales con los temas gratuitos de Shopify

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

• Todos los temas de la familia Horizon
• Colorblock versión 3.0.0 o superior
• Craft versión 5.0.0 o superior
• Crave versión 5.0.0 o superior
• Dawn versión 7.0.0 o superior
• Origin versión 1.0.0 o superior
• Publisher versión 1.0.0 o superior
• Refresh versión 2.0.0 o superior
• Ride versión 3.0.0 o superior
• Rise versión 1.0.0 o superior
• Sense versión 5.0.0 o superior
• Spotlight versión 0.0.1 o superior
• Studio versión 4.0.0 o superior
• Taste versión 4.0.0 o superior
• Trade versión 1.0.0 o superior

Si usas un tema externo, consulta la theme's documentation para saber si el tema admite el uso de puntos focales.

Agregar un punto focal a una imagen

Si agregas un punto focal a una imagen y luego usas la imagen en varios lugares de la tienda online, se aplica el mismo punto focal en cualquier lugar donde la uses.

Según cómo el tema recorta y redimensiona las imágenes, es posible que el punto focal no siempre quede visualmente centrado.

Pasos:

1. Haz clic en una imagen en cualquiera de las siguientes ubicaciones del administrador de Shopify:
   • En la sección Contenido > Files.
   • En el theme editor.
   • En la sección Multimedia de las publicaciones de producto en la sección Products.
   • En el editor de correos de Shopify Messaging.
   • En la sección Metacampos de cualquier recurso que tenga un metacampo de tipo Referencia de archivo para agregar una imagen.
2. Para seleccionar la parte de la imagen donde quieres configurar el punto focal, haz clic en la imagen o arrastra el punto azul.
3. Haz clic en Guardar.

Quitar un punto focal de una imagen

Pasos:

1. Haz clic en una imagen en cualquiera de las siguientes ubicaciones del administrador de Shopify:
   • En la sección Contenido > Files.
   • En el theme editor.
   • En la sección Multimedia de las publicaciones de producto en la sección Products.
   • En el editor de correos de Shopify Messaging.
   • En la sección Metacampos de cualquier recurso que tenga un metacampo de tipo Referencia de archivo para agregar una imagen.
2. Haz clic en Quitar.
3. Haz clic en Guardar como nuevo.

Formatos de imagen

Se admiten los siguientes formatos de imagen:

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

Uso de imágenes JPEG

Las imágenes JPEG son ideales para fotografías y otras imágenes fijas con colores complejos. El formato JPEG tiene una paleta de millones de colores. JPEG también utiliza compresión con pérdida, lo que ayuda a mantener un tiempo de carga rápido sin una pérdida perceptible de calidad de imagen. Usa el formato JPEG para los siguientes tipos de imágenes:

• productos
• banners o presentaciones de diapositivas
• páginas y artículos del blog

Uso de imágenes PNG

Las imágenes PNG son ideales para gráficos e íconos con colores planos y sin degradados. El formato PNG también admite transparencia en las imágenes. Usa el formato PNG para los siguientes tipos de imágenes:

• logos
• íconos
• bordes y contornos

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

Las imágenes no se comprimen cuando las subes al panel de control de Shopify, lo que ayuda a mantener su calidad original. Sin embargo, para mantener tiempos de carga rápidos para los clientes, puede ocurrir lo siguiente:

• Cuando las imágenes se sirven a través del tema de la tienda, podrían someterse a una compresión de alta calidad
• Shopify determina automáticamente el mejor formato de archivo para la entrega de las imágenes
• Cuando el navegador web del cliente admite formatos de imagen modernos como WebP y AVIF (AV1 Image File Format), las imágenes se entregan en esos formatos
• Los GIF se convierten automáticamente al formato WebP animado para mejorar el rendimiento, ya que reduce el tamaño del archivo

Para obtener la mejor calidad de imagen, considera lo siguiente:

• Sube imágenes de mayor resolución de hasta 5.000 px x 5.000 px o 25 megapíxeles
• Elige tipos de imagen con menor pérdida, como PNG, para dibujos lineales, texto y gráficos tipo ícono con transparencia
• Usa JPEG para imágenes de producto o presentaciones de diapositivas
• Se admiten archivos SVG, pero tienen limitaciones: no se pueden transformar (redimensionar, recortar, etc.) sin solicitar un formato rasterizado (JPEG, WebP, PNG)

Se aceptan otros tipos de archivo como PSD (Photoshop Document), TIFF (Tagged Image File Format) y BMP (Bitmap), pero se convertirán a JPEG/PNG cuando se suben.

Límites para subir imágenes

Subir imágenes a Shopify tiene restricciones tanto en megapíxeles (MP) como en tamaño de archivo, que se mide en megabytes (MB). Los megapíxeles indican cuántos millones de píxeles componen una imagen. Los megabytes indican cuántos millones de bytes de memoria o espacio en disco ocupa una imagen.

Las imágenes que se suben a Shopify no pueden exceder ninguno de los siguientes límites:

• 20 megapíxeles
• 20 megabytes

Para calcular el valor de megapíxeles de una imagen, puedes usar la siguiente ecuación:

(ancho en píxeles x alto en píxeles)/1,000,000

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

Perfiles de color de imagen

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

A menudo, los perfiles de color se incrustan en las imágenes para estandarizar cómo se muestran los colores en distintos dispositivos. Cuando las imágenes se muestran en la tienda online, se eliminan sus perfiles de color.

Se eliminan los perfiles de color por los siguientes motivos:

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

Quitar el perfil de color de una imagen

Puedes quitar el perfil de color de una imagen si la guardas sin ese perfil antes de subirla a Shopify. Este proceso varía según el programa de edición de imágenes.

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

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

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

Si usas uno de estos temas o tienes una presentación o imagen de fondo grande, es importante saber qué tipos de imágenes se muestran mejor.

Como las imágenes grandes no caben en todos los dispositivos, Shopify a veces muestra solo una parte de la imagen según el dispositivo. Si una presentación contiene muchas imágenes grandes, es posible que algunas partes no sean visibles.

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

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

• Las imágenes que uses en presentaciones o fondos no deberían incluir texto. Si el texto forma parte de la propia imagen, podría moverse, recortarse o ajustarse según el tema. Usa el editor de temas para agregar texto y enlaces a las presentaciones y los fondos.

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

Imágenes anchas en pantallas altas

Las imágenes anchas pueden recortarse a la izquierda y a la derecha cuando el dispositivo con el que se ven tiene una pantalla alta, como un teléfono móvil o una tablet en orientación vertical. 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

Las imágenes altas pueden recortarse en la parte superior e inferior cuando el dispositivo con el que se ven tiene una pantalla ancha, como una laptop o un monitor de escritorio. En el siguiente ejemplo, si los zapatos son la parte más importante de la imagen, puedes colocar un punto focal en la parte inferior de la imagen.

Comportamiento de carga de imágenes

Cuando visitas una página de la tienda online, es posible que notes que las imágenes se ven ligeramente borrosas al principio y luego se vuelven nítidas tras un instante. Este comportamiento es esperado y ayuda a mejorar la velocidad de carga y la experiencia de usuario de la tienda.

Los temas de Shopify usan una técnica llamada carga diferida, que primero carga una versión más pequeña de la imagen, mientras la imagen en resolución completa se carga en segundo plano. Esto permite que los clientes revisen el contenido de inmediato en lugar de esperar a que las imágenes grandes se carguen por completo. Por lo general, el proceso se completa en menos de un segundo, pero crea la percepción de que la tienda carga más rápido.

Esta técnica es especialmente útil para las tiendas con muchas imágenes, ya que mejora significativamente los tiempos de carga iniciales y proporciona una indicación visual inmediata a los clientes.

Resolución de problemas con imágenes