How to Optimize Images on TikTok Shop: Solving The Problem with Magento

Some Adobe Commerce sellers may encounter the challenge of oversized product images upon venturing into TikTok Shop. This problem arises because TikTok Shop has strict rules regarding image resolution, file size and type, and the quantity of images that can be uploaded. That can make it difficult to list products smoothly. 

However, by using image compression, sellers can meet TikTok Shop requirements and enhance their Magento websites’ performance.

Image Constraints on TikTok Shop

Here are the main technical requirements that all images in TikTok Shop product listings must meet:

• Sellers can upload up to 9 square images and up to 3 images for variants.

• TikTok Shop currently only accepts JPEG, PNG, or JPG file types.

Product images in HEIC or WEBP formats are now automatically converted to JPG. If the file size meets the restrictions, they will be listed in the TikTok Shop. HEIC files generally refer to photos taken with smartphones (e.g., iPhone and Android smartphones). WEBP files are used in web development and may also be relevant to Shopify users.

If your images are of a different file type, you will need to convert them for TikTok Shop to accept them.

• The maximum file size is 5MB.

• The minimum resolution for images is 100×100 pixels (according to other sources — 800×800), and the maximum is 20000х20000 pixels.

• The product should not be shaded. 

• Images must be in color. 

• Images need to be of high quality (not blurry or pixelated). 

• Each image should show the product from different angles.

If at least one of these requirements is not fulfilled, you may receive an error notification according to its nature. 

Configure Image Compression Through Magento

TikTok Shop provides comprehensive information on image requirements. This is not surprising because the image “sells” your products. Purchase results depend on the success of product image posting as well.

TikTok Shop allows sellers to post products with high-quality images up to 5 MB. It is quite a lot since the average size of a standard photo taken on a phone is 1-3 MB uncompressed. Sellers can take a photo of a product with their phone and add it to their listing. But technology is constantly enhancing, and now, even with the iPhone 12 or new models on Android, users can get high-resolution RAW photos. These photos can even take up to 70 MB. Therefore, it is worth considering when you upload RAW photos directly from your phone or professional camera (if you have ordered a photo shoot from a photographer). 

So, what to do if the size of your image exceeds the TikTok Shop limitations?

Knowing that optimizing product images is paramount for Adobe Commerce sellers to deliver a seamless shopping experience to customers, Magento offers robust capabilities in product image compression. Using Magento’s image compression functionality, you can effectively manage and optimize your digital offers, ensuring that their images also meet the requirements of different e-commerce platforms.

How to activate image resizing

• For existing images:

1. Go to Stores > Settings > Configuration in the Admin sidebar.
2. In the left menu, click on Advanced and then select System.
3. Look for the Images Upload Configuration section under the Expansion selector. Uncheck the Use system value box if you want to change default settings.

4. To turn on, ensure that Enable Frontend Resize is set to Yes.
5. Choose a Quality setting between 1 and 100%. Using 80-90% is recommended for a good balance of file size and quality.
6. Set the Maximum Width for the image in pixels. This will be the maximum width when the image is resized, maintaining proportions.
7. Set the Maximum Height for the image in pixels. Similar to width, it determines the maximum height when the image is resized.
8. Once done, click Save Config to save your changes.

You can read more about the description of the fields here.

• For new images (when uploading new images):

Let’s also look at image compression options for the new products that are just being added before they become part of the catalog. Getting images resized before products are launched may be crucial for your store. Otherwise, your website will have to resize images every time a page loads. This extra work can slow down your site and put a strain on your server.

1. The slow way

Use the default CLI command to resize all images:

bin/magento catalog:image:resize

The disadvantages of this method include:

— The resizing process can only handle one image at a time.

— It resizes images that have already been resized before.

— Once started, the process has to finish without any breaks, and it might take days to complete.

2. The fast(er) way

Asynchronous image resizing was introduced in Adobe Commerce 2.4 and can resize images faster:

1. On every web server, start some extra queue handlers temporarily (twice the number of physical processors per server):

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

2. Verify that the queue handlers are running:

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

3. Fill the queue with all image resize requests:

bin/magento catalog:images:resize --async

4. After all images are resized, terminate the process:

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

3. The fast way

This way of resizing images needs the frontend.

The advantages of this method include:

— The resizing process can handle multiple images simultaneously.

— It can work across multiple servers, especially if you have several web nodes, a load balancer, and shared disk space for the media/ directory.

— The process avoids resizing images that have already been resized before.

This method allows you to resize 100,000 images in less than 8 hours while using the CLI command would take around 6 days:

1. Log in to your server.

2. Go to the folder pub/media/catalog/product and take note of one of the hash values (for instance, 0047d83143a5a3a4683afdf1116df680).

3. In the examples that follow, replace www.example.com with your store’s domain and substitute the hash with the one you noted 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

The result provides a list of all the product images in the store. You can use a tool like “siege” or any other crawler to go through these images, utilizing all the servers and processor cores you have. This way, you can create the resize cache much faster compared to other methods.

When you visit a specific image cache URL, it automatically generates all the different sizes of that image in the background if they haven’t been created yet. Additionally, it skips over files that have already been resized, saving processing time.

Online Image Optimization Services

Now, we’ll explore some of the most convenient online tools that can help you enhance and optimize your images effortlessly:

1. TinyPNG is an online service that helps reduce image file sizes without sacrificing quality. You upload your PNG images, and the website automatically reduces their size while keeping the image quality high. It’s a useful tool for web developers and designers who want to decrease image file sizes to improve webpage loading speed.

2. IMG2GO is an online service for editing and converting images. It allows you to change the size, crop, rotate, and do other things to your images. It also allows you to convert images between different file formats. In simple terms, it’s an internet tool that helps you do various things with your photos or pictures without needing to install special software on your computer.

3. CompressJPEG is an online tool for compressing JPEG images. You upload your pictures, and the service automatically reduces their size while keeping the picture quality. This tool is helpful for those who want to shrink image files and improve the loading speed of web pages where these images are used.

4. Optimizilla is user-friendly – just upload your images, and it automatically optimizes them for the web. It’s a handy tool for anyone looking to speed up website loading times and save storage space without sacrificing image quality.

Summary

To make your TikTok Shop selling successful and attract more customers, it’s essential to fix your product images. Magento’s image compression features can easily work with other websites and online stores. This means your product images will fit well with the TikTok Shop platform, which has strict rules about image sizes. Even though the images are smaller, they’ll still look great and clear. Moreover, it leads to faster page loading, which certainly improves its performance for online promotion.