Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Can poor image quality have a negative effect on user experience though it improves the website's performance? We use 3 type of images on our website:

  • Icons, logo, bullets
  • Stock photos like real people, nature, product images etc.
  • CSS repeated or non-repeated background images

Optimizing images for performance is considered best practice; most of the time we do that. I often get confused as to how much compression I should use.

My questions are: can reducing an image's quality in order to reduce file size negatively impact the user's experience? Do users expect sharp, clear images? And how important are high-quality images to users?

share|improve this question
    
Look at the Retina iPad; I think it's pretty clear that people can care a great deal about clarity. Heck, my biggest complaint about Google Currents on iPad is the "cover" images for stories are terrible JPEG artifact nightmares –  Ben Brocka Jul 27 '12 at 11:30
    
@BenBrocka - But retina images can make the site more slower. am i right? Personally I would prefer a fast website over hi-graphics but slow site. And I think we cannot be sure that people with retina devices will always has Hi-Speed internet –  Jitendra Vyas Jul 27 '12 at 11:31
    
@dhmholley- Thanks for edit. My English is not good –  Jitendra Vyas Jul 27 '12 at 11:38
1  
It probably depends on the website. If its a photo sharing website then undoubtably image quality is important, but of its a news article then page load speed is more important. There will be a balance between the two depending on the type of site. What type of site is yours? –  JonW Jul 27 '12 at 12:05
    
True; I've heard there's some ways to have low res images and then load in high res images after page load though. Hard to tell which images matter though. I'd prioritize interface elements and content images (think news photos) over fluff like stock photos –  Ben Brocka Jul 27 '12 at 13:44

2 Answers 2

up vote 2 down vote accepted

Yes,for the following reasons

  • If I see a site with poor quality or squashed or even stretched images, unless the site has a strong brand name behind it,I would seriously doubt the quality of the brand since they dont seem interested in presenting a positive front with poor quality images.
  • Secondly if the site does have good content but poor quality images, there is signification scope for me to be distracted by the images (as visuals stand out more than content) degrading my user experience.
  • If I go to a product site or a e-commerce site which provides me a poor quality images of the product which its trying to sell me,my confidence is naturally reduced and I would hesitate to buy it.

E.g. I recently wanted to buy a laptop hard drive container and was struggling to find one in my city. I did eventually find an online retailer who sold it but the quality of the image he had put on the site was so vague that I was doubtful about when the product was real or a sham and did not make the purchase

I recommend looking at this excellent discussion about image quality and how it affects conversion

To summarize what the article says with regards to the importance of having a high quality image:

This is important because your goal is to provide enough information to users that they can evaluate/compare the product and make a purchasing decision. If the fine details of a product are important to the user but they can’t make them out there’s a good chance they’ll leave your website and look elsewhere.

This article How To Choose Images For Your Website also highlights some key points:

  1. Low quality images are not only unpleasant to view, they also leave an impression of an amateur operation, and that’s the last thing you want people to associate with your website.

  2. Images are not only a pretty topping. They are a marketing tool, they enrich the site’s content, and they create confidence for the visitors that your site is not a hoax.

share|improve this answer
    
-thx for ur answer and good refrences –  Jitendra Vyas Jul 28 '12 at 15:10

It is a very good question, actually. And yet, how you formed your question the answer is very clear: can poor image quality have a negative effect on user experience? -> absolutely, it can!

Sure, so the question is: what to do about it? What are good ways to have a good website performance as well as good image quality?

Some tips:

  • you can and should use higher quality graphics for retina displays in my opinion, and know that those graphics (if you implement them the right way) will only be used for devices with retina display. Devices with "normal" displays will continue to use the other graphics. So, you need to provide two resolutions for each image.

  • yes it is true that devices with retina display will not always have a fast internet connection, as it is true for devices without retina display. But, first this will change in future as there will be many more services and features available so it is just a question of time. If you look into the future, do not worry about it too much.

Secondly, for users with slow internet connections your site will not be the only one that takes a lot of time to load. This should not be an excuse, but what I mean is that it is similar with users using old web browsers - they are in the minority and do not expect your site to be different from any other.

And finally, yes till now only the iPhone and iPad had retina displays, however now the first MacBook Pro with retina display has been launched by Apple and you can expect that somewhen in the future also the laptop lines and desktop computers will have higher resolutions.

What are best practices and solutions?

  • use as little images as possible! For anything related to the layout, do not use images at all if you can. This is easier than ever with CSS3. Example: I've heard (never checked actually) that the menu at the top on www.apple.com is only CSS-based. So, a lot is possible nowadays.

  • know how to compress images in the right way! Read about the difference between JPEG, JPEG 2000, GIF and PNG. Good image editing programs can compress images very well without reducing the quality a lot. Very easy - think about sites like facebook or flickr, they have to deal with millions of photos and many photos on one page - so it IS possible.

  • to perfection user experience: you can preload images. Google does this without you knowing, if you e.g. enter a search term it already starts preloading images of the first listed results.

  • and nevertheless: think of which photos are really necessary to be displayed as well as the resolution. Also, when loading the site, does loading images stop from loading the layout? Try to first load the layout and then the images.

Altogether there are often many other things you could improve before it comes to reducing image size. Often people focus on reducing image size on webpages without knowing that actually third-party plugins like facebook's social plugins slow down the site much much more than any image would do.

share|improve this answer
1  
Actually the Apple.com menu at the top embed a picture (53KB): images.apple.com/global/nav/images/globalnav_text.svg –  Florent Paillot Jul 27 '12 at 16:02
    
+1 for good answer –  Jitendra Vyas Jul 28 '12 at 12:07
    
@Kwiz: just checked myself, actually it is CSS based, but with a fallback image for cross-browser support... –  Chris Aug 1 '12 at 21:38
    
@Chris: OK, but when you say "the menu at the top on www.apple.com is only CSS-based" you mean than only CSS is involved in the graphic design, no pictures, isn't? But here a picture is involved so it has to be downloaded by the client before the menu can be used. –  Florent Paillot Aug 5 '12 at 6:49
    
@Kwiz: sorry, my fault... you are right, there is a png image involved. Don't know why I did not see it when I looked at the menu first and where and why I read that no img was involved... however, the png image is just for this glance effect and it still looks very nice without it. So, nevertheless, the point was, using CSS(3) wherever possible could help reduce the use of images and improve loading time dramatically... –  Chris Aug 5 '12 at 10:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.