Cómo optimizar imágenes en TikTok Shop: Resolviendo el problema con Magento

Algunos vendedores de Adobe Commerce pueden encontrarse con el problema de las imágenes de producto de gran tamaño al aventurarse en TikTok Shop. Este problema surge porque TikTok Shop tiene reglas estrictas con respecto a la resolución de la imagen, el tamaño y tipo de archivo, y la cantidad de imágenes que se pueden cargar. Esto puede dificultar la publicación de productos sin problemas.

Sin embargo, utilizando la compresión de imágenes, los vendedores pueden cumplir los requisitos de la TikTok Shop y mejorar el rendimiento de sus sitios web Magento.

Restricciones de imagen en la TikTok Shop

Estos son los principales requisitos técnicos que deben cumplir todas las imágenes de los listados de productos de la TikTok Shop:

• Los vendedores pueden cargar hasta 9 imágenes cuadradas y hasta 3 imágenes para variantes.

• Actualmente, TikTok Shop sólo acepta tipos de archivo JPEG, PNG o JPG.

Las imágenes de productos en formato HEIC o WEBP se convierten ahora automáticamente a JPG. Si el tamaño del archivo cumple las restricciones, aparecerán en la Tienda TikTok. Los archivos HEIC se refieren generalmente a fotos tomadas con teléfonos inteligentes (por ejemplo, teléfonos inteligentes iPhone y Android). Los archivos WEBP se utilizan en el desarrollo web y también pueden ser relevantes para los usuarios de Shopify.

Si tus imágenes son de otro tipo de archivo, tendrás que convertirlas para que TikTok Shop las acepte.

• El tamaño máximo del archivo es de 5MB.

• La resolución mínima de las imágenes es de 100×100 píxeles (según otras fuentes – 800×800), y la máxima es de 20000х20000 píxeles.

• El producto no debe estar a la sombra.

• Las imágenes deben ser en color.

• Las imágenes deben ser de alta calidad (no borrosas ni pixeladas).

• Cada imagen debe mostrar el producto desde distintos ángulos.

Si al menos uno de estos requisitos no se cumple, puede recibir una notificación de error según su naturaleza.

Cuando subas imágenes de tus productos a TikTok Shop, asegúrate de que las imágenes no contengan enlaces a sitios web externos. TikTok Shop considera que este tipo de contenido no es seguro y puede desactivar su anuncio en la plataforma.

Configurar la compresión de imágenes a través de Magento

TikTok Shop ofrece información exhaustiva sobre los requisitos de imagen. Esto no es sorprendente porque la imagen «vende» sus productos. Los resultados de compra dependen también del éxito de la publicación de la imagen del producto.

TikTok Shop permite a los vendedores publicar productos con imágenes de alta calidad de hasta 5 MB. Es bastante, ya que el tamaño medio de una foto estándar tomada con un teléfono es de 1-3 MB sin comprimir. Los vendedores pueden hacer una foto de un producto con su teléfono y añadirla a su anuncio. Pero la tecnología mejora constantemente y ahora, incluso con el iPhone 12 o los nuevos modelos en Android, los usuarios pueden obtener fotos RAW de alta resolución. Estas fotos pueden ocupar incluso hasta 70 MB. Por lo tanto, merece la pena tenerlo en cuenta a la hora de subir fotos RAW directamente desde tu teléfono o cámara profesional (si has encargado una sesión de fotos a un fotógrafo).

¿Entonces, qué hacer si el tamaño de tu imagen excede las limitaciones de la TikTok Shop?

Sabiendo que la optimización de las imágenes de los productos es primordial para que los vendedores de Adobe Commerce ofrezcan una experiencia de compra fluida a los clientes, Magento ofrece sólidas capacidades de compresión de imágenes de productos. Utilizando la funcionalidad de compresión de imágenes de Magento, puedes gestionar y optimizar eficazmente tus ofertas digitales, asegurándote de que sus imágenes también cumplen los requisitos de las diferentes plataformas de comercio electrónico.

Cómo activar el cambio de tamaño de las imágenes

• Para las imágenes existentes:

1. Ir a Stores > Settings > Configuration en la barra lateral de administración.
2. En el menú de la izquierda, haga clic en Advanced y, a continuación, seleccione System.
3. Busque la sección Configuración de carga de imágenes en el selector Expansión. Desmarque la casilla Use system value si desea cambiar la configuración predeterminada.

4. Para activarlo, asegúrese de que la opción Enable Frontend Resize está establecida en Yes.
5. Elija un ajuste de Quality (Calidad) entre 1 y 100%. Se recomienda un 80-90% para conseguir un buen equilibrio entre tamaño de archivo y calidad.
6. Establezca la anchura máxima (Maximum Width) de la imagen en píxeles. Esta será la anchura máxima cuando se redimensione la imagen, manteniendo las proporciones.
7. Determina la altura máxima (Maximum Height) de la imagen en píxeles. De forma similar a la anchura, determina la altura máxima cuando se redimensiona la imagen.
8. Una vez hecho esto, haga clic en Save Config para guardar los cambios.

Puede leer más sobre la descripción de los campos aquí.

• Para imágenes nuevas (al cargar imágenes nuevas):

Veamos también las opciones de compresión de imágenes para los nuevos productos que se acaban de añadir antes de que pasen a formar parte del catálogo. Redimensionar las imágenes antes del lanzamiento de los productos puede ser crucial para su tienda. De lo contrario, su sitio web tendrá que cambiar el tamaño de las imágenes cada vez que se cargue una página. Este trabajo extra puede ralentizar su sitio y poner a prueba su servidor.

