That’s why we have created this usability guide for web design images. Since it is so easy to embed an image in a website (even the process of creating your own images is very easy), most websites are filled with them.

There are some very good examples out there on how to deal with images on a website from different points of view, but most of the websites do not showcase positive examples. And while this is not entirely dangerous for a design, it might decrease your chances to sell, in case you have a call-to-action page, or the chances to create good reading flow.

It is more a matter of details than a matter of important principles, but dealing with images should be something designers understand and apply better.

Jakob Nielsen, the expert in webpage usability, together with his company NN/g, did an eye tracking study and concluded it with an article posted on their site, titled Photos as Web Content. Their conclusions amazed the design industry and came with great answers to questions experts weren’t able to answer before this study was done.

“Users pay close attention to photos and other images that contain relevant information, but ignore fluffy pictures used to “jazz up” webpages.” – Jakob Nielsen.

Indeed, users want to see photos on websites, but they want them to be relevant. They would prefer a webpage that doesn’t have visual images rather than a webpage that has lots of photos that just make it heavy and cluttered.

The key in using images on websites, according to the study, is based on a few basic ideas:

  • Image fundamentals – size, composition, quality and exposure are four important things to look for in a good image. People actually look for quality in images, even the contrast makes a huge difference.
  • Effectiveness – if the picture creates excitement or interest, then it works. It is down to three characteristics:
    • Emotional appeal – does the product in the picture look good and make the user want it?
    • Rational appeal – does the image show the benefits of the product?
    • and Brand appeal – does the picture fit your brand?
  • Transmitted message – this is about the image sending the right message to the website readers.
  • Anticipated user response – this is a bit more difficult to put into practice, but the basic idea behind it is that the picture should help decision-making and create a desire for the product. We will talk about this a bit later.

Purely decorative images tend to be ignored unconsciously by our brain. Like a radar, if the images are there only as a filler, the brain will ignore them. The study concluded that pictures and images of real people or real products are automatically categorized as important and are to be studied in detail by the human brain. If you have a personal blog, people would rather see your face than a drawing or a caricature. They want to see the face of the person communicating with them, it is a matter of trust and bonding.

If you own a company, it is a very good idea to take some time talking about the people behind it – using images. It gives a personal touch to an otherwise faceless company and people dig that. People actually want to know (or at least see) who the people are behind a company. If you can afford it, invest in a good photographer and try to stay away from stock pictures (especially from stock pictures that aren’t relevant to your content). It might cost a few bucks, but it will add a lot of value to your company website.

Several eye-tracking study show that the more detail your product images have, the better the results you will have. Yes, studio pictures of a big flat screen TV work just fine, but is just fine good enough for you? People want to see details, show them!

Quality and relevance

Below I will show you some results of different studies. You will see several websites marked with heat zones. The red areas indicate where the users’ eyes were mostly focused, while the blue areas show the exact opposite, indicating what is ignored or a turn-off for visitors.

Adelphia eye-tracking

Eye-tracking study on Adelphia’s website

Besides the fact that it is an incredibly outdated design, you can clearly see that none of the heat zones are on images. It is because all the images embedded in their webpage are purely fillers. Had they been using relevant pictures, the heat zones might have been a bit different, but for now it shows how much of a waste of space images are on their site.

Another good example can be seen below. New York Magazine’s restaurant section has also been part of the eye-tracking study and it shows that even if worldwide known chefs are featured in images, the quality is still important. So even if the pictures are somewhat relevant, low-contrast and small size images are simply ignored. Image quality is as important is the relevance of the image being used. There has to be a balance, where quality and relevance are the two guiding principles.

NYMag, retaurant section

Eye-tracking on NY Mag’s website

Jakob Nielsen and Kara Pernice wrote an article entitled “Images as Obstacles” some years ago. The images above are courtesy of Peachpit and the amazing heads who published the study. Thank you for your tremendous work!

Guiding the user

