Search code examples
javascripthtmlnode.jsfrontendgraphicsmagick

To render the Progressive Image in Progressive manner

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>
Solution

  • 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>