Optimizing Images For Your Ecommerce Site
Most ecommerce websites are image heavy in that they have multiple products with one or several images per product. There is no getting around the fact that product images improve conversions. Customers want to see what they are getting and a good image is the closest they can get to the offline experience of picking an item off a store shelf to give it a closer look.
However for a very large site with hundreds of items, these images can slow down the site’s loading speed especially if it receives a lot of traffic. Therefore, image optimization is an important issue. A number of methods for optimizing your images will be considered next.
Upload Correctly Sized Images
Avoid uploading an incorrectly sized image and using the browser to resize it to the proper dimensions. For example, browser resizing occurs when an image is 1000×1000 pixels and you specify its display size in the image tag as something different such as 300×300 pixels. The image that you upload should be the same size as its desired display size. Therefore, if you want an image to be 300×300 pixels on a page, you should upload an image that is 300×300 pixels.
Use The Proper Image File Type
There are many types of image files but most web photos can be classified as either photographic images and everything else that isn’t. This is a very crude classification system but it works reasonably well. All photographic images should be saved as JPG image files and everything else should be PNG image files. PNG image files are generally used for simple images such as logos and for images with transparent areas in them. Photographs have a high number of color gradations in them while simple images do not.
Use Image Compression
One of the simplest forms of image compression is quality reduction. The higher the quality of a JPEG image, the bigger its file size. However, many high resolution photos can stand some quality reduction without it being noticeable by the human eye. Substantial file size reduction factors of two or three can be achieved this way.
Image editors such as GIMP allow you to reduce a JPEG image quality before saving it. They typically have a preview window that lets you see the effect of quality reduction. Simply reduce the quality until its effect on the photo starts to become noticeable, then increase it slightly.
PNG files can be similarly compressed using online compression tools such as TinyPNG.
Lossless compression methods also exist that don’t affect the image quality. An online lossless compression tool is Smush.it.
Use CSS
Rather than use an image for a solid colored rectangle with rounded corners, the same effect can be achieved using CSS. CSS can produce gradients, drop shadows, and other effects. However, you should make sure that these CSS effects are compatible with most major browsers.
For more tips on creating ecommerce websites or if you need a reliable hosting service for your ecommerce site, don’t hesitate to contact us.
Photo Source / Desaturated from original
Photo by dsearls
