Image considerations in website design

Your website designer is in charge of your website’s graphic design but your website’s page content (text and images) is typically the responsibility of the site owner/manager. Whether you agree with the notion or not, we do judge a book by its cover; your website users judge your website on its appearance and they decide within seconds whether your website’s content applies to their needs or not. And, as a picture speaks a thousand words, it makes good sense to invest in quality images, especially true if you sell products in an e-commerce environment (i.e. online store).

Web page content images

Web page content images accompany page text and are selected to compliment the text on the page. Choose images that are likely to attract attention and that act as a suitable introduction to what’s being discussed on the page. Ask yourself whether an image goes to any length to address a customer’s needs? Does the image address typical questions pertinent to the product or service being presented on the page?

Here are some simple rules to observe:

Communicate, don’t decorate: Only add an image/s to a page if it assists with reinforcing a message; don’t feel the need to add images to every page, only do so when they’re considered a genuine “value add”.

Select images relevant to the content on the page: Include images with relevance to the text on the page rather than the website as a whole.

Go pro or don’t include images at all: Poor images do more harm than good and say a lot about your organisation. When you consider that a professional stock image suitable for a web page costs as little as a takeaway coffee, there’s simply no excuse for employing low-quality images. DIY is perfectly acceptable so long as the end result is of commercial quality. Anything less and you’re sending the wrong message.

Don’t copy. Create. Copying images from the Internet is common practise but it’s also an infringement on copyright in many cases. NEVER copy an image without permission, ebb on the side of safety and purchase or create images in every instance.

Online store images

Online stores are often let down by poor quality images, either too small to display correctly on a user’s screen, or of a low standard (poor lighting or general image quality). A common mistake is to think that shooting product photos with a cheap digital camera is sufficient but sadly this rarely holds true. Also, a single image is often not enough to convey a story about a product. You want to present a compelling pitch to your customers and the only way to achieve this is with multiple images, compelling text and video if possible. Get quotes from specialist product photographers and invest in commercial quality product photos; remember that online users don’t have the luxury of holding a product in their hands. They need to rely on images. The more images you provide, the more likely you are to make the sale.

Due to emerging technologies, which resolution should be employed for images?

If your web page images are exclusively for your web pages (as opposed to also being used in print within brochures or catalogues) then ppi/dpi (pixels per inch/dots per inch) resolution is irrelevant. You can save an image from Photoshop as 1ppi and it will display perfectly across all display devices including Apple’s “retina” devices. It’s just that the latest Retina display devices feature screen resolutions of 2880 x 1800 (15” Retina MacBook Pro) so an image saved as 300 x 300px will look small on such a monitor. This comes down to understanding your end user but of course your web pages (and images) can’t be all things for all people. Strike a fair balance by creating images around the 500px mark (in any dimension); double that for product images which usually display within thumbnail (click to enlarge) galleries anyway.

If you operate Photoshop and have an interest in producing web images, here’s a list of good technical articles that further explain the ins and outs of screen resolutions, image sizes and the use of “Retina” display devices and monitors. Both articles are essential if you want to truly understand how images work on the web.

The Myth of DPI