1

I'm currently working on an image slider for mobile and desktop devices. The content of the slider depends on what the user uploads. In some cases users may upload large images (several MBs). These take longer to load in the slider.

What's the best way to handle the longer loading time of large images?

I'm thinking of a few options:

  • Don't change anything for longer loading times.

enter image description here

  • Show the thumbnail until the large image is loaded. This will result in a low-res pixelated view of the image that will be replaced with the high-res version of the image. This looks like the image is being 'built' (looks cool!)

enter image description here

  • Empty state solution, example; Facebook iOS app shows symbols of the things it is loading.

enter image description here

  • Show a progress bar to indicate there's an image loading.

enter image description here

Some other options:

  • Limit the maximum upload size( in MBs) to prevent large images.
  • Edit images ourselves after users have uploaded them.

My pick would be the thumbnail option, with progress bar. I was wondering if there's any research about what's best here or what your personal experience is. Thanks!

Improve this question

1 Answer 1

Reset to default
2

You can also have a look at how Medium is handling progressive image loading. They first load a small blurry image and then transition to the large image. Here's a detailed article about it - How Medium does progressive image loading

I would also prefer using interface skeletons (the Facebook example). As Luke pointed out in his article, this creates the sense that things are happening immediately as information is incrementally displayed on the screen.

Improve this answer
2
  • Thanks! I'm going for the Medium blurred solution since I feel interface skeletons are better for more complex interfaces. All I'm showing is an image. Having the blurred version already visible looks beter in my opinion.
    – Nick Groeneveld
    Apr 20, 2017 at 11:39
  • Ya. It makes sense for a gallery. Glad that the answer helped you. :)
    – Adit Gupta
    Apr 20, 2017 at 11:42

Your Answer

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

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