How to load an image from low to high resolution?

Question

I would like to know how is it possible! Load and image from low to high resolution using web client languagens (CSS, JS).

I've been looking at Medium

This is the low resolution

This is the high resolution

Thanks.

Answer 1

So how does it work?

Well you need 2 images. 1 with super low quality and your normal image.

You set the low quality on src and lazy load the other image.

Thats all the magic behind it.

Initialy you set filter: blur(5px) on the image and when its done with loading the high quality image you unset the blurr.

A good library for lazyload is the https://github.com/verlok/vanilla-lazyload

Note here: You need to throttle the network speed. You can do it with google chrome by pressing F12, go to Network ans select Slow 3G then start the code snippet

The image gets cached so it loads out of the cache. you will need to clear the cache before you run the snippet to see the transition.

var lazyLoadInstance = new LazyLoad({
  callback_loaded: (el) => {
     el.style.setProperty("filter", "none")
  }
});

img {
   filter: blur(5px);
   transition: filter 200ms;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

<img class="lazy" src="https://blogxon.com/5f1492591d873e4284aacdce/thumbnails/placeholder/1597094737252.jpeg" data-src="https://blogxon.com/5f1492591d873e4284aacdce/thumbnails/1597094737252.jpeg" />