Subir imágenes

Puedes usar diferentes tipos de imágenes en tu tienda en línea, incluido el logotipo de tu empresa, imágenes de productos, presentaciones de diapositivas, banners e imágenes de publicaciones en el blog. Dependiendo de cómo y dónde desees utilizar una imagen, podría ser mejor cargarla en un determinado tamaño o formato.

Formatos de imagen

Shopify admite los siguientes formatos de imagen:

  • JPEG o JPG
  • JPEG progresivo
  • PNG
  • GIF

Si cargas una imagen que no tiene un formato compatible, Shopify la convierte a JPEG o PNG. La mayoría de los formatos de imagen se convierten a JPEG y los archivos SVG se convierten a PNG.

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 tiene 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 entradas en el 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:

  • Logotipos
  • Iconos
  • Bordes y adornos

Tasas de compresión

Para agilizar el tiempo de carga, Shopify comprime 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. Con la compresión, se pueden almacenar más imágenes en un espacio determinado de disco o memoria. Además se reduce en gran medida el tiempo necesario para acceder a las imágenes. La compresión puede cambiar la calidad de la imagen, dependiendo del formato, el tamaño y la calidad original de la imagen.

Los niveles de calidad de imágenes de Shopify después de la compresión son los siguientes:

  • JPEG: entre 65 y 90
  • PNG: 90
  • GIF: sin cambios en la calidad

Para imágenes JPEG, el nivel de calidad de una imagen comprimida depende de la calidad de la imagen JPEG original y del tamaño de salida:

Calidad original Tamaño de salida Calidad de salida
86 o más Altura o ancho de 1024 px o más 85
65 - 85 Altura o ancho de 1024 px o más Calidad original
64 o menos Altura o ancho de 1024 px o más 65
76 o más Altura y ancho menos de 1024 px 75
65 - 75 Altura y ancho menos de 1024 px Calidad original
64 o menos Altura y ancho menos de 1024 px 65

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

Perfiles de color

Cuando ves una imagen en tu tienda online, los colores podrían verse diferentes a los de la imagen original que cargaste en 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 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 e imágenes de ancho completo

Muchos temas de Shopify incluyen imágenes grandes o presentaciones de diapositivas que se ajustan a la altura de tu navegador (Boundless y Brooklyn) o se adaptan al tamaño de tu pantalla (Venture).

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:

  • El "punto focal" de la imagen, o la parte que quieres que los clientes observen, debe estar en el centro. De esta forma, aunque tu tema no muestre los bordes de la imagen, la parte importante seguirá siendo visible.

  • 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):

alt

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):

alt

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis