Monday , 18 December 2017

Guide on Website Image Optimization For Ecommerce Site

Sometimes a picture is worth a thousand words. Especially when you are running an online store or any other ecommerce site, you should master as much the art of image optimization as possible. It’s critical to find a good balance between image file size and image quality in the process. And you should also know some other techniques to modify your images. Here, I’m glad to introduce some useful tips for helping you build a successful ecommerce website through image optimization.

Firstly, decide the image file type for specific situations.

Most often, we will use GIF, JPG or PNG images optimized for the web. Knowing both the strengths and weakness of each file type is critical to bring with a successful website image optimization.

JPGs: Photographs, Product Images, Homepage Banner/Images

JPGs, or JPEGs, are the most widely used file type for images on the web. Photographs and complex images involving many different colors, gradients, shadows, or patterns prefer JPGs because there is a huge color pallet combined with this file type to help better handle these images.

JPGs can be saved as per your requirement for low quality or high quality images. In other words, you can adjust and save the image the way you want to balance the file size and quality.

PNGs: Logos

PNGs are also a popular file format for images. You can save PNGs as PGN-8 or PNG-24, the former with smaller image size, while the latter offering much higher quality image and requiring larger file size.

With utilization of lossless compression, the format is generally considered as a replacement of the GIF image format. Different from GIF, PNG doesn’t support animations but produces background transparency without jagged edges. Due to that, PGN works very well for logos, which always needs transparency and high quality but comes at a small image size.

GIFs: Logos (less popular)

Graphics Interchange Format (GIF) is commonly used to display indexed-color graphics and images in HTML documents. It minimizes file size and electronic transfer time by using LZW compression algorithm. Since GIF files are restricted to only 256 colors, they are rarely used for product photos. Instead, some ecommerce sites like using them for logos.

Secondly, be careful about the compression rate.

You will be very likely to get low-quality image when pursuing smaller file size. Here is a classic example of the impact of different compression rate on an original, untouched image of 3.11MB.

Low compression (high quality) JPG – 796 KB
High compression (low quality) JPG – 7 KB

You could see from the above two images that the first image takes up 796KB file size, while the second one takes up only 7KB. It is easy to find that the larger size image comes with higher quality, but smaller one obviously looks horrible. So, it is generally ideal to keep the total weight of a webpage under 1 or 2MB in size.

In the above case, you can set a medium compression rate to reduce the file size to 90KB, which is nearly 9x smaller than the original image with low compression while remains at a high-resolution like this:

If you’re using PNG format, you’d better keep the images less than 100KB for the best performance.

Thirdly, harness the power of image optimization tools and programs.

You can find plenty of useful tools and programs for optimizing your images whenever you want. Some charge for free while some not. You can use the tools to perform your own optimization; or, you can let someone to do it for you.

Here is a list of most recommended image optimization tools and programs that you can rely on.

  • Adobe Photoshop—A free, powerful raster graphics editor for creating and enhancing your photos, images, 3D artwork and more.
  • Gimp—The free & open source image editor
  • NET—A image and photo editing software for PCs that run Windows.
  • GIFsicle—A command-line tool for creating, editing, and getting information about GIF images and animations.
  • JPEGmini—A photo recompression software for reducing the size of photographs without affecting their perceptual quality.
  • OptiPNG—A PNG optimizer helps recompress a image file to a much smaller size, without compromising any information.
  • pngquant—A command-line utility and a library for lossy compression of PNG iamges.
  • ImageOptim—A popular tool for reducing image file sizes and removing invisible junk.

Fourthly, describe your images in plain English.

It is important to take advantage of acceptable keywords for getting a higher webpage rank on Google. Specifically for image optimization, you can add some descriptive words to your images; meanwhile, ensure the keywords are included in your image file names.

If you don’t know what keywords can attract your customers, you can get into the website analytics and find some most common phrasing patterns being used by your customer to perform searches.

Fifthly, optimize your alt tags intelligently.

It is unwise to look down on the importance of alt tags. As a text alternative to images when they are not properly rendered by the browser, alt tags add SEO value to your website as well.

It is possible to help your website get better rankings in Google when you have added appropriate alt tags to the images on your ecommerce site. But what are appropriate alt tags? The answer should be the keywords of your products or content. Below is the source code of an alt tag:

Keep some simple rules in mind when creating alt tags:

  • Use plain English to describe your images.
  • Use model number or serial numbers in your alt tag if you’re selling products.
  • Avoid keyword stuffing.
  • Don’t use alt tags for decorative images because you might be penalized by search engines for over-optimization.

Lastly, use image site maps.

If your ecommerce site is using image pop-ups or JavaScript galleries to improve the overall shopping experience, you are recommended to add Google image site maps to your site for getting your images visible to Google.

In order to let web crawlers easily crawl your images, you should list their location in an image site map.

Conclusion

Image optimization comes with a significant importance to any ecommerce website. Primarily, you need to save images appropriately for the web, which is easy to learn and implement. Then, you should master some simple but very useful image optimization techniques, like creating image names, optimizing alt tags and using site maps, etc. Stick to several most effective image optimization solutions and you can attain astonishing results.

Leave a Reply

Your email address will not be published. Required fields are marked *