2

Recently, there has been an influx of data showing that sites improving the site performance saw a lift in conversion.

For example, an in-house Walmart.com study found that, for every one second of load time improvement, the site experienced up to a 2% increase in conversions. For every 100 milliseconds of improvement, incremental revenues grew by up to 1%. And in another study about the impact of page delay on ecommerce metrics, Radware, found that a mere one-second HTML delay resulted in the following penalties for an ecommerce client:

3.5% decrease in conversion rate, 2.1% drop in cart size, 9.4% fewer page views, and 8.3% increase in bounce rate.

Our e-commerce site is largely dependent on our product imagery and promotional content. Creative understands these metrics, but also is hesitant to over compress an image.

Have there been any studies on where the point of diminishing returns is on image compression? At what point does image compression stop having a positive impact on user experience, and become neutral or negative?

Improve this question
1
  • 1
    A principle of good UX must surely be to not leave people waiting for things although I'm not aware of any studies looking at it from the perspective of 'compression effects on conversion' and I'd imagine there can't be much out there. There are so many factors at play with loading times e.g. scripts, server/hosting services etc and images are just part of the problem. As far as compression itself goes, it's not necessarily always detrimental to UX, image quality and loading. See this link to a great article on compression: netvlies.nl/blog/design-interactie/retina-revolution
    – Chris
    Commented Mar 31, 2015 at 14:47

1 Answer 1

Reset to default
3

Generally, pick speed over image quality. But if you're willing to invest, you may be able to get both.

The tradeoff here is image quality vs load time, and I don't think studies are going to help you particularly because the results really depend on how your site uses images. For example, if you are displaying products in a grid, users tend to be much more forgiving of poor images than if you're displaying one product at a time in a feature.

Practically speaking, getting to an optimal solution here is actually not about theoretical compression/quality tradeoffs, but about how much you are willing to invest. Here's why:

  • For some background on compression levels and usability choices, Google has a nice writeup for web developers.
  • Lazy loading can help speed up perceived page loads a lot. This can allow you to speed up loading without compromising image quality. Delay loading offscreen images, or use HTML sized placeholders to load the page then load images into them (Facebook approach). There are quite a few approaches here, but they all require some investment to implement.
  • Good interaction architecture can help reduce a site's dependence on image quality (e.g. thumbnails with hover-over or popup detail). This also can get expensive to retool.
  • Testing is the most effective and ultimately best way to figure this out. Plot out load times vs image quality, then user response over the curve....the optimal solution should present itself pretty clearly. Again, this requires time and effort.
Improve this answer
2
  • Don't forget the option of loading a low red image quickly, then replacing it with a high tea image when it's loaded. That is a little bit different than progressive resolution since the page will be "loaded and ready" as soon as the low res images are up. I don't believe there is a fully automated ("easy") way to do this yet but a bit of clever scripting will do it.
    – Floris
    Commented Apr 2, 2015 at 11:51
  • Very good answer!
    – Kristiyan Lukanov
    Commented Mar 16, 2016 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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