9

I have converted the uploaded image into progressive in backend using Node GM and stored in the file. After that, I want to show that converted progressive images in front-end. My problem is when I rendered that image its getting rendered line by line. But compared to normal image these progressive images are loading first.

But I want to load that images from blur to normal. How can I do this?

In the frontend, I have written the code using HTML like this.

<html>
<head></head>

<body>
    <h1>Hello</h1>
    <img style="width:50%" src="https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1" />
    <img style="width:30%" src="https://www.dropbox.com/s/3nnc03tfwxrpu5q/Porsche-GT2-4K-UHD-Wallpaper.jpg?raw=1" />
</body>

</html>
Martin Schneider
  • 14,263
  • 7
  • 55
  • 58
Bandana Sahu
  • 284
  • 2
  • 10
  • 1
    Step 1: don't use dropbox as your asset host. That is not what it's for in the slightest. Even free github.io hosting from your projects github.com repository would be a better alternative. – Mike 'Pomax' Kamermans May 13 '19 at 04:28

3 Answers3

2

At first I couldn't understand why this seemed to be loading in as a baseline image but using Chrome's developer tools, zooming in and throttling the connection showed me what was going on.

Your progressive image is loading in the way you expect, with an initial low resolution image, followed by progressively more detail. The first pass loads in line by line and therefore behaves like a baseline image.

The problem is that the image is so huge, at over 5000 pixels wide, that it's being resized in the browser to the extent that there's no visible improvement in picture quality after the initial image has been downloaded.

In order for the blurred-to-sharp effect to be noticeable, the image would need to be much smaller in pixel dimensions. If it's being embedded on a web page, resize it to the largest size you'd expect it to be viewed at, so at 50% of screen width on a 1920 wide screen, you would want to resize to 960 pixels across. Now the file size will also be much smaller and the image will download faster, so unless you are on a very slow connection it still might not be obvious that the jpeg is loading progressively.

If you need the full size image available to users for printing or some other purpose, then you can always add a separate link on the page along with a warning on the file size.

Eg. <a href="https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1">Print quality image (11.1 MB)</a>

Andrew Paul
  • 162
  • 9
1

You need to have two images

  1. Big sized image
  2. Small image

You need put

<img id="image" style="width:100%, height: auto; filter: blur(5px); transition: 1s filter linear;" src="small image source" />

then do 

fetch('big image source').then((response) => response.blob()).then((blob) => {
   let img = document.querySelector('#image');
   img.onload = () => URL.revokeObjectUrl(img.src)
   img.src = URL.createObjectUrl(blob)
   img.style.filter = 'none';
})
Alex Nikulin
  • 8,194
  • 4
  • 35
  • 37
0

I don't think it is possible to achieve whatever you are asking. While requesting for a static file, the response will be a stream which is sent in a linear manner (pixel by pixel, left to right, top to bottom). To achieve your desired style, you have to control how image is being streamed to the client. So, it is not possible to achieve this by just hosting a single static file.

But, can simulate this effect by hosting multiple copies of your image (of various resolutions) and load all those files one after the other.

Here is an article on how Medium does this.

Also, lazysizes might come in handy. Here is an example usage of lazysizes. If you inspect the network tab on this page, you can actually see two different sizes of same image being requested simultaneously.

mbhargav294
  • 389
  • 1
  • 3
  • 15
  • No i don't want to put effect. Because after putting effect the normal and progressive image is taking same time to render. Without effect the progressive image renders fast compared to normal image. – Bandana Sahu May 13 '19 at 05:52
  • If that's the case, can you just add a placeholder image (solid white or black) so that the effect seems like normal images render first and then these progressive images of yours gets completely rendered later? – mbhargav294 May 13 '19 at 15:39