Subir imágenes

Puedes usar diferentes tipos de imágenes en la tienda online, incluidos el logo de la empresa, imágenes de productos, presentaciones de diapositivas, banners e imágenes de artículos del blog. El servicio Imagery de Shopify gestiona las imágenes para garantizar que se muestre el mejor formato de imagen posible en el lugar adecuado en tu tienda online.

Subir imágenes

Hay dos lugares diferentes donde puedes subir imágenes para tu tienda online:

Subir imágenes a la página Archivos

Puedes subir imágenes a la página Archivos de tu panel de control de Shopify. Esto es útil porque puedes acceder a estas imágenes mientras estás editando tus temas. Para obtener más información, consulta Subir archivos a tu página web.

Subir imágenes al editor de temas

Puedes agregar imágenes a tu tema en el editor de temas.

Pasos:

  1. Usa el menú desplegable para seleccionar la plantilla que deseas editar.
  2. Desde la barra lateral del editor de temas, haz clic en la sección o el bloque donde deseas agregar una imagen.
  3. 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.
  4. 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.

  5. 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.

Formatos de imagen

Shopify admite los siguientes formatos de imagen:

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

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 detectamos que el navegador web de un comprador admite formatos de imagen modernos como WebP, Shopify entregará tu imagen en esos formatos.

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:

  • 20 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.

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:

  • Algunos temas tienen una configuración de posición de imagen que puedes utilizar para especificar qué parte de una imagen es el punto focal. Si tu tema no tiene esa configuración, asegúrate de que el punto focal de cada imagen esté en el centro. Cuando tus imágenes se recortan en algunas pantallas, el punto focal es visible, mientras que las áreas a su alrededor están ocultas.

  • 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

Quizá las imágenes se recorten a la izquierda y derecha cuando el dispositivo que se usa para verlas es de pantalla alta (como un teléfono móvil o tablet):

Imágenes anchas en pantallas altas

Imágenes altas en pantallas anchas

Quizá las imágenes se recorten arriba y abajo cuando el dispositivo que se usa para verlas es de pantalla ancha (como una laptop o PC):

Imágenes altas en pantallas anchas

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis