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.

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.

• javascript
• html
• css

• github./dombrant/blurry-image-load here's a image loading library based on Medium – dantheman Commented Aug 21, 2020 at 7:43
• OMG. That's it. Thanks @dantheman93 – Edson Magombe Commented Aug 21, 2020 at 7:47
• JavaScript is not Java. – chrylis -cautiouslyoptimistic- Commented Aug 21, 2020 at 8:38

3 Answers 3

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./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/npm/[email protected]/dist/lazyload.min.js"></script>

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

You could either use some JS solution for this, as suggested by dantheman93, check out this article on how to recreate it manually, or you could just check out progressive JPGs, as it might be what you are looking for.

No need for CSS or JS. The JPEG image standard has this "progressive" loading built in. As long as you save the image in progressive format. When the browser loads a progressive JPEG, the image is first shown pixelated and then slowly increase in resolution until the full image is loaded. At least that was how browsers worked back when modems over telephone lines were the thing. I don't know how modern browsers handle progressive JPEG images, but you could try and save your image as progressive and see if it works as you expect. Read more here: https://www.hostinger./tutorials/website/improving-website-performance-using-progressive-jpeg-images