Thinking about the way of loading picture by Medium

wingjay
wingjay
Nov 11, 2015 · 2 min read

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?

html element of this page.

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:

small pic
real pic

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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade