How to optimize images on TikTok Shop

Modified on Tue, 12 Mar 2024 at 05:01 PM

Optimizing product images is crucial for success on TikTok Shop. Using Magento's image compression capabilities, you can ensure that images meet TikTok Shop requirements without compromising quality.

In this article, you will learn about helpful image compression techniques to adhere to TikTok Shop's standards and improve the efficiency of your Magento website.

TikTok Shop Image Requirements

Up to 9 square images and 3 variant images can be uploaded.
Accepts JPEG, PNG, JPG formats; HEIC and WEBP are converted to JPG if they fit the size limits.
Maximum size is 5MB with a minimum resolution of 100x100 pixels (or 800x800 based on some sources) and a maximum of 20000x20000 pixels.
Products must be shown in color, without shading, in high quality, and from various angles.

Learn more details about image requirements in TikTok Shop seller documentation.

Adjusting Image Size in Magento

Magento helps sellers optimize and compress their images for a smooth shopping experience and to fit the e-commerce platform's requirements. Follow the steps below to activate image resizing in Magento:

For existing images, go to Stores > Settings > Configuration, select Advanced > System, and adjust the Images Upload Configuration settings.

For new images, pre-sizing before adding them to the catalog can prevent slow site loading. Here are the main methods for new image resizing.

The slow method involves using a default CLI command to resize images one at a time.

bin/magento catalog:image:resize

This method can only resize one picture at a time and repeatedly resizes images that have been resized in the past. Once initiated, the process must continue uninterrupted, potentially taking several days to finish.

The faster method uses asynchronous image resizing, which was introduced in Adobe Commerce 2.4.

1) On each web server, temporarily launch additional queue handlers (equal to double the server's physical processor count):

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

2) Check to ensure the queue handlers are operational:

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

3) Fill the queue with requests to resize all images:

bin/magento catalog:images:resize --async

4) Once the resizing of all images is complete, end the process:

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

The quickest method involves front-end resizing for multiple images across servers. This method can resize several images at once and functions efficiently on multiple servers. It also bypasses images that have previously been resized.

With its help, you can resize 100,000 images in under 8 hours, in contrast to the CLI command method, which could take approximately 6 days.

First, access your server. Navigate to the directory pub/media/catalog/product and record one of the hash values found there (for instance, 960a3b7bb9e1b949d7a82cacac2af5b4).

In the following instructions, replace www.example.com with your store's domain name and use the hash value you recorded earlier.

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

This process generates a comprehensive list of all product images in your store. Use a tool like "siege" or another crawler to leverage the full capacity of your servers and processors and speed up the creation of the resize cache.

Accessing a specific image cache URL triggers the automatic generation of all required image sizes in the background, provided they don't already exist. This method also avoids reprocessing images that have been resized previously, thus optimizing processing time.

Online Image Optimization Tools

Alternatively, you can use online tools such as TinyPNG, IMG2GO, CompressJPEG, and Optimizilla to reduce image sizes for TikTok Shop without sacrificing quality.