The Best Optimization Strategy Summary for Shopify Images

2019-07-19 07:22:00

/

Editor's Note: The author Gu Xiaobei is an authoritative B2C marketing expert in mainland China. He has rich experience in cross-border e-commerce and is willing to summarize his experience in blogs to share with friends in the industry. Idvert is very honored to receive the reprint authorization of his articles and will share them with everyone, hope you can be inspired from it.

The original linkhttp://www.guxiaobei.com/shopify-image-optimization.html


When we do SEO optimization,we should not only focus on the website content, the code and the URL, the optimization of the image is also particularly important. Compared to code optimization, image optimization is much easier to process even for the less technically minded people like us.

1.jpg


Sometimes a good picture speaks louder than a lot of text descriptions. It helps to avoid the boringness of reading so as to increase the retention rate of the website.


The size of the image not only affects the loading speed of the website, but also the browsing experience. It is also very important for the crawling and scanning of search engine spiders! We use two websites to make a comparison, and this intuitive feeling will be more obvious.


The left one is the zaful website. The image size of the website is only 663.99KB. The right one is an unoptimized website. The picture is 3MB large. It’s obvious to see which site is faster to open.

2.jpg


First of all, let's get to know what is image optimization?


Image optimization means reducing the size of the image file as much as possible without sacrificing the quality, so that the page loading time can be shortened. It can also be called image search engine optimization.In other words, when we tell the search engine what the image represents and whether it matches your article, we can improve the chance of crawling by the search engine to get the ranking.


Let's take a detailed explanation of how to optimize the website picture.

1. Name your picture with keywords

2. Optimize the ALT label

3.Reduce the file size of the image

4.Choose the correct file format

5.Use the image sitemap

6.Use original image


First, use keywords to name your picture

Many users do not pay attention to the naming of images,and often have the following names:

For example: QQ picture 20171009172842IMG_65C19823.JPG

Or some garbled characters that you can't understand at all. These are the performances that don't pay attention to SEO. What is the correct way to name?

Add keywords as much as possible in the naming, but be careful not to pile up keywords.

When the two pictures of Peppa Pig are placed in front of you, which one do you think google would prefer?


3.jpg

C19823.JPG and peppa-pig.jpg, the answer is obvious, it must be the latter.


Second, optimize the ALT label

First of all, we need to know what is ALT tag for? That is, when my picture cannot be opened, the alt message will be displayed. Web page visitors can use the ALT tag to determine the content of the image. Adding keywords to the alt tag is a good way to improve keyword ranking.


The alt tag is written in the html language like this:<img src=”image path” alt=”picture description”/>

E.g:

<imgsrc=”//cdn.shopify.com/s/files/1/0176/1622/products/CabanaHouses_grande.jpg?v=1525446988”alt=”Cabana House” />

Adding alt tags in the back end of Shopify is quite simple.You just need to click Alt on the image after the uploading.


4.jpg


Fill in the alt text and click Done.


5.jpg

To attract users, we usually show a product from multiple angles so the customers may spend more time on the website. In that, you need to shoot the front, back, side, details, etc. of the product. Then how do you write an alt tag?


The best way is to keep the alt tag structured, as well as the format of the main image, and don't need to give the rest of the picture a new name. The correct way to name is:

Alt={Brand Word}{Product Series}-{Product Model/Serial Number}-Front

Alt={brand word}{product series}-{product model/serial number}-back

Alt={brand word}{product series}-{product model/serial number}-side


Keeping the format"{brand word}{product line}-{product model/serial number}" unchanged allows the search engine to confirm that this is a series or that this is the same keyword, thereby increasing the probability that these images will be searched by the search engine.


Third, reduce the file size of the image

Use the css style instead of the image as much as possible, use list instead of the thumbnails, and you can use the color instead of the big picture to make the background. These 3 points are very important.

When we upload images, it is recommended that the size of each image should not exceed 200K, and within 100K is the best option.


There’re several recommended Shopify plugins:

SEO Image Optimizer by Booster Apps (free)recommendation

https://apps.shopify.com/seo-image-optimizer

Image Optimizer – Image Compression and Optimization 

https://apps.shopify.com/imageoptimizer  (paid) It’s not expensive, 5-19 dollars a month.

SEO Image by Lion Apps(free) 

https://apps.shopify.com/lion-seo


If you don't want to install the plugin, you can usually use the "Save for web" command of photoshop. It is not a big deal if you don’t know how to use it. Here are two tools for image compression:

Tinypng (free)

https://tinypng.com/

This little panda is the most used image compression tool, very convenient.


6.jpg


Tuhaokuai(Paid)

https://www.tuhaokuai.com/

7.jpg

 

In our website,it is generally recommended to use JPG format. It is smaller, and the picturequality is relatively better.Fourth, choose the correct file format


If the picture is animated, you can use the GIF animation format. If you save it as a JPG image, it will not move.


If the image is in transparent or semi-transparent format, it is recommended to use a 24-bit PNG format, such as logo, which has better compatibility and better edge display.

 

Fifth, use the image sitemap

The web crawler is unable to crawl images that are not specifically called in the source code of the web page. So to let the crawler know the unrecognized image, we can list its location in the image sitemap.


Insert the following link in the robots.txt file to display the path to the sitemap:

Sitemap:http : //example.com/sitemap_location.xml

Or you can use Search Console to submit a sitemap to Google.

Be sure to follow Google’s guidelines when creating asitemap as follows:

https://support.google.com/webmasters/answer/178636?hl=en

 

Sixth, use original picture

This is very important. Many people are looking for a picture on the website. This is not helpful for the weight of the website.Search engines cannot always crawl duplicate images.


Of course, some people say that I don't have my own designer or team. Then what should I do? Here are some good image resources recommended, at least better than direct Baidu and google search.

Flickr:https://www.flickr.com/

Splitshire(Free commercial photo gallery) https://www.splitshire.com/

Pixabay (Millions of free high-definition pictures) https://pixabay.com/

Pexels(A free photo site with high quality and high quality) https://www.pexels.com/

Stocksnap(You can quickly find the high quality images you want) https://stocksnap.io/

7MX http://7mx.com


These are relatively small tips. Many people don’t pay too much attention to these. However, you’ll see the difference If you persist long. Just like the difference between the fitness and the non-fitness people, maybe they are quite the same in the 20s, but when they are over 30 or 40 years old, you will see the fitness guy with a much more vigorous and young spirit.