Optimising Images

Optimising Images

Images sell your products, they are your opportunity to convince the customer of the quality of the product and the benefits that it will bring them. The images need to be informative, clear, asthetically pleasing and relevant to the customer aswell as keeping to a reasonable size in terms of both dimensions and filesize.

It is important to remember that not all of your customers will have a high speed internet connection, and also that an increasing number of users are browsing on mobile devices, because of this, having particularly large images can significantly increase your page load times and may cause potential users to give up browsing your site.


In this article we will cover how to optimise your images.

1. Source high quality images to sell your products

This can be the most challenging part of the process, ideally (depending on your industry) you will have a 'lifestyle' shot of the product in use, and then additional images of the product, including close-ups of keys areas of the product.

You may find that your supplier or the manufacturer of the product can provide you with these. If they can not, or if their images are not of sufficient quality, it may be worth considering taking youy own photos of the products, perhaps add a watermark in PhotoShop to prevent competitors from using your images.

2. Open the images in PhotoShop (or a similar alternative)

If you have access to PhotoShop, one of the main advantages is that you can open a number of images in the program at once, and, if required, process these images in bulk or a 'batch'. Useful alternatives to PhotoShop include Picnik and Gimp.

3. Crop the image to remove unwanted canvas.

It is worth cropping to remove any canvas that is not contributing towards the product image, this stage also invloves you cropping the image to the correct aspect ratio.

4. Resize the image to suit your site.

This stage requires you to decide, perhaps on a per product basis, the size that your image needs to be to effectively advertise your product. We will be able to advise you on the ideal image size (i.e. 1000 x 1000 pixels or 600 x 900 pixels) you can then size your image accordingly, whilst keeping the correct aspect ratio.

5. Save the image optimised for web use

Within PhotoShop, you are able to save the file optimised for web use, this reduces the file size without sacrificing image quality. There may be similar functions available within alternative image editing programs.

6. Upload to Smushit (particularly useful for large banners)

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a "lossless" tool, which means it optimises the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page's images and provides a downloadable zip file with the minimised image files.

7. Upload
Image Specs - 

These are the recommended specifications of a product image for Liquidshop.


  • Filesize: 100-150kb
  • Size: 1500 x 1500 Pixels
  • Format: JPEG (.jpg)
  • Colour Mode: RGB
  • Resolution: 72dpi


Please note that these figures may change slightly depending on your industry. For example, a fashion website will require higher quality images. The use of brochure images, 'CMKY', is not recommended. If this is your only source then you will need to use an appropriate program to convert into 'RGB'. If you are unsure in anyway then please contact us for further advice.

Example

Here is an example image that has been resized using the techniques described in this article. The first image is the original image and the second is the resized version. The original is 347kb and the resized is 75kb.



    • Related Articles

    • Bandwidth Usage

      Within LiquidShop, the term "bandwidth" is used to refer to the amount of resources used and data transferred to or from the website within a calendar month, this figure is measured in gigabytes. This article outlines how to make best use of your ...
    • 'Go-Live' Checklist

      When the 'go-live' process is due please consult this checklist to ensure that all points have been checked by yourself and that you are familiar with any of the processes. If you would like any further information on these points, please contact us. ...