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 ecommerce site, its really easy that you have hundreds of images of products and its hard to rename all this 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 alternative 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 product means providing more information to the 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, 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 its not good for ecommerce 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 achieving small file size with quality image. Research shows that 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 of 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 user scroll the page.
Naming of images and alt text rules apply here. Thumbnail images should be named differently than main product images and shoube 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 looking page 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.