How to use images on websites

Images are one of the most powerful elements on your site. If leveraged right, they can add greatly to building your business. But if used wrongly, they can undermine all your hard work.

There are so many benefits and rules for using images. I know it can be quite overwhelming.

So I decided to put the most important ones together and create a simple ‘cheat sheet’ for you on how to use images on websites. You can also download it in a pdf version (and print out or keep on your computer) and refer to it whenever you want.

Main Functions of Images:

Images draw attention (images are the first thing people will notice on your page).

DO’s and DON’Ts For Using Images:

1. The best images for drawing attention are those of food, sex (implied is enough ;p) or human faces. Any moving effect will get extra attention, so consider changing images.

2. Use images to draw attention to your main message: to headlines, certain parts of the text, sign up box or order menu.
To do so, use the images of someone (or something) pointing, looking or leading to the specific part of the page. As eyes naturally fall on an image first, you will create a path for them to follow next. And to make this effect even stronger – use all together. The Quarterly Journal of Experimental Psychology covers the experiments of attentions shifts (based on eye movement) triggered by gaze and arrows in its Eye gaze cannot be ignored (but neither can arrows).

Examples of using elements pointing to a sign up box (www.productlaunchformula.com)

Example of drawing attention to the main part of the page – sign up box – by using an image of a person looking towards it (www.chemistry.com)

3. Another way to draw attention to a particular section of your page is to cover it with image, which (after a few seconds) disappears. Eyes will fall on the image, and will stay there, even when the image is gone.

4. Use captions under images. Make sure, however, that they represent the key messages from your page. A natural flow for eyes is to land on an image and then go directly down. People might not read your headline, but they will always see your captions.

5. Use images of people with the emotions you want to evoke in your audience.
Because of mirror neurons, we have a natural tendency to empathise with others – even if that other is just an image of a person. If you use a picture of a smiling face, your prospect will smile, too. If, on the other hand, you use an image of somebody angry or sad, you will create the same emotions in your prospect.
In most cases, you will want your audience to be in a happy state. This is because when we’re happy, we tend to be more open to trying new things (in this case, your brand/product).
However, you might also want to create a feeling of arousal, as in this state people pay more attention and remember better.

6. Break the text to reach the optimal line length. As people don’t like reading long lines, use design elements (like images) to break it to the right length. Just remember that images need to support your message, so they should be aligned. Don’t just use any images.

7. Showcase your product. It is crucial you show clearly what your product is. Especially when it comes to physical products, you’re competing with offline stores that can offer something you can’t: experience of touching and holding the product.
This is why it’s very important you present your products in as many details as you can. Show images of all the details, zoom in on materials, show all the options and variations.

8. Always use images along with your testimonials. This increases the trust and believability significantly.

9. Add images to the main claims and statements. As above, in this case you are also leveraging the fact that images add credibility. If you are presenting a new concept or want to convince your prospect, studies have shown that by adding an image to your message, you will be more successful.

10. Add an image to your sign up box, representing what people will get if they join.

11. Lastly, use images of yourself and your team. Pack your website with images that prove there are real people behind the product. It builds trust, credibility and connection. This is one of the strongest uses of images you can implement on your website.

1. Don’t overuse pretty stock images. They feel fake and too far from reality. Your audience won’t be able to relate to them. The eyetracking study by Nielsen Norman Group shows how we tend to completely ignore certain images.

2. Don’t use images that have nothing to do with your message. Images must support your message, If they don’t, they will simply distract your audience.

3. Don’t use images that have no other purpose rather than simple decorate your site or fill the space. Images should be used strategically. If not, they may hurt you more than help. Remember, images are powerful at drawing attention. So make sure you don’t draw it to something that is not important or relevant to your site.

And remember to download your free copy of the report: Guidebook to using images online.

Great post. I was checking continuously this weblog and I’m inspired! Very helpful info particularly the closing section :) I take care of such info much. I used to be seeking this certain info for a long time. Thanks and good luck.

I simply want to say I am very new to blogging and site-building and truly savored your web site. Most likely I’m want to bookmark your site . You definitely come with very good stories. Cheers for sharing with us your web page.

I absolutely love your blog and find a lot of your post’s to be just what I’m looking
for. Does one offer guest writers to write content in your case?
I wouldn’t mind publishing a post or elaborating on some of the subjects you write about here. Again, awesome web log!