How To Select Images For Web Publication

Selecting effective images for an article, post or web essay is not easy. Though an amazing number of new free image libraries, image search engines and other visual resources have sprung up like mushrooms in the last two years, the ability to select what's appropriate and to seamlessly mesh it into the page layout is not nearly as is as it looks to those simply watching.

Photo credit: Marc Dietrich - Mashed up by Robin Good

In fact, I think that together with titling, the ability to select images effectively, it is probably one of the two most challenging skills to be acquired for a web editor, new media writer or blogger. Livia Iacolare, former content and technology editor here at Master New Media took quite a few frustrating months of tries and misses before mastering the skills I passed to her and becoming what I would consider probably the best picture image researcher I have worked with in recent years.

But getting there requires really quite some effort. Beyond the obvious need to have access to some rich image libraries the real difficulties lie in how to select images and how to find visual matches for titles and words that have no corresponding match in physical reality.

To learn these things, you need a guide, someone who has learned from someone else what images work across cultures and races and what images stand out making a message become stronger instead of just decorating the empty space around it.

Here are some of the basics of effective image selection for web publication as suggested by our good usability researchers at WebCredible labs in the UK.

N.B.: You will find no rocket science formulas in this short tutorial, but if you are new to online content publishing and are eager to read about some of the fundamental issues to keep in mind, when selecting images for web publication, here are some good points to start with:

 

E-commerce Imagery: Persuading with Pictures

by Mrudula Kodali

The power of images in making a sale has been well known in traditional marketing for a long time.

This becomes even more important online when there's no physical product for users to handle. The images on your website alone have to work even harder to convey the true "look and feel" of your product.

Although the following guidelines focus on ecommerce imagery, they can generally be applied to most websites.

1. Professional Quality

Photo credit: Screenshot from Hotel Chocolat website - Hotel Chocolat has sumptuous imagery of its chocolate creations, persuading users to make a purchase.

The quality of photographs is one of the few clues available online for users to judge the quality of your products.

The importance of quality shots can't be stressed enough, especially for luxury goods. And it's an investment worth making - conversions have been known to more than double through improved imagery.

Ensure images are professionally shot and of high resolution. Put as much care and thought into imagery as you would your window display. If you're aiming at the luxury market, it's important to create a feast for the eyes to draw your site visitors in.

2. Alternate & Detailed Views

Screenshot from Gucci website

Offering alternate views is crucial to convey the full sense of the product.

An important alternate view is the detailed one. The range of alternate views available should aim to provide a viable alternative to viewing the product in a physical store.

It's a good idea to allow the full range of imagery to be explored by providing cues such as arrows in the gallery area.

The Gucci website goes beyond static alternate views by offering 360° rotation, zoom and drag to move functionality.

John Lewis clearly offers alternate views, including a range of detailed views so the flowers can be appreciated close up.

Photo credit: Screenshot from John Lewis website

3. Enlargeable

Screenshot from Ducati website

Shoppers are unlikely to make a purchase in a bricks and mortar store without taking a close up look at the product.

So it's essential that online product images are enlargeable so users can take a closer look and feel they can explore the product in detail.

It's also common practice to open the enlarged image in a pop-up window.

Ducati offers enlargeable photographs of its bikes to almost replicate the experience of going into their showroom to see one.

4. Quick to Download

Photo credit: James Steidl

With 16% of the UK online population not yet on Broadband (source: National Statistics), it's important that images load relatively quickly.

Shoppers used to fast loading content are unlikely to wait around for images to load if they take much longer than a few seconds.

5. Proportionately Detailed

Photo credit: Vova Pomortzeff

Using smaller versions of images on the home and/or category pages?

Crop the image first so only the part of the image that captures its essence is viewable. Only then reduce this cropped image in size.

By removing some of the detail the image won't appear so cluttered and unclear. Users struggle with images that are too small for the level of detail involved.

6. Scale & Context

Screenshot from Harvey Nichols website - Harvey Nichols shows the handbag's scale and context of use by using a mannequin and clothes.

Showing the scale of a product and its context of use can really help users making a purchase decision online. By doing so, they're able to gauge how big an item is and what other products may go well with it.

Scale can be demonstrated by using mannequins or human models e.g. small items such as mobile phones can be portrayed held in a hand.

Another alternative is to provide a ruler guide in the corner of the image to help users judge its scale.

7. Show It All

Screenshot from Xbox website

Should your product come with accessories or components, display these laid out of the box so users can see exactly what they're getting and what other bits they may need to purchase separately. This view can form one of the alternate views of the product.

The Xbox website does this well, with all the components laid bare.

8. Relevant

Photo credit: Stephen Aaron Rees

Any images used should be relevant and add value to the content on your site. Images can be an effective tool in giving site visitors a quick idea of what the content's about.

Irrelevant pictures detract from the message being conveyed and can annoy users who don't see the connection between the pictures and text.

In a Nutshell

Photo credit: Luchschen

Persuasive imagery is a powerful tool in increasing product sales.

Poor imagery on the other hand can be detrimental to both sales and potentially also the brand.

Good quality imagery is an investment worth making in an increasingly saturated and competitive online market.

Original article written by Mrudula Kodali for WebCredible on Nov.1 2007 and entitled "E-commerce Imagery: Persuading with Pictures"

About the author
Mru Kodali is crazy about usability - so crazy that she works for Webcredible, an industry leading usability and accessibility consultancy, as a user experience consultant. Mru key specialties are eye tracking research projects and writing for the web.

Mrudula Kodali -
Reference: WebCredible [ Read more ]

Related Articles