Three ways to progressive images loading
The first time I knew the Medium was three years ago. I was amazed when I saw their progressive loading effect.
Recently, I have often found information in Medium, which reminds me of the technology they have.
After three years, I probably know how Medium achieves progressive images effects, and I found an article that introduced progressive images loading:
There are 3 ways to progressive loading images:
- Lazy Loading: Delay loading of images in long web pages. Images outside of viewport won’t be loaded before user scrolls to them.
- Facebook’s 200 bytes Technique
What’s even more amazing is that the article tested the two methods of lazy load and medium progressive image loading. The loading speed of medium is faster.
Three steps of Medium Progressive Images Loading
Medium Progressive Images Loading looks complicated, but if we think a while, it’s simple, just three steps:
- We save another image that width is less than 10px and has a quality down to 10%. Then use the image to replace the src of the img.
- We create a function about listening to window scrolling. When user scroll to the image block, function will replaces it with the original image. In this post, I will use a plugin: waypoints.
- After loading the original image, we set its opacity to 0 and then append it to the placeholder. Then use setTimout 50ms and change opacity to 1, which gives the image a fade in + fade out effect.
This is the three steps I thought of, and we’ll move on to the code part.
HTML / CSS
Low-quality image, I use photoshop to deal with it.
But how do we make the low-quality image can fill div? I use a CSS feature:
In short, when both units of padding-top and padding-bottom are %, then it refers to the width of the div instead of height.
For example, the Bootstrap Responsive Embed is use this feature to make iframe RWD.
The following is the html of image block div:
Here is the SASS that I let the background-image fill the div:
Because the background-image is directly inline html, so I only deal with size and postion.
It is important to note that height should be set to 0.
16:9, 4:3, both them are computed by (9/16) * 100, (3/4) * 100. If your image out of those sizes, use js to get the width and height of the div and mathematically calculate: (height/width) * 100.
First, I deal width free size images which means it doesn’t belong to 16:9 || 4:3. But we need back-end IT to render the width and height of image to data-width and data-height.
Second, I use waypoint to listen to each image scrolled to the window.
To prevent the image trigger function every time when user scrolling, it will be canceled by adding destroy() at the end.
Third, I create a image object, and then apped it to div.
The source code I published on Github:
Demo page is here:
Test page loading time
I tested the page load time with pindom and found it to be really fast.
This result is not use any lazy load speed, 4.57s:
This result is using progressive image loading, down to 2.02s:
Finally, we know that progressive image loading helps speed up page loading and further improve SEO.
If you find this article helpful, please click on the helpful button made by myself. If you are willing to share on the social, that’s even better.