Not many designers have a degree in psychology, therefore few of us know how the human brain works. The same eye-tracking studies show that our focus can easily be influenced and changed by images. We are obviously talking about high-quality, relevant images, not fillers. In a study called “You look where they look,” James Breeze showed how relevant images can be to the flow of a website.

He made an eye-tracking study on 106 people by using a baby diaper manufacturer’s website as an example. As you can see in the two images below, when the baby faces the visitor, most of the people tend to look at his face. Remarks including “adorable, cute, sweet and little pumpkin” were probably quite popular.

eye-tracking study

Study on a diaper website

However, when the same ad, with the same text, with the same baby, but in a different position is presented to a 106 people, the results are clearly better. Not only do the people focus mostly on the text, but you can also see increased attention to the brand and even to the small text underneath, which is a money-back guarantee disclaimer (quite important for a business, probably one of their selling points – a bummer to miss that).


This shows how much influence a picture can have.

JCDecaux and THiNK worked together a few years ago and came up with this research which confirms the results above: the eyes of the users can indeed be guided towards key messages or elements in the presentation or the ad.

Because many ads feature beautiful models, they tend to be the focus instead of the product. Models, instead of drawing attention towards the product, steal the attention and draw it towards themselves. The study below shows how this can be fixed.

Sunsilk eye tracking

Eye-tracking on Sunsilk product.

In numbers, this research shows even clearer results. On the initial ad (left), there is very little focus on the brand and the product – actually only 6% of the people looked at it. However after the ad was manipulated and tested again, more people looked at it. No less than 84% of the people looked at the product and the brand (even the logo at the bottom) after it was modified. This is a 14X viewer increase, which, in my opinion, is a huge difference.

The right images can help designers guide user’s eyes. If models are used, make them look towards the product image, the logo (brand) or the text. This will increase the product awareness and have the desired effect.

Images Need a Purpose

Images can not only guide the user’s focus, but also explain a lot about the product in just few seconds – better than words could describe it. An extremely well-known example is Square, a smartphone application that allows you to accept credit card payments through your mobile phone or tablet by using a small device.


The product is described in so many ways by a simple image

As you can see in the image above, the visitors understand many things about the product in just a few seconds. After looking at this picture they already know how the card reader attaches to the device, how big it is, what devices it works with (it also works with Android, but it is quite difficult to show that too), how to swipe the credit card and what appears on the screen of the device when the card is swiped. Lots of long, boring paragraphs would have to be written (and obviously read by the visitors) in order to understand this information. Instead, a picture says it all. This is a classic, brilliant example of effective use of images!

Another good example is showed below, how Apple sometimes advertises their MacBook Air product. We all know it’s small, light and beautiful. Well if you didn’t know it, you’ll get the idea in a millisecond by looking at the minimalistic ad below.

macbook air ad

Macbook Air simple, yet effective image advertising

Trust is Key

In case you have an online shop, keep in mind that trust is crucial. Nobody will buy a needle on the internet if they do not trust the seller. The reason why Amazon and eBay are popular is because, besides the fact that they are huge worldwide brands and offer different money-back guarantees, they also have many different security features. Shoppers trust them and they know that if the seller is not going to deliver the product, the company will take care of it. If you own an online shop, make sure clients trust you.

What does this have to do with images? Well it’s simple. Trust can be achieved through images according to a study on landing pages conversion rates made by Paras Chopra.

building trust

Building trust is incredibly important when dealing with online visitors

It was incredible to hear about this online shop selling Brazilian and Caribbean paintings. A slight change meant an increase in their conversion rate of more than 95%, from 8.8 to no less than 17.2. How? Instead of showing thumbnails of the paintings, they showed thumbnails of the artists that made them. The quality of the paintings was never a problem, but the fact that they did not trust the shop was. By simply showing the faces of the artists, visitors realized they were buying from real people like themselves.

Chopra talks about another user who has an online portfolio. By just replacing the contact icon with his own picture, he increased the conversion rate by 45%, from 3.7 to 5.5. His conclusions were that visitors can spot stock photos right away and tend not to believe them. They create an emotional connection with faces they see online.

