Progressive Image Loading — Like in Medium

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

Before loading
After loading

Logic:-

<section class=”wrapper”>
<div class=”aspect-ratio-fill”>
<div class=”progressiveMedia”>
<canvas class=”progressiveMedia__canvas” width=”75"
height=”38.671875"></canvas>
<img class=”progressiveMedia__image” data- src=”originalImageURL”/>
<img class=”progressiveMedia__thumbnail” src=”blurImageURL” />
</div>
</div>
</section>

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 nameprogressiveMedia__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.

Ref: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Happy Reading!

A <>er

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