Product Image Optimization Tips

If you run an online store, write blogposts about your products or service and promote your brand in social media you can’t overlook image optimization. Images are both important for search and marketing. For ecommerce retailers proper image optimization can give important visibility in search engines thus catching the consumer’s attention.

Some of you may be thinking: ”Who cares about image search?“

But wait a second and take into account these 2 main advantages you get right after proper image optimization:

1. Image Ranking for relevant search in Google Images, Image Search Yahoo or Bing Images.
2. Keyword Relevance of the Page will generate more solid traffic.

Get ready to make search engine friendly images and improve their rankings with our tips:

STEP #1: MAKE YOUR FILE NAME DESCRIPTIVE AND KEYWORD RICH

Google bots can determine what your page is about only by the text on it. They can’t read images but they can search for the keywords within the image file name.

Make sure your file name is relevant, because no one will find or search for the image titled DCIM005.jpg.

Keywords are everything, so why not to make your file name incorporate them (but do not overstuff).

For example, the file name of the image “aviator-sunglasses-with-orange-lenses.jpg”would be more preferable than just too generic “sunglasses.jpg”.

STEP #2: UPDATE YOUR ALT TAGS

The Alt tag is probably the most important image optimization factor.  Writing descriptive and keyword-rich Alt tags helps search engine robots to “see” your website’s image.

The Alt text for the image above should be: Alt=”aviator sunglasses with orange lenses”

The full code will look like:

<img src=“http://www.mageworx.com/aviator-sunglasses-with-orange-lenses.jpg”alt=”aviator sunglasses with orange lenses“>

HOW TO CREATE GOOD ALT TAGS:

• They should be keyword-rich.
• Avoid keyword stuffing, as it makes your website look spammy to the robots.
• Be specific, as general keywords are difficult to rank high.

STEP #3: RESIZE YOUR IMAGES TO REDUCE LOAD TIME

Load time is absolutely important for site visitors.What is more, load time affects Google Rankings.

The size of your images influences the load time which in its term is the major factor of page abandonment.

• 40% of consumers abandon a website that load more than 3 seconds on their desktops or laptops;
• most customers will wait about 5 seconds for a website to load on their mobile devices.

HOW TO OPTIMIZE IMAGE FILE SIZE

There are 2 things you should always consider while optimizing your image file size:

1. File Type
2. Saving Methods

Mostly 3 file types are being used for the web product images: JPEG, PNG and GIF. The difference is in the quality result.

GIF format is typically used for small resolution files like logos, buttons, icons, simple graphics, symbols and animation. The format supports transparency which is great when you place it over color backgrounds or photos, as in this case you won’t see any border between the images.
DON’T use GIF format for photos due to the limited 256 colors.

JPEG format is the best for photos and complex images as it supports 16,5 mln colors. The main advantage of JPEG is that it can have relatively small size with really good quality.

PNG format is used when you need to preserve transparency and a large amount of colors. There are 2 PNG formats: PNG-8 and PNG-24.
PNG-8 doesn’t support transparency and is used for images with simple colors like logos or buttons.
PNG-24 does support transparency and as it handles many colors it’s good for complex images and photos like JPEG.

IMPORTANT: the size of PNG format will be 5-10 times bigger than the size of JPEG.

TIPS FOR CHOOSING FILE FORMAT:

• Use GIF for animated files;
• Use PNG-8 for simple color images (buttons, logos);
• Use PNG-24 for photos or complex images when you need transparency and not afraid of large size;
• Use JPEG for photos as it provides the best quality & the smallest file size. So, ecommerce merchants, in most cases JPEG will the best choice for you.

SAVING METHODS
Once you’ve made your image look perfect for the site visitors & decided what file format to choose it’s high time to save it. If you use Photoshop than go to the Save for Web & Devices dialog (Cmd/Ctrl + Shift + Alt + S).

There are only few features that you’ll use most:

WHAT SIZE SHOULD WEB IMAGES BE?

Try to keep the image size at around 70 kb. But if you could make your file images even smaller without them looking awful, go ahead.

STEP #4. DON’T FORGET ABOUT IMAGE SITEMAPS

Give Google information about your images by including them in the sitemap. In this case you’ll need to add image specific tags. You could find a lot of guides on how to do this, one of them is Google Image Sitemaps.

CONCLUSION

Take care of file naming, alt text and image size. Don’t forget to check the loading time of your images on different browsers and always keep in mind: TESTING is the key element of your work. Test everything – the keywords, the number of product images on the page, the number of product items on the page, what kind of photos your visitors want to see and so on.