Best Practices for eCommerce Website Photos and Product Images

Thursday, 31 January 2013  |  Cate
Understanding how images work on the internet, before you start uploading them to your website, can stop all sorts of problems occurring later on and causing you to have to re-do them. Use our easy guide to make sure your images are optimised for use on your ecommerce website.

You may photograph your products yourself or perhaps your suppliers provide you with stock product shots.  No matter where you obtain them from they will always need to be optimised before uploading them to your site.

Photograph size

Firstly, you will need to check the size of your images. If they are taken straight from a camera or are supplied to you they are likely to be quite large. But what is too large? Any website image should never be any bigger than 1000px in width and 1000px in height, unless it is the website’s background image.

If they need resizing you can do this within a graphics or photo editing software package such as PhotoShop or Paint Shop Pro. If you don’t have either of these, don’t worry, there are plenty of free and low cost software packages available online too.  Two examples are Google's Picasa and the ever popular, Gimp.

Picasa Gimp

Adding images to your site

You should never upload images to your site and assume they will fit. Websites have fixed amounts of space for certain areas such as product images or homepage banners. You need to know the size of the area you wish to put the image into before you resize it. You can find out the width of each column on your Bluepark website by going to the EasyEdit bar at the top of the page and clicking on the corresponding Blocks link.  The content width is at the bottom of the list.

A common mistake is uploading large images and then setting the size as smaller during the upload process or by changing them in the Properties pop-up in the WYSIWYG. This masks the size of the image using HTML code and doesn’t physically resize it. This means when someone views the page with that image on it, the web browser will need to load the large image in the background and then set it to the correct size on the screen. This will slow your page down and will use more bandwidth than is necessary.

If you have already uploaded images onto your site and have masked them with a different width and height you will see a red pencil icon Red pencil icon to the top right of the content area. This icon means ‘Recommendations’. Once you click on this icon you will see the image name, dimensions and file size. Click on the file name to launch the image resizer and click on the Resize Image button. This will physically resize the image to exactly the same size you have specified in the code.

Recommendations Icon

Image file size

One thing you will need to take into consideration is the actual file size of an image. This is not the width and height but rather the amount of web space it will use. Any website image should never be more than 200KB, including the website’s background image. Anything larger than this will considerably reduce your page load speed and use up your bandwidth allowance.

You can reduce the file size by reducing the quality of the image and re-saving it.  Website images do not need to be high quality, so try to find a happy medium between quality and low file size. Many photo editing software packages have the option to optimise your file during the save process but there are also a few free online services that can do it for you if you don’t have access to software.  The following examples are Yahoo's and Dynamic Drive's Online Image Optimizer.

Smushit Dynamic Drive

Making small images larger

Trying to resize images upwards to make a smaller image larger doesn’t work. All it will do is pixelate your image and make it look blurred. This will happen if you resize upwards in your photo editing software or if you try to resize it using HTML code. The Bluepark resizing tool doesn’t allow you to do this, so if you try, it will just leave the images at the size they originally were.

Resizing images upwards

Image 1 is resized correctly.  Image 2 has been resized down and then back up to the required size.

Image Format

Website images must only be saved in certain formats - JPEG, GIF and PNG. Web browsers struggle to render any other format so should never be used, including BMPs and TIFFs which are high quality images and, therefore, are large in terms of file size.

There are two types of colour modes that images can be presented in, RGB and CMYK. The CMYK colour mode is used for high quality printing because most printers use the four colours of Cyan, Magenta, Yellow and Black to create a crisp, clean image.

All website images must be in RGB as all monitor, TV, mobile phone and tablet PC screens are built in Red, Green and Blue. The Bluepark system will give you a warning when you assign a CMYK image to a product in the Product Editor but it is always best to check first, particularly if they have come from a supplier. You can do this by opening your image in a photo editing software package and selecting Mode. If it is set to CMYK, change it to RGB and resave the image.

RGB Example CMYK Example
Image 1 was created in RGB and Image 2 in CMYK. You can see that CMYK doesn't appear as vibrant on a monitor as RGB.

Consistent product images

It is always best to keep your product images to a consistent size right across your online shop. This means deciding what sizes the large, main, thumbnail and basket images should be whilst you are creating your template. Consistent images create a clean, professional look to your site and stop your template from breaking.  Image 1 has inconsistent image sizes which looks messy and pushes the right side of the site out.  Image 2 has product images of exactly the same size.  Which one looks more professional and appealing to you?

Random image sizes Consistent image sizes
Click on the images to zoom

Make sure you crop all of your product images closely to the actual product, rather than leaving lots of white space around it. Removing the white space first and then resizing will allow the product to fill more of the space, making it appear larger on the screen. Keep all product images square, rather than rectangular, as this will help with images to sit in a grid-like fashion within a category page.

The multiple image uploader in Bluepark will cleverly find your most used image sizes and use these to populate the resize fields.  This will allow you to upload and resize images to consistent sizes quickly. If you are using the Import Product Data feature to import all of your images you can set your main, thumbnail and basket columns to create your images in a standard size. Take a look at the help guide on how to do this via the import.

Image names

When naming your images it is best to use descriptive names that explain what is in the image rather than random numbers and letters. This will help search engines to identify the image and use it within their image searches. Although this won’t have a huge impact on your listings in Google, it will help your overall page rank as long as the image is relevant to the page.

It is recommended that you do not use spaces in image file names as web browsers have to use HTML code to fill the space in an image URL. Instead, replace all spaces with a hyphen or an underscore.

Optimisation is good practice for Google

Remember, Google and other search engines are like humans, they don’t like to wait for pages to load on websites. Images that haven’t been optimised for the internet can, more often than not, cause pages to slow down. This can damage your page rank and therefore end up damaging your position on Google.

To check your website's speed and see if any images are causing your pages to slow down go to Google's PageSpeed Insights tool and add in your domain name. You can then click on the Optimise Images link to view the ones they recommend you take a look at.