Here sharing my experience on recreating the progressive image loading technique in medium page. It’s a feature where first a blurry image of the original large image is loaded, and then transition to the original large image when the original large image loaded completely. Find out the working codepen link here
Draw a tiny version of the original image first on the canvas. Here I used base 64 of the original image for tiny version. Once the original image is downloaded, we will hide the canvas and show the original one. Here is the HTML structure —
<canvas class=”progressiveMedia__canvas” width=”75"
<img class=”progressiveMedia__image” data- src=”originalImageURL”/>
<img class=”progressiveMedia__thumbnail” src=”blurImageURL” />
div with class name
aspect-ratio-fillis used to add
padding-bottom dynamically which corresponds to the aspect ratio of the image. The
div with the class name
progressiveMediahas 3 children, One
canvas and two
img tags. The
img tag with class name
progressiveMedia__thumbnail is always hidden and using the src of this
img tag we draw on the canvas and apply a blur function. Here I used StackBlur‘s blur function for the making the image blur. Once the original image is loaded, we will hide the canvas and show the original image.