Subir imágenes

Puedes usar diferentes tipos de imágenes, como el logo de tu empresa, imágenes de productos, presentaciones de diapositivas, banners e imágenes de artículos del blog. También puedes transformar tus imágenes con acciones de recorte y ajuste de tamaño. Además, puedes la configuración de los elementos multimedia en tu tema para cambiar el borde o la sombra en todos los elementos multimedia que se muestran en tu tienda.

Para mostrar las imágenes en tu tienda online exactamente como deseas, debes usar la relación de aspecto de la imagen correcta.

Nota

No es necesario comprimir las imágenes manualmente antes de subirlas. Sube siempre las imágenes en la mejor calidad que puedas proporcionar.

Subir una imagen al editor de temas

Puedes agregar imágenes al tema en el editor de temas. También puedes subir imágenes a la página Archivos del panel de control de Shopify. Para obtener más información, consulta Subir archivos al sitio web.

Pasos:

1. Desde el Panel de control de Shopify, ve a Tienda online > Temas.
2. Haz clic en Personalizar junto al tema que deseas personalizar.
3. Usa el menú desplegable para seleccionar la plantilla que deseas editar.
4. Desde la barra lateral del editor de temas, haz clic en la sección o el bloque donde deseas agregar una imagen.

5. Haz clic en Seleccionar imagen y luego realiza una de las siguientes acciones:

   • Para cargar una imagen desde tu computadora, haz clic en Subir.
   • Para usar una imagen de archivo gratuita de Burst, haz clic en Explorar imágenes gratuitas.

6. Para obtener una vista previa de la imagen de tu tema, haz clic en una imagen. Una vez que encuentras la imagen que deseas usar, haz clic en Seleccionar.

7. Haz clic en Guardar.

Agregar una imagen usando metacampos

Si tienes metacampos configurados para tus imágenes, puedes usar el selector de fuente dinámica para agregar una imagen. Para obtener más información sobre metacampos y formatos de imagen compatibles, consulta Tipos y valores de contenido de metacampos.

Banners de imagen

Puedes crear banners de imágenes con los siguientes elementos:

• Una o dos imágenes
• texto
• Un botón de acción

En computadoras de escritorio, las imágenes de los banners se muestran una al lado de la otra. Debido a que este formato no es adecuado para dispositivos móviles, puedes seleccionar la opción Apilar imágenes en móviles en la configuración del tema para el banner de imagen a fin de apilar las imágenes de los banners. Para obtener más información sobre banners de imagen y presentaciones de diapositivas, consulta las Mejores prácticas para presentaciones de diapositivas y banners de imágenes.

Definir un punto focal en una imagen de tema

Puedes usar puntos focales para definir la parte más importante de una imagen en el tema de la tienda online. Cuando configuras un punto focal en una imagen, este se convierte en el área de foco. Los puntos focales siempre aparecen dentro del marco, incluso si tienes un tema que recorta la imagen para que se ajuste al diseño. 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.

La configuración de puntos focales está disponible en las siguientes versiones de temas gratis de Shopify:

• Versión de Craft 5.0.0 o superior
• Versión de Crave 5.0.0 o superior
• Versión 3.0.0 o posterior de Colorblock
• Versión 7.0.0 o posterior de Dawn
• Versión 2.0.0 o posterior de Refresh
• Versión 3.0.0 o posterior de Ride
• Versión 5.0.0 o posterior de Sense
• Versión 4.0.0 o posterior de Studio
• Versión 4.0.0 o posterior de Taste

Si vas a usar un tema externo, comprueba la documentación correspondiente para ver si admite el uso de puntos focales.

Agregar un punto focal a una imagen

Puedes agregar un punto focal a una imagen desde la sección Archivos y desde el editor de temas. Si agregas un punto focal en una imagen y luego usas la imagen en varios lugares, todas usarán el mismo punto focal.

Solo puedes agregar un punto focal a las imágenes del tema. No puedes agregar un punto focal a las imágenes de productos, blogs o colecciones.

Escritorio

Pasos:

1. Desde el editor de temas, haz clic en una sección o bloque que tenga una imagen.
2. Haz clic en Editar en la imagen.
3. Haz clic en Agregar punto focal.
4. Haz clic en el círculo azul y arrástralo, o haz clic en la parte más importante de la imagen para definir el punto focal.
5. Haz clic en Listo.

iPhone

Pasos:

