Image optimization techniques can gain better site performance and SEO benefits. I am going to discuss several tips here.
Naming of images
You should name your images differently and in plain English. When you have e-commerce site, its really easy that you have hundreds of images of products and its hard to rename all these images. But one should not keep those auto-generated names. Naming images in such a way that it contains keywords and describes product could get you huge SEO benefits. It will help to rank page better on search engines.
Here are examples of good image names – 2013-NISSAN-ALTIMA-WHITE.jpg rather than DCMIMAGE1223.jpg and MEN-CANVAS-AUTHENTIC.jsp rather than ZSADR456.jpg.
Utilizing Alt tags
Alt tags are text alternatives for the browsers when they can’t render images. Putting descriptive text in your Alt tag can get SEO benefit and it will also give useful information to page viewer when image is not loaded.
Here is an example of HTML image tag : <img src=“MEN-CANVAS-AUTHENTIC.jpg” alt=“Men Canvas Authentic” />
You should utilize each and every alt tag of product images. Putting product model no or serial no in Alt tag can help too.
Using multiple images for product
Providing multiple views of the product means providing more information to shoppers. Going back to our 2013 Nissan Altima example, you want to show multiple features (interior, spoiler, headlights, etc…) of the car if you want to sell it.
As discussed earlier, the proper image name and alt tag text is the perfect way to go. Here are some examples :
2013-Nissan-Altima-S-Red-Leather-Interior-Trim.jpg -> using the alt tag of: alt = “2013 Nissan Altima S Red Leather Interior Trim ”
2013-Nissan-Altima-S-Front-View-Light.jpg -> using the alt tag of: alt = “2013 Nissan Altima S Front View Light “
Reducing file sizes of images
Large image size will increase page load time and it is not good for e-commerce sites. Research shows that most consumers wait about 3 seconds to load the page. There are several tools available to achieve this. PicMonkey, Pixlr,FotoFlexer,Adobe Photoshop and GIMP are few to name. One should reduce image size as much as possible while keeping image quality good enough. Creating JPEG images helps to achieve a small file size with a quality image. Research shows that the general rule of thumb for commerce images size is to be below 70kb.
e-commerce sites usually provide thumbnail images under category pages and it helps to quickly scan the products in that category. Too many thumbnails can kill page performance too. One can use pagination to load only 10 or 20 products at a time or several sites loads more when the user scrolls the page.
Naming of images and alt text rules apply here. Thumbnail images should be named differently than main product images and should be kept small in the size. It might be ok to compromise quality little bit for thumbnails.
Websites often use decorative images in form of background images, buttons or borders. Although they can help a page look nice, they can also add performance overhead to the page. One should try to get these effects using CSS is possible. If those are really needed, image size should be kept really small.