Thinking about the way of loading picture by Medium

Image for post
Image for post

Interesting phenomenon I found

Every user of Medium must have already found a interesting phenomenon: Medium has used a new way for loading picture and this way of loading seems pretty cool. I mean, compared with the traditional way of loading, displaying a blank area before completed loading picture, Medium show user a blurry picture of the origin picture when the origin pic is still loading.

So, How to release this way of loading technically by Medium?

Image for post
Image for post

By this picture above, we can easily found the root reason. When Medium is going to show user a picture, it does four things as follow:

  1. Load a very small pic before loading the real pic
  2. Blur this small pic in user client with javascript, just like the first pic in this post
  3. Continue load the real pic, which always is a big pic with high quality
  4. Once the real pic is loaded, Replace the blurry pic with this one

Here are these two pics:

Image for post
Image for post
Image for post
Image for post

Conclusion

Ok, until now, We can see this is not a very different way to release from the point of technology. But, just this small step forward of change, It makes user have better experience and gives them much more reasons to love Medium. So, bright your mind, Try something new!

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store