Width and height

The last technical aspect I want to talk about is the necessity of mentioning the width and height of an image in the HTML markup. The reasoning behind this is simple. A webpage will always load the text first, then the images.

But because of this, until the images are completely loaded, their position is marked with a small, blue question mark thumbnail. While the image is loading, this small thumbnail expands to the full size of the picture, which disrupts the reading flow if users already started reading the text.

By expanding, the thumbnail will also move other elements in the website that the user might be focusing on – and this makes many visitors go bananas.

By declaring the height and width of an image in the HTML markup, you can be sure that the thumbnails (which will still exist), will appear right from the start at the full size of the picture – this means that while the picture is loading, it will just fill up the big thumbnail, instead of expanding it. It is a small detail, but a nice touch.

Width and height to images

However, some people consider this an old technique and with the emergence of mobile browsing, not very effective at all. I tend to agree. Therefore use this only when your framework is responsive and don’t forget to resize the images for different screen resolutions. You don’t want a picture with a width of 700 pixels on a screen 640 pixels wide.

Bottom line

Using images the right way is crucial if you want to have a successful website, especially when your goal is conversion. As you have seen in the examples above, bad images are a turn-off for visitors and they will ignore them. However, if you manage to find the right pictures and insert them in the right places, they can do wonders for you, as they did for some others.

It is also important to keep in mind that images are not always the solution for your website’s problems. Sometimes your website shouldn’t even have any images. Testing is important in this matter. I will put together an article about A/B testing for you in the coming months and will teach you not only how to use it, but more importantly, what to use it for and what you can get out of it. Until then, though, stay tuned for other amazing pieces here on 1WD.

Now it’s your turn to hit the keys. Do you have other usability tips or questions? Have you encountered issues with the matters discussed above? How did you solve them and what were the results? We would love to hear from you.

Written by Christian Vasile

