以渐进方式渲染渐进式图像答案

【问题标题】：To render the Progressive Image in Progressive manner以渐进方式渲染渐进式图像
【发布时间】：2019-09-27 01:48:52
【问题描述】：

我已使用Node GM 将上传的图像在后端转换为渐进式并存储在文件中。之后，我想在前端展示转换后的渐进式图像。我的问题是当我渲染该图像时，它会逐行渲染。但与普通图像相比，这些渐进式图像首先加载。

但我想将图像从模糊加载到正常。我该怎么做？

在前端，我用这样的 HTML 编写了代码。

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

【问题讨论】：

第 1 步：不要使用 Dropbox 作为您的资产托管方。这根本不是它的用途。甚至从您的项目 github.com 存储库中免费托管 github.io 也是一个更好的选择。

标签： javascript html node.js frontend graphicsmagick

【解决方案1】：

起初我不明白为什么这似乎是作为基准图像加载的，但使用 Chrome 的开发人员工具、放大和限制连接向我展示了发生了什么。

您的渐进式图像正在以您期望的方式加载，最初是低分辨率图像，然后是逐渐增加的细节。第一次通过逐行加载，因此表现得像基线图像。

问题在于图像太大，超过 5000 像素宽，以至于在下载初始图像后，它会在浏览器中调整大小，以至于图像质量没有明显改善。

为了使模糊到清晰的效果变得明显，图像的像素尺寸需要小得多。如果它被嵌入到网页上，请将其调整为您希望查看的最大尺寸，因此在 1920 宽屏幕上屏幕宽度的 50% 时，您需要将其调整为 960 像素。现在文件大小也会更小，图像下载速度也会更快，所以除非你的连接速度很慢，否则 jpeg 正在逐步加载可能并不明显。

如果您需要用户可以使用完整尺寸的图像进行打印或其他用途，那么您可以随时在页面上添加单独的链接以及文件大小警告。

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

【讨论】：

【解决方案2】：

你需要有两张图片

大尺寸图片
小图

你需要放

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

然后做

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';
})

【讨论】：

【解决方案3】：

我认为不可能实现您的要求。请求静态文件时，响应将以线性方式（逐个像素，从左到右，从上到下）发送。为了实现您想要的风格，您必须控制图像如何流式传输到客户端。因此，仅托管一个静态文件是不可能实现这一点的。

但是，可以通过托管图像的多个副本（各种分辨率）并一个接一个地加载所有这些文件来模拟这种效果。

Here is an article on how Medium does this.

另外，lazysizes 可能会派上用场。 Here is an example usage of lazysizes。如果您检查此页面上的网络选项卡，您实际上可以看到同时请求两个不同尺寸的同一图像。

【讨论】：

不，我不想生效。因为在生效后，正常和渐进图像需要相同的时间来渲染。在没有效果的情况下，渐进式图像与普通图像相比渲染速度更快。
如果是这种情况，您是否可以添加一个占位符图像（纯白色或黑色），以使效果看起来像是先渲染普通图像，然后再完全渲染您的这些渐进图像？跨度>