Blurred images in e-learning

Blurred images

I remember the not-so-good-‘ol days pre-digital cameras when you had to aim really carefully and make sure no one was moving to get a good photograph without any blur. Those days are well and truly over, with happy snaps being taken 24/7, left, right and centre. Blurred pic? No worries, there’s a thousand more where that came from!

In fact, now we use software to blur images on purpose! My 80s self would think the world has gone mad!

How to use blurred images in e-learning

This brings me to the point of this post. In e-learning, we often use background images to provide context or realism but, also often, we put other images and text on top. This can end up looking very busy and difficult for our learner to know where to focus their attention. Enter blurred images. By blurring the image in the background, you can provide that context while making sure that the important stuff stands out.

Blurred background demo

Here is a quick example I created for this week’s e-learning heroes challenge: using blurred backgrounds in e-learning. This demo shows a before and after the blur, as well as an alternative option that produces a similar result.

 

Interactive demo

I decided to expand this a bit more as I really like the look of the blurred city image. I chose six other beautiful city images and set to work.

In this interactive demo, the learner’s job is to identify the city from its blurry image. If they can’t, the image becomes a bit less blurry to help them out. Once identified correctly—or not—the unblurred image reveals itself in all its glory.

Give it a try by clicking Play below. Can you get the job?

Bonus download

If you’re keen to look under the hood, you can download the source file below. All the images are from Pixabay.

How would you use this effect in e-learning? Let me know in the comments below.