Christian is our UX / UI guy. Writing is also something that he enjoys doing, having collaborated with several online publications over the past 5 years. He likes to think it’s passion, drive and attitude that keep the best of us going.

  • Grant Martin

    A very useful and easy to understand article. Thanks. It may be worth mentioning the importance of creating retina ready versions of your images for mobile devices and tablets. Considering the amount of mobile browsing, delivering a sharp retina ready image for mobile users has to be an important factor?

  • ashish

    this post is really very cool for the product base web site there is main content of the product is the image for show on the web page for the users.

  • Great post, love the use of the heat zones to illustrate effectiveness. I can definitely use these tips for my clients websites.


  • Mark Ford

    Interesting point regarding “filler” images being ignored. I cant stand them myself and prefer blank space. Makes you message easier to see. Some clients insist though!

  • Good Article.
    As mentioned that declare image
    is better than ?
    But all the optimization checklists say that don’t resize images with HTML but resize the original image with image editor.

  • I mostly face this problem of uploading image during my blog posting. But after reading this I got solution for my problem thanks for this great useful information..

  • great stuff :) really, I need to improve my works about this things , thanks :)
    but width, height it’s all method from the begining of coding (but true).
    I wonder if webdesigner should be also a marketer, because sometimes I think he need to be.

  • Nice article christian. I liked the way you explained. I have a doubt regarding the logo’s that we place in our websites. Is it really matter that the logo transparency to catch user attention. Please clarify my doubt. Thanks for the useful article.

  • Thank you for writing about this very interesting area, and for the several data-based suggestions. I do believe, however, that a caveat is in order.

    “Purely decorative images tend to be ignored unconsciously by our brain.”

    This can be extremely good! The issue ultimately isn’t whether an image is ignored or not, it is whether it aids in directing the viewer to the things the advertiser wants attention directed to. A pleasant border sets a tone; although not stared at, it is good, as it gives a feeling of pleasure—what business doesn’t want a potential customer to have a feeling of pleasure when viewing their website? Even white space is an image (in the extreme sense of it not being text), and has long been touted as an important design element. (Remember the early Volkswagon ads?)

    “The study concluded that pictures and images of real people or real products are automatically categorized as important and are to be studied in detail by the human brain.”

    Exactly the same point as above. This is a non-decorative image, so it is not ignored. This does not make it good, nor does it make it bad. It depends upon whether you want the reader looking at it or looking at, say, your text. I could put up a photo that will get lots of “hot spot” eye time—a close-up of heart surgery, for example—but I doubt it will enhance your sales or customer loyalty.

    My point, with the two above comments, is that the “hot spot” technology, while interesting and accurate (I assume), provides little information about what the advertiser is most interested in: The viewer’s reaction to (thoughts and feelings about) the product. Certainly it can indicate absences, such as certain text or images not being attended to very much. But even time-on-target tells us little. For example, looking at a face vs. looking at text. The human brain can process facial information amazingly quickly (you can almost instantly recognize your friend among a crowd of faces), so little time-on-target is needed to get that information, whereas reading text takes time, thus more time-on-target, but that greater “hot spot” data doesn’t tell you what you need to know: The reader’s reaction to the message of that text.

    In short, hot-spot technology can tell you whether viewers are viewing what you want them to (the text or an explanatory image, rather than an eye-catching supermodel), but that leaves a lot still unknown. If the data on follow-through clicks, or sales, were provided, then one would be able to draw conclusions rather than make educated speculation.

  • Lisa

    I definitely will start using the heatmap test. I have looked at sites like crazyegg, but I have never used it, because I wasn’t quite sure what I should look for. Reading through your post has given me the knowledge to try it, I think. It can’t hurt right. Your post also confirmed the fact that the image to the left of the call-to-action text is more powerful. But it went even further…I had no idea that having the model looking at the text would work even better. Definitely going to apply that to my new designs.

    • Christian

      I am very happy this article creates such a “wow effect” for you and I look forward to hear your opinions on my future articles here on 1WD.

  • John Faulds

    Just because decorative images are largely ignored doesn’t mean they don’t serve a purpose and should be eschewed completely. Images help create space in layouts and break up blocks of text so they don’t look so formidable and easier to read.

    Rather than heatmaps of pages which show images not being looked at very much, I think it would be more useful to A/B test pages with and without images to see how well reading comprehension fared with the different versions.

    • Christian

      Well I think you might have understood the point of this article in a wrong way. This article doesn’t try to make designers stop using images – it tries to make them stop using images in a dumb way, only for the sake of using them.

      And not only images can be used for breaking blocks of text – negative space is a great concept that we’ve been talking a lot about here on 1WD and it is a much better way to break paragraphs of content, in my opinion.

  • Tina

    A great article Christian! It’s a big plus to my knowledge on the subject of using images on the web. I used to study this theme for my article which I wrote for Moto blog, but your approach is far deeper:)

  • Alex

    Wow, finally a great article on this blog. I was tired of all the usual low quality content you share here, the same general things you find on any low-quality blog. Not trying to offend, it’s just the truth.

    Great info, Christian, thanks for sharing! Sau bravo. :)

    • Christian

      I am glad you appreciate my article. Why do you think the content here is of low quality?

      • Tim

        Pretty much anything written by James Richman is of low quality and mainly written just for search engine fodder.
        A couple of years ago, before this whole re-design and restructuring of the site and its direction, it offered some truly useful articles rather than just “opinions of professionals”.

        As a note on the article (which I do think is interesting), from the first couple screen shots in the article, it looks like people’s eyes are going right where they should be – to the calls to action on those pages. Unless the website is a portfolio, you don’t want people to sit there looking at images all day. You want them to click a button or link and go further into the site. Possibly even purchase something if it’s an e-commerce site. Those designs are basically doing their job even if they aren’t the best looking sites.

        • James Richman

          Hey Tim

          There are very rare occasions when I get to hear not so nice comments about 1WD, but even those rare occasions like this one counts and matters to me.

          So understanding that comment form might not be spacious enough for some good conversation, please feel free to email me: james[at] to discuss anything you would like.

          Talk To You Soon Tim :)

  • Emilie

    I love the studies with examples and the “how to fix” with SunSilk. Many clients would benefit from seeing this to understand better why generic cheap stock photo will not do the job as opposed to concept-driven images.

  • GARY

    Great article!
    Some years ago we had a project in which we needed to conduct different usability techniques, like focus groups, to test the mockups we were coming up with. It’s very interesting to see how people think different. The best way to build a successful website, specially applications, is to conduct these kind of tests with real people, real users

  • Keane Kwa

    Thanks for the great article. For guiding the user, other than using a human figure’s gaze, are there any other things that work well too?

    • Christian

      Not that I can think of right now. Using images is the best way because visual references are always so powerful. I am sure that if you are able to make this work well, you won’t need another way of trying to guide the human eye.

    • Carolyn

      I found the article very interesting, however for users like me I need it to start
      very basic and gradually elevate to the level presented. I have a very basic
      understanding of web design and the positioning of graphics. Perhaps the
      also embed the opportunity to pass or fail with a demo might be very useful.

      This way the user can-read


      • Christian

        Creating a video about this kind of topic would not be more useful than this article, because I would basically only read what’s written here. This is not coding, where you can create a tutorial, although I understand your point about a video being more powerful and I agree.

        Just because you have very basic understanding of design doesn’t mean you can’t use these tips. If you create a site for a client and you are required to insert images, you can always come back to this article and read some useful tips – and you can show the article to your client and explain your choices.

        It might not look like a very useful article for beginners, but in my opinion it is always a good idea to learn the right way from the start than learn something a wrong way and then try to un-learn it and learn the right way again. So make sure you remember these tips, they might come in handy when you will have more experience with design.

  • mgrabbidj

    Thanks for share this article . It is really helpful post for everybody.

  • blessing

    so what about creating a log of a company which I want to use on a website

    • Christian

      Well it is a bit different with logos. They are rarely considered fillers and the rules for logos are quite different than the ones for content images lile the one above. It is important that you place the logo in one of the key positions (e.g. top left corner).

  • Kagai

    Thanks for the amazing article, as I am redesigning my website many of the pointers mentioned here will go into implementation. I love the square website, very simple but communicating alot. Cheers

  • Rjk

    I have been designing websites for quite a long time , I should say have been lucky to get my sites more or less pleasing the client’s requirements and the work completed. However if I closely analyse from the insight that I gained from this post , its really an eye opener. Thanks a tonne this will surely help me as a check point list for future works. Looking for more great article’s

    • Christian

      Well I am very glad you consider my article an eye-opener, it should also be for many others.

  • Thanks for sharing this information. It’s gonna be a good lesson for my future work.

  • Ken Edmond

    This article is awesome I think its high level approach and explanation to common mistakes many clients and designers make. This is great ammo for talking to upper level management and executives when someone criticizes creative work. If someone ignores the recommendation then there is a point of reference that a solution was offered and ignored.

  • Lucky Balaraman

    VERY informative, especially the part about how a human figure’s gaze in the image directs a viewer to the object of the gaze. Going to remember that one!

    • Christian

      Yes I was amazed myself about that single detail, it is amazing to see how the brain works. But do you think this is manipulating the user?

  • Monica Nielsen

    Thanks for the tips! I look forward to applying the image suggestions in the post to my current website. I am learning many tips from your posts. This is the 1st time commenting and just started following and reading your post about 30 days ago. I do want to let you know you content have been proven to be of great value in a very short time. My turn to say Thank You for making a difference and wish to pass on the same value with my experience that you have passed on to me. Have a remarkable week, I started to flow you on twitter today also. :)

    • Christian

      Hi Monica. It’s great to know 1WD helps you learn a lot about the industry in a very short time. Actually what you have just said to us is a confirmation that we are heading the right way. We want for the next period to focus on beginner designers and helping them find a path to follow in the industry. To know that it actually works is just brilliant! Thank you for your comment!