Can poor image quality have a negative effect on user experience even though it improves the website's performance?

Question

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?

Answer 1

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.

Answer 2

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.