Shopify's most complete picture optimization experience summary

Ecom Shop related 1years go (2021) Claire
153 0 0

The first thing users see when shopping is the picture of the product on the website, and then the title and price of the product. There is a saying in the industry: "To do e-commerce products, in fact, is to sell pictures." So good picture optimization is a more urgent task for a website. Picture optimization has two aspects, first…

To ensure the quality of the picture under the premise of compressing the picture size as much as possible to improve the loading speed of the site, and thus shorten the site open time. Second, to increase Google or bing can be more included in our product images, to bring us more quality browsing. The next picture from the correct name, compressed image size, image type selection, ALT attribute optimization, the use of image sitemap five aspects to do picture optimization.

Shopify's most complete picture optimization experience summary
  • Save

Proper naming of images

According to the official Shopify definition of an image: create descriptive, keyword-rich file names. Search engines will not only crawl the text on your page but will also search for keywords in your image filenames.

For example, I downloaded a product image from Anker's Amazon store, the default name of the image is 71AAIEEX6ZL.AC_SL1500.jpg, we need to name the downloaded image on our computer: Anker-Fast-Charging-For-the-iphone-13- Series.

Warm tip: When naming the image, please use "-" instead of spaces between words, otherwise the spaces will be replaced by %20 after the image is uploaded to the server.

Popularize: 1 Google APP tool to extract web images

Fatkun: batch image download

Shopify's most complete picture optimization experience summary
  • Save

Compress image size while maintaining image quality

In Google's ranking algorithm, the speed of opening a website is one of the most important factors to get high ranking. You may have heard that if an audience doesn't open a website in 3 seconds, there is a 50% probability that they will leave the website, so the time it takes for the website to load is important, and the size of the images is one of the important influencing factors of the website loading speed.

From a set of data, a picture of a well-known big seller Aukey( is only 36.32kb, and the picture is very high definition. I randomly opened a website(, its picture size is 223kb, the picture is relatively blurred. Before I also browsed many sites with images 3-4MB. Back then, I really wanted to contact this site to give them some advice, but unfortunately at the time couldn't contact the webmasters.

Selection of image type

Common image file types are JPG, GIF and PNG.

JPG is the most common image for Shopify and the best choice, providing the best quality with the smallest file size.

PNG images are very small and can be used for logos and decorative images (background images, buttons and borders).

GIFs are more often used for vivid display animations and are usually displayed in pop-up sites, so please compress them before using them.

Optimize ALT text attributes

What ALT text is and what it does

ALT text, commonly known as alternative text, is used in HTML code to describe the appearance and function of images on a page.

It has two functions:

First, when the picture cannot be displayed, the alternative text will be displayed to replace the picture.

Second, the alternative text provides search engines with better image context/description to help them index images correctly.

How can I write a good alternative text?

Official Google Case Reference

Less effective (missing alternative text): <img src="puppy.jpg"/>

Better: <img src="puppy.jpg" alt="puppy"/>

Best results: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

From the Google case reference, the following 3 results were obtained:

a. Describe the image as specifically as possible.

b.Implant product keywords. alt text provides a location to include keywords, so make the most of it.

c.Avoid stacking keywords

Shopify's most complete picture optimization experience summary
  • Save

Using image sitemap

Submit the site map of the Shopify store (eg: to the Google webmaster tool through Search Console.


a.Register Google Webmaster Tools:

b. URL prefix way to verify the ownership of the site (Need to know more? Please DM me)

c. Submit the Shopify store sitemap ( ), submit successfully, and then wait for Google to crawl.

This article was prepared over a long period of time before I wrote it. I will share and improve it in time when I will have more ideas about image optimization later. Sign up for my website, follow me, and share knowledge on a daily basis! The more you share, the happier you are!


Hi, I am Rogers, the webmaster of Woospy, a blog writer and a normal E-commerce businessman. I have been running Amazon and Shopify stores for more than 3 years. During the period of running my own stores, I've been super aware of the exhaustion and helplessness of doing e-commerce business sometimes. This is the main reason why I created Woospy. There are over 300 tools and software I used or knew collected on this site. I believe these tools, software, and tutorials can provide other sellers with a lot of inspiration and improve their efficiency to some extent.
Bro, hope you can enjoy my collection here! Hang on there and the best time is coming!

Copyrights:Claire Posted on December 1, 2021 12:56 am。
Please specify source if reproducedShopify's most complete picture optimization experience summary | Woospy

Related posts

No comments

No comments...