1. El camino lento

Utilice el comando CLI predeterminado para cambiar el tamaño de todas las imágenes:

bin/magento catalog:image:resize

Las desventajas de este método incluyen:

— El proceso de cambio de tamaño sólo puede manejar una imagen a la vez.

— Redimensiona imágenes que ya han sido redimensionadas anteriormente.

— Una vez iniciado, el proceso tiene que terminar sin interrupciones, y puede tardar días en completarse.

2. La forma más rápida

El cambio de tamaño de imagen asíncrono se introdujo en Adobe Commerce 2.4 y permite cambiar el tamaño de las imágenes más rápidamente:

1. En cada servidor web, inicie temporalmente algunos gestores de colas adicionales (el doble del número de procesadores físicos por servidor):

for i in {1.."$((2 * `nproc --all`))"};do bin/magento queue:consumers:start media.storage.catalog.image.resize &;done;

2. Compruebe que los gestores de colas están en funcionamiento:

pgrep -fl media.storage.catalog.image.resize

3. Llenar la cola con todas las solicitudes de redimensionamiento de imágenes:

bin/magento catalog:images:resize --async

4. Una vez redimensionadas todas las imágenes, finalice el proceso:

pkill -f media.storage.catalog.image.resize

3. El camino rápido

Esta forma de cambiar el tamaño de las imágenes necesita el frontend.

Las ventajas de este método son las siguientes:

— El proceso de cambio de tamaño puede manejar varias imágenes simultáneamente.

— Puede funcionar en varios servidores, especialmente si dispone de varios nodos web, un equilibrador de carga y espacio de disco compartido para el directorio/medio.

— El proceso evita redimensionar imágenes que ya han sido redimensionadas anteriormente.

Este método le permite redimensionar 100,000 imágenes en menos de 8 horas, mientras que utilizando el comando CLI tardaría unos 6 días:

1. Conéctese a su servidor.

2. Vaya a la carpeta púb / medios / catálogo / producto y tome nota de uno de los valores hash (por ejemplo, 0047d83143a5a3a4683afdf1116df680).

3. En los ejemplos siguientes, sustituye www.example.com por el dominio de tu tienda y sustituye el hash por el que anotaste antes.

cd pub/
find ./media/catalog/product -path ./media/catalog/product/cache -prune -o -type f -print | sed s~./media/catalog/product/~https://www.example.com/media/catalog/product/cache/0047d83143a5a3a4683afdf1116df680/~g' > images.txt

El resultado proporciona una lista de todas las imágenes de productos de la tienda. Puedes utilizar una herramienta como «siege» o cualquier otro crawler para recorrer estas imágenes, utilizando todos los servidores y núcleos de procesador que tengas. De esta manera, puede crear la caché de redimensionamiento mucho más rápido en comparación con otros métodos.

Cuando visitas una URL de caché de imagen específica, genera automáticamente todos los tamaños diferentes de esa imagen en segundo plano si aún no se han creado. Además, omite los archivos que ya han sido redimensionados, lo que ahorra tiempo de procesamiento.

Servicios de optimización de imágenes en línea

A continuación, exploraremos algunas de las herramientas en línea más prácticas que pueden ayudarte a mejorar y optimizar tus imágenes sin esfuerzo:

1. TinyPNG es un servicio en línea que ayuda a reducir el tamaño de los archivos de imagen sin sacrificar la calidad. Subes tus imágenes PNG y el sitio web reduce automáticamente su tamaño manteniendo la calidad de la imagen. Es una herramienta útil para desarrolladores y diseñadores web que quieran reducir el tamaño de los archivos de imagen para mejorar la velocidad de carga de las páginas web.

2. IMG2GO es un servicio en línea para editar y convertir imágenes. Te permite cambiar el tamaño, recortar, rotar y hacer otras cosas a tus imágenes. También te permite convertir imágenes entre distintos formatos de archivo. En pocas palabras, es una herramienta de Internet que te ayuda a hacer varias cosas con tus fotos o imágenes sin necesidad de instalar software especial en tu ordenador.

3. CompressJPEG es una herramienta en línea para comprimir imágenes JPEG. Subes tus imágenes y el servicio reduce automáticamente su tamaño manteniendo la calidad de la imagen. Esta herramienta es útil para quienes desean reducir el tamaño de los archivos de imagen y mejorar la velocidad de carga de las páginas web en las que se utilizan estas imágenes.

4. Optimizilla es muy fácil de usar: basta con subir las imágenes para que las optimice automáticamente para la web. Es una herramienta muy útil para quien quiera acelerar los tiempos de carga de un sitio web y ahorrar espacio de almacenamiento sin sacrificar la calidad de la imagen.

Resumen

Para que tu TikTok Shop tenga éxito de ventas y atraiga a más clientes, es esencial arreglar las imágenes de tus productos. Las funciones de compresión de imágenes de Magento pueden funcionar fácilmente con otros sitios web y tiendas online. Esto significa que las imágenes de tus productos encajarán bien con la plataforma TikTok Shop, que tiene reglas estrictas sobre el tamaño de las imágenes. Aunque las imágenes sean más pequeñas, seguirán viéndose bien y claras. Además, esto conduce a una carga más rápida de la página, lo que sin duda mejora su rendimiento para la promoción en línea.