
Suscripción al boletín
Introduzca su dirección de correo electrónico y suscríbase a nuestro boletín.
Introduzca su dirección de correo electrónico y suscríbase a nuestro boletín.
Este artículo cubre la configuración y carga de imágenes de productos en Shopify. Después de la actualización del sistema, la sección para cargar imágenes de productos ha cambiado de nombre a “Medios”, lo que significa que ahora no solo puedes cargar imágenes de productos, sino también videos y modelos 3D, lo que ofrece más formas de mostrar los productos. Sin embargo, el objetivo final sigue siendo el mismo: convertir el tráfico en pedidos.
Shopify admite la mayoría de los formatos de archivos de imagen, siendo los recomendados PNG, JPEG y GIF. También se admiten otros formatos de imagen como PSD, TIFF, BMP, HEIC y WebP. Los siguientes son los formatos de imagen de productos recomendados por Shopify:
Las imágenes JPEG/JPG son adecuadas para mostrar imágenes estáticas relativamente ricas y complejas, como fotografías. Las imágenes JPEG/JPG tienen un color intenso y pueden mantener la calidad de la imagen al tiempo que garantizan el efecto de visualización, es decir, la compresión sin pérdida de imágenes. Esto garantiza tanto el efecto de visualización de la imagen como la velocidad de apertura del sitio web al reducir el tamaño del archivo. En el mismo tamaño de archivo, el color de las imágenes JPG es significativamente más brillante que el de las GIF y PNG.
Por ello, tanto Shopify como el autor de “10 consejos imprescindibles para optimizar las imágenes” consideran que las imágenes en formato JPG son la primera opción para las imágenes de productos en los sitios de comercio electrónico independientes. “El mejor tipo de archivo para las imágenes de productos es .jpg”. Las imágenes GIF deben evitarse en la medida de lo posible. Sin embargo, si es necesario, puedes crear algunas animaciones GIF para insertarlas en las descripciones de los productos y aumentar la tasa de conversión de pedidos, siempre que controles el tamaño de las imágenes GIF para garantizar un buen rendimiento del sitio web.
Por lo tanto, las imágenes JPEG/JPG son adecuadas para imágenes de productos, banners de sitios web, imágenes de carrusel, páginas de sitios web e imágenes de publicaciones de blogs.
Las imágenes PNG son el formato ideal para archivos de íconos gráficos y también admiten transparencia, lo que las hace adecuadas para imágenes como logotipos en sitios web y archivos de íconos sociales.
Imágenes en formato WebP Al crear imágenes de productos, no es necesario crear deliberadamente archivos en formato WebP para cargarlos en Shopify. El servicio de imágenes de Shopify mostrará automáticamente las imágenes en el mejor formato disponible según el navegador compatible con el cliente.
Por ejemplo, si abrimos cualquier página de un sitio web de Shopify usando el navegador Google Chrome, Shopify reemplazará automáticamente todas las imágenes en formato JPG de esa página con imágenes en formato “WebP”. Si visita la misma página usando un navegador que no admita el formato “WebP”, como el navegador IE, todas las imágenes de esa página seguirán estando en formato JPG. La razón por la que Shopify convierte automáticamente las imágenes al formato JPG o al formato WebP es que este tipo de archivos pueden lograr una optimización en términos de reproducción de color y tamaño de archivo, que es la velocidad de apertura. Todo el proceso lo realiza Shopify y no necesitamos hacer nada.
WebP es un formato de imagen desarrollado por Google para acelerar la carga de imágenes. El tamaño comprimido de la imagen es aproximadamente 2/3 del JPEG, lo que puede ahorrar mucho ancho de banda del servidor y espacio de datos. Puede reducir el tamaño de los recursos de carga de imágenes, ahorrar recursos de tráfico del usuario y reducir los recursos de tráfico del servidor. Debido a que es un servicio desarrollado por Google, su compatibilidad no es tan completa. Sin embargo, no debemos preocuparnos por esto, ya que Shopify decidirá automáticamente si mostrar imágenes en formato JPG o imágenes en formato Webp según el entorno del navegador del cliente.
Podemos intentar abrir la página de nuestro producto con el navegador Google Chrome y luego descargar una imagen. Por lo general, el formato predeterminado de archivo guardado es WebP, incluso si el formato de la imagen que cargamos es JPG o PNG.
No es necesario que el tamaño de la imagen sea cuadrado. Por ejemplo, las imágenes de productos en el sitio web de Fashion Nova son todas rectangulares con proporciones de aspecto uniformes. Este efecto de visualización puede ser mejor, especialmente para la ropa, ya que puede llenar toda la pantalla de un teléfono móvil. Cuando abre el enlace del producto, toda la pantalla muestra la imagen del producto, lo que crea un impacto visual mucho mejor.
Cuanto mayor sea el número de píxeles de la imagen de un producto, más clara se verá. Sin embargo, un mayor número de píxeles suele significar archivos de imagen más grandes, lo que puede ralentizar los tiempos de carga del sitio web. Por lo tanto, es necesario encontrar un equilibrio entre el número de píxeles y el tamaño del archivo.
Las imágenes cargadas en un sitio web de Shopify tienen limitaciones tanto en las dimensiones en píxeles como en el tamaño de los archivos. Cualquier archivo que supere los siguientes límites mostrará un error al cargarlo:
Para lograr Fotos de alta calidad, es posible que necesitemos utilizar herramientas de edición de imágenes para optimizarlas y redimensionarlas para la web. Las imágenes más grandes pueden hacer que la página se cargue más lentamente. El tamaño ideal de la imagen no debe superar los 200 KB, y cuanto más pequeñas, mejor.
Al comprimir imágenes, tenga cuidado de no comprimirlas excesivamente, ya que esto puede provocar la aparición de manchas.
Es posible que hayas oído que si un sitio web no se abre en 3 segundos en una computadora de escritorio, muchas personas optarán por abandonarlo; en los dispositivos móviles, este tiempo aumenta a 5 segundos. Según un estudio de datos de Amazon, si su sitio web se carga 1 segundo más lento, pierde aproximadamente 1.600 millones de dólares en ventas al año. En el algoritmo de clasificación de Google, la velocidad de carga del sitio web también es uno de los factores importantes para lograr una clasificación más alta.
Por lo tanto, si tu sitio web se carga lentamente, la mayoría de las personas optarán por cerrar la página antes de que termine de cargarse, lo que significa que no habrá conversión a pedidos. Aunque Shopify utiliza varias tecnologías de aceleración de páginas web, como la tecnología CDN y la tecnología de compresión de imágenes, si tu sitio web necesita cargar muchos archivos grandes, como las imágenes de banner de tamaño 2 MB y las imágenes de productos grandes que se usan comúnmente, estos seguirán siendo factores importantes que afecten la velocidad de carga del sitio web.
Por lo tanto, se recomienda controlar el tamaño de los archivos de imagen y garantizar la calidad de la imagen. Existen muchas herramientas para este propósito, como Tinypng. A continuación, se muestran algunas herramientas de compresión recomendadas que puede probar:
Para acelerar la carga de un sitio web, reducir los tiempos de carga de las páginas y almacenar más imágenes en una cantidad específica de discos, Shopify comprime las imágenes que cumplen con requisitos específicos en condiciones específicas. La compresión de imágenes puede generar cambios en la calidad de la imagen. La resolución de la imagen comprimida está relacionada con la resolución de la imagen que cargó y el tamaño de la imagen. Por lo general, la resolución de la imagen comprimida después de la compresión es la siguiente:
La resolución específica de la imagen se puede ver y ajustar usando PS (atajo Ctrl+Alt+I). Como se muestra en la figura siguiente, la resolución “72” en la figura es el valor de DPI de la imagen.
Requisitos de imágenes de productos de la tienda Shopify y optimización de imágenes
En el caso de los archivos en formato JPEG, Shopify decidirá si comprimir la imagen en función de la resolución de la imagen original. Por ejemplo, si la resolución de la imagen que subimos es mayor a 86 y cualquiera de los lados de la imagen es mayor o igual a 1024 píxeles, Shopify comprimirá la imagen y la resolución de la imagen comprimida será 85.
Si la resolución de la imagen antes de cargarla está entre 65 y 85, y alguno de los lados de la imagen es mayor o igual a 1024 px, entonces Shopify no procesará la imagen de ninguna manera y Shopify usará la imagen original que usted cargó.
Resolución original | Tamaño de la imagen | Resolución comprimida |
---|---|---|
86 o superior | Ancho o alto de la imagen >= 1024px | 85 |
65 – 85 | Ancho o alto de la imagen >= 1024px | Calidad original |
64 o menos | Ancho o alto de la imagen >= 1024px | 65 |
76 o superior | Ancho y alto de la imagen < 1024px | 75 |
65 – 75 | Ancho y alto de la imagen < 1024px | Calidad original |
64 o menos | Ancho y alto de la imagen < 1024px | 65 |
En cuanto a cómo hacer buenas fotografías de productos, debido a que el contenido involucrado es demasiado profesional, actualmente no tengo la capacidad de explicarlo en profundidad. Sin embargo, hacer buenas fotografías de productos tiene un impacto muy positivo e importante en nosotros para administrar sitios web independientes y aumentar las tasas de conversión de sitios web. Se recomienda que todos pregunten más a Google. Hay un dicho: en el comercio electrónico, lo que realmente se vende son imágenes. Pero lo que sé es que para los sitios web independientes, no es necesario cumplir con los requisitos de Amazon para las imágenes de productos. La imagen principal no debe ser una imagen de fondo blanco, sino una imagen de escena del producto.
Editor de fotos iFoto es una herramienta de edición de imágenes de vanguardia que aprovecha la tecnología avanzada de inteligencia artificial para mejorar la resolución de las imágenes de manera eficiente, lo que garantiza resultados de alta calidad tanto para uso comercial como personal. Ofrece una variedad de funciones prácticas, como eliminación de fondo, mejora de fotografías, limpieza de imágenes y ajuste de color, lo que la hace ideal para mejorar las imágenes de productos para las tiendas Shopify. Con iFoto Photo Editor, actualizar las páginas de información de productos se vuelve sencillo, lo que genera una mayor participación del cliente, mejores tasas de clics (CTR) y clasificaciones más altas en Shopify.
Además de sus funciones centradas en Shopify, iFoto Photo Editor está disponible como plataforma web y como aplicaciones para iOS/Android, lo que proporciona una experiencia de edición de imágenes perfecta para los usuarios en diversas situaciones. iFoto Photo Editor, conocida como una de las mejores herramientas de edición de imágenes con tecnología de inteligencia artificial disponibles, se ha ganado una reputación estelar y cuenta con una gran base de usuarios leales en todo el mundo.
Características principales:
Como ejemplo extremo, como se muestra en la imagen siguiente, para la luz de bicicleta Revolights, la imagen de la izquierda es una imagen del producto y la imagen de la derecha es una imagen de una escena de su uso. ¿Qué imagen nos resulta más atractiva?
Creación de nombres de archivos descriptivos y ricos en palabras clave. Los motores de búsqueda no solo rastrean el texto de su página web, sino que también buscan palabras clave en los nombres de los archivos de imágenes.
Por lo general, después de tomar fotografías con una cámara o un teléfono, las importamos a la computadora y el nombre del archivo de la fotografía será una cadena de caracteres alfanuméricos más la extensión del archivo, como DCMIMAGE10.jpg. El primer paso para optimizar la imagen del producto antes de subirla a Shopify es cambiar el nombre del archivo de la imagen en la computadora. Por ejemplo, cámbielo a: 2012-Ford-Mustang-LX-Red.jpg.
¿Por qué? Como se mencionó anteriormente, los motores de búsqueda no solo rastrean el texto de su página web, sino que también buscan palabras clave dentro de los nombres de los archivos de imagen. Si la imagen se llama DCMIMAGE10.jpg de manera predeterminada, el motor de búsqueda no puede saber qué contenido contiene esta imagen. Si se llama 2012-Ford-Mustang-LX-Red.jpg, el motor de búsqueda indexará las palabras clave en el nombre de la imagen.
Entonces, ¿cuál de estos tres nombres es mejor: Ford Mustang LX rojo 2012; Ford Mustang LX rojo 2012; Ford Mustang LX rojo 2012? En mi opinión, son lo mismo, pero el autor del artículo sugiere que puede ver qué método de clasificación de palabras clave están utilizando los visitantes según los datos del análisis del sitio web y luego cambiar el nombre y volver a cargar la imagen. La coincidencia exacta de las búsquedas de los clientes es, por supuesto, mejor, pero creo que siempre que la imagen del producto se pueda describir con precisión y el orden de las palabras sea lógico, es suficiente.
De hecho, no solo para Shopify, sino que cualquier imagen debería cambiar de nombre de esta manera antes de cargarla, y esto debería convertirse en un hábito.
Tips: When naming images, use “-” instead of spaces between words, otherwise, spaces will be replaced by “%20” after the image is uploaded to the server. For example, “2012 Ford Mustang LX Red.jpg” will become “2012%20Ford%20Mustang%20LX%20Red.jpg”.
Además, si tienes muchas imágenes para modificar, puedes intentar usar una herramienta de cambio de nombre de archivos por lotes para hacerlo.
ALT es la abreviatura de la palabra inglesa “Alternate”, que significa intercambio o reemplazo. El atributo ALT de una imagen es un atributo necesario de la imagen. Se utiliza para reemplazar la imagen que se mostrará en el navegador cuando la imagen no se puede mostrar o el usuario deshabilita la visualización de la imagen. Supongamos que la imagen no se puede ver debido a las siguientes razones:
Al agregar una imagen, el valor del atributo ALT de la imagen se define como “Tulipán”. Cuando los usuarios abren el navegador para navegar, la imagen normal que se muestra es la de un tulipán. Si la imagen no se puede abrir debido a problemas de velocidad de la red, el contenido que se muestra en la posición de la imagen es: tulipán.
En este momento, los usuarios saben que aquí hay una imagen de tulipanes, pero cómo se ve específicamente la imagen solo se puede imaginar.
Además de ayudar a los usuarios a comprender el contenido de la imagen cuando esta no se puede abrir, otra función importante de ALT es ayudar a los motores de búsqueda a comprender mejor el contenido de la imagen. Las palabras clave en ALT pueden ayudar a los motores de búsqueda a comprender el contenido de la imagen, de modo que su imagen pueda tener una mejor clasificación en los motores de búsqueda, especialmente en los motores de búsqueda de imágenes como Google Image. Por lo tanto, cuando hablamos de optimización SEO de imágenes, lo que debemos hacer es agregar etiquetas Alt a cada imagen de producto.
Actualmente, una tendencia popular en la visualización de imágenes de productos es tomar algunas fotografías detalladas del producto desde diferentes ángulos. Por lo tanto, al completar el atributo Alt de la imagen, intente completar una etiqueta Alt diferente para cada imagen. Por ejemplo, para la imagen 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg, use la etiqueta Alt: alt = “2012 Ford Mustang LX Red Leather Interior Trim”. Para otra imagen 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg, use la etiqueta Alt: alt = “2012 Ford Mustang LX Red Rear View Air Spoiler”.
Como se muestra en la figura a continuación, haga clic en la imagen cargada y, en la ventana emergente, podemos agregar "texto alternativo" para la imagen del producto. En el proceso de configuración de ALT, al igual que cuando se configura el título y la descripción del sitio web de Shopify, haga un buen trabajo de minería de palabras clave de cola larga y diseño para obtener tráfico más preciso. Actualmente, el sistema de Shopify en sí no admite la adición o edición en lotes en línea de contenido ALT, y solo se puede agregar o editar uno por uno abriendo cada imagen, lo que sigue siendo bastante engorroso. Podemos usar una tabla para agregar ALT en lotes, o buscar un complemento adecuado buscando "ALT" en el mercado de aplicaciones para agregar o editar ALT en lotes.
A continuación se muestran varias sugerencias del sitio web oficial de Google para optimizar las imágenes para lograr mejores clasificaciones (extraídas de algunas de las sugerencias que personalmente creo que son más importantes). La versión completa del texto original se puede encontrar en support.google.com/webmasters/answer/114016.
Para aumentar la visibilidad de tu contenido en Google Imágenes, prioriza la experiencia de usuario: al diseñar páginas web, céntrate en los usuarios y no en los motores de búsqueda. A continuación, te ofrecemos algunas sugerencias:
En la sección de archivos multimedia, la primera imagen grande que se muestra es la imagen principal del producto. Al llamar y mostrar esta información del producto en páginas de productos no variantes, la página de inicio, páginas de lista de productos, etc., la imagen que se muestra de forma predeterminada es esta imagen grande. Podemos arrastrar manualmente la imagen que queremos establecer como imagen principal del producto a la posición de imagen grande para reemplazar la imagen principal.
Al mismo tiempo, también podemos ajustar la posición de la imagen aquí para modificar el orden de visualización de varias imágenes en la interfaz de la página del producto.
Podemos subir videos directamente al backend de Shopify o subir videos a YouTube o Vimeo primero, y luego agregar los videos al backend de Shopify de manera integrada. Hice una prueba simple, que consiste en subir un video de aproximadamente 15 MB de tamaño a Shopify y YouTube respectivamente, y luego probar la velocidad de apertura de las dos páginas usando Webpagetest y PageSpeedInsight sin cambiar la fuente del video. La conclusión es que básicamente no hay diferencia.
Aunque el video que subimos tiene un tamaño de 15 MB, cuando los clientes abren la página, solo se carga la miniatura del video, no el archivo de video completo. Solo cuando el cliente hace clic en el botón de reproducción, el sistema comienza a cargar y reproducir el video.
Para subir un vídeo a Shopify, el vídeo debe cumplir los siguientes requisitos:
En cuanto a la resolución del vídeo, se puede elegir entre 480P, 720P, 1080P o 4K. Cuanto mayor sea la resolución del vídeo, mayor será el tamaño del archivo. Sin embargo, cuando los clientes vean el vídeo, si el cliente admite el ajuste de la resolución, el sistema decidirá automáticamente qué resolución reproducir en función de la velocidad de la red del cliente. Por ejemplo, si subimos un vídeo de 1080P, los clientes con velocidades de red lentas pueden reproducir automáticamente un vídeo de 480P, mientras que aquellos con velocidades de red rápidas pueden reproducir automáticamente un vídeo de 1080P.
Si subimos el vídeo a YouTube o Vimeo, no existen tales restricciones, pero el vídeo que subamos debe cumplir con las normas de YouTube o Vimeo.
De manera similar a la modificación del contenido de la etiqueta ALT de las imágenes de productos, haga clic en el video en la página de edición del producto, haga clic en el botón de opciones en el lado derecho del botón de descarga en la ventana emergente de edición de video y luego haga clic en el botón "Reemplazar miniatura" para cargar su propia miniatura de video. Tenga en cuenta que también debe controlar el tamaño de la miniatura. Si bien garantiza la claridad de la imagen, intente mantenerla por debajo de los 200 KB, cuanto más pequeña, mejor. Un archivo demasiado grande afectará la velocidad de carga de la página del sitio web.
Si inserta un video en los productos de Shopify mediante la función de incrustación, actualmente solo se admiten enlaces de YouTube o Vimeo. Si comparamos los dos, las recomendaciones de videos relacionados de YouTube atraerán a los usuarios para que abandonen nuestro sitio web, por lo que Vimeo nos brinda una mejor experiencia.
La versión gratuita de Vimeo tiene compatibilidad limitada con videos y configuraciones de estilo de reproducción limitadas. Si las condiciones lo permiten, considere usar la versión paga.
En comparación con las imágenes y los videos, los modelos 3D de productos pueden mostrar a los clientes más información y detalles del producto. Shopify admite los tipos de archivos de modelos 3D GLB y USDZ, con tamaños de archivo que no superan los 500 MB. Si el archivo del modelo 3D es más grande que 15 MB, Shopify optimizará la estructura y la textura del modelo para empaquetar el archivo 3D en menos tiempo.
Descargué un archivo GLB de 5 MB en línea (sketchfab.com). Revisé el flujo de carga de la página en cascada en WebPageSpeed y, como en el video, la página solo cargó una miniatura del modelo 3D generado automáticamente por el sistema, por lo que, aunque el archivo GLB es grande, no tiene un impacto particularmente grande en la velocidad de apertura de la página web. Solo cuando los clientes hacen clic en el botón de exploración del modelo, el sistema comienza a descargar y cargar este archivo de 5 MB en la página.
Además de poder reemplazar libremente las miniaturas como si fueran vídeos, también podemos ajustar el brillo, el color de fondo, la perspectiva predeterminada y el entorno de iluminación del modelo 3D a través del botón “Editar archivo”. La función es bastante potente.
El costo de hacer modelos 3D no es barato, pero si se trata de un solo producto o la cantidad de productos vendidos en todo el sitio web no es grande, puede considerar hacer modelos 3D para los productos principales o todos los productos para mostrar de manera más completa los detalles y ventajas del producto y mejorar la tasa de conversión de pedidos.
Aún no he utilizado modelos 3D. Los interesados pueden acudir al mercado de Shopify Experts o a Fiverr para buscar proveedores de servicios para obtener un presupuesto y ver aproximadamente cuánto cuesta hacer modelos 3D de sus productos. Si está dentro del presupuesto, vale la pena invertir.