Imagery

The imagery used on your site, given its visual weight, probably contributes more than anything to your site's overall appearance.

Feature Images/Backgrounds

In feature blocks on your store homepage, content homepage, page, category and form header areas you can set background images and/or colours. These, in contrast to product images, are purely decorative. Used correctly, they can inject huge personality into your site; used wrongly they can make a site look extremely amateur. Here are some guidelines for successfully using feature images*:

• Use high resolution originals, ideally at least 2000px wide. We'll handle the scaling. This way they'll look sharp on any device. A grainly, low-res image can kill the professionalism of any site.

• Avoid images that are not 'decorative' in nature. For example, a white-background product shot is not 'decorative' and won't look good as a background.

• Along similar lines, avoid anything with a really strong focal point that needs to be in a very particular position in the displayed image. Feature areas stretch and warp across a huge variety of devices, so you can never be quite sure what will be visible and where. If an image contains a focal point that must be in shot and the overall image doesn't make sense without it, it's probably not a great choice.

• Don't put your own boxes or borders on or around the images. Feature images are used as backgrounds so they are naturally bordered/contained by the box they appear in. If you create your own box or border it will get distorted and the image will look bad.

• Avoid embedded text. It will get distorted, can't be read by the browser or search engines and might not even display if the aspect ratio of the feature block means it is 'out of shot'.

• Aim for a similar visual aesthetic for all your feature images. Don't, for example, combine highly saturated, poppy images with subtle, grungy images. Work out what style suits your brand and stick with it throughout your site. If you're doing your own imagery, there are some great, easy-to-use photo editing tools with filters that can make all your images look very similar.

• Finally, don't just pull photos from the internet: they will probably be copyrighted and you'll get in trouble. Use either your own, in-house imagery, good stock imagery, or royalty-free photos from sites like Unsplash.

Product Images

The other type of images on your site will be those of your actual products. Getting product imagery right is the mark of a professional store. Here's how to do it:

• Use only professional, white background product shots. This is rule #1 and there are very few instances where it should be broken.

• Decide how you will position and light your products and follow that setup for all shots. Don't change angles or style for half of your products if you can possibly avoid it.

• Prefer squarer framings if possible. Very tall or very wide shots will be compressed into the square-like area that product shots tend to occupy and will thus appear very small.

• Edit your shots to produce a crisp white background.

• Tend towards higher contrast and saturation to make your products really pop.

• Likewise, prefer well-exposed photos to darker, under-exposed images.

• Include multiple angles, closeups and alternative views for shoppers to browse through.

• Avoid decorative, feature-like shots that place the product in an environment or situation - use those for your feature images. As a rule-of-thumb, if you can trace your finger round a square edge/border, your image is decorative rather than illustrative (might not apply for closeups).

It's hard to overstate the importance of product images that appear to have been professionally taken (even if they haven't). They lend an authority to your store which will cause browsing customers to trust that you are authentic and that the products are of good quality.