StackExchange logo

Modern Image Loading Best Practices (Via StackExchange.com)

Why answer StackExchange questions?

I’m a firm believer that you need to do something each day to build your skill set. Like so many other technology professionals, one of my favorite proving grounds is StackExchange.com.  I’ve long used the site to hone my front end development skills, but in the past year or so I’ve spent some time becoming a more active user on the UX Stack Exchange community.

These days, I try to drop by and answer a question there every day.  I do this for a few reasons.  Most importantly, answering questions allows me to tackle practical UX problems on a daily basis– problems that I am likely to encounter in the real world at some point in time.  It’s also a great way to meet other UXers, to build the community’s overall skills, and correct errors in assumptions or logic on my end.

Today a good question popped up, and I took a stab at answering it.

Spinner vs Blurry for image loading in 2017?

Q: My client is a photographer, his website contains 3 types of images:

1)Homepage Full screen background gallery images

2)Gallery slider images

3)Blog posts with images

I can’t decide which option to choose for each one.

When it comes to enjoying the experience of watching photos, is it ok to use the spinner?

Or should I blur them while they are loading?

A: Due to its perception of fast load speed and ability to give users content to focus on while waiting, use the ‘blurry loading’ technique on pages with multiple large images.

Much has been written about the need to load page content quickly, with some studies showing that even an extra half second delay can lead to a 20% increase in page abandonment.

The purpose of any loading progress indicator, whether a simple spinner or a more complex system, is to give feedback that the page is, in fact, loading, thus reducing the user’s perception of time passed and giving them a reason to wait. For this reason, however, progress indicators have come to have a negative connotation as users correlate their appearance with a lack of overall site speed.

Conversely, the blurry image approach is meant to give the impression of speed in loading without actually increasing page load time. Especially on pages with multiple large images, this approach works because it gives users content to focus on while waiting for other content to load. It provides faux speed to the user by giving the impression of faster loading without necessarily delivering extra speed.

It’s worth noting that there are several different implementations of the blurry image approach, each with its own load time and usage considerations.

Pectoralis Major’s points on the utility of lazy loading and the necessity of using a consistent approach across pages are well-founded, and should be adhered to if at all possible.

Leave a Reply

Your email address will not be published. Required fields are marked *