1. En el editor de temas, toca una sección o bloque que contenga una imagen.
2. Toca Editar en la imagen.
3. Toca Agregar punto focal.
4. Toca la parte más importante de la imagen para definir el punto focal.
5. Toca el botón Listo.

Android

Pasos:

1. En el editor de temas, toca una sección o bloque que contenga una imagen.
2. Toca Editar en la imagen.
3. Toca Agregar punto focal.
4. Toca la parte más importante de la imagen para definir el punto focal.
5. Toca el botón Listo.

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 punto focal

Escritorio

Pasos:

1. Desde el editor de temas, haz clic en una sección o bloque que tenga una imagen.
2. Toca Editar en la imagen.
3. Haz clic en Eliminar punto focal.
4. Haz clic en Listo.

iPhone

Pasos:

1. En el editor de temas, toca una sección o bloque que contenga una imagen.
2. Toca Editar en la imagen.
3. Toca Eliminar punto focal.
4. Toca el botón Listo.

Android

Pasos:

1. En el editor de temas, toca una sección o bloque que contenga una imagen.
2. Toca Editar en la imagen.
3. Toca Eliminar punto focal.
4. Toca el botón Listo.

Nota

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.

Formatos de imagen

Shopify admite los siguientes formatos de imagen:

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

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.

Cuándo usar imágenes 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. JPEG también emplea un algoritmo de compresión con pérdida, lo que puede ayudar a reducir tiempos de carga de páginas sin pérdidas notables en la calidad de las imágenes.

Usa el formato JPEG para los siguientes tipos de imágenes:

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

Cuándo usar imágenes PNG

Las imágenes PNG son ideales para gráficos e iconos con colores planos y sin gradientes. El formato PNG también es compatible con transparencias.

Usa el formato PNG 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, Shopify comprime automáticamente las imágenes cuando se muestran en tu tienda online. Comprimir una imagen significa reducir su tamaño de 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), Shopify entregará tu imagen 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 carga

Las cargas de imágenes a Shopify tienen restricciones en cuanto a megapíxeles y tamaño de archivo (medido en megabytes). Los megapíxeles se usan para indicar cuántos millones de píxeles componen una imagen. 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:

• 25 megapíxeles
• 20 megabytes

Para hallar los megapíxeles de tu imagen, puedes usar la ecuación siguiente: (pixel width x pixel height)/1,000,000. Por ejemplo, una imagen con una resolución de 4900 × 6930 sería de 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

Cuando ves una imagen en tu tienda online, los colores podrían verse diferentes a los de la imagen original que subiste a Shopify. Esto puede ocurrir 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 aparecen 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 varias 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 cargada no tiene un perfil de color, el navegador web asume el perfil de color sRGB (el más común para mostrar imágenes en la web). Esto garantiza que tus imágenes se vean iguales en todos los principales navegadores web y dispositivos.
• Los perfiles de color pueden ocupar grandes cantidades de espacio en disco, lo que puede alargar los tiempos de carga.

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.

Eliminar un perfil de color con Adobe Illustrator o Adobe Photoshop

Para eliminar un perfil de color con Adobe Illustrator o Adobe Photoshop:

1. Haz clic en Editar> Asignar perfil.

2. Selecciona No gestionar el color de este documento.

3. Haz clic en Aceptar.

Eliminar un perfil de color con Adobe InDesign

Para eliminar un perfil de color con Adobe InDesign:

1. Haz clic en Editar> Asignar perfil.

2. Para el perfil RGB y el perfil CMYK, selecciona Descartar (Usar espacio de trabajo actual).

3. Haz clic en Aceptar.

Para obtener información más detallada, puedes ver la documentación de Adobe sobre perfiles de color.

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, es importante entender qué tipos de imágenes se verán 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.

Recomendaciones

Para asegurarte de que tus imágenes se vean bien en tu tema, a continuación hay algunos consejos que debes tener en cuenta:

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

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

Imágenes anchas en pantallas altas

Es posible que las imágenes se recorten a la izquierda y a la derecha si para verlas se usa un dispositivo de pantalla alta (como un teléfono móvil o tablet). 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 para verlas se usa un dispositivo de pantalla ancha (como una computadora portátil o de escritorio). En el siguiente ejemplo, si los zapatos son la parte más importante de la imagen, puedes colocar el punto focal en la parte inferior de la imagen para evitar que se recorte: