以渐进方式渲染渐进图像

Question

我已经使用 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>

Answer 1

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

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

Here is an article on how Medium does this.

此外，lazysizes might come in handy. Here is an example usage of lazysizes。如果您检查此页面上的网络选项卡，您实际上可以看到同时请求了两个不同尺寸的同一图像。

Answer 2

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

您的渐进式图像正在按照您预期的方式加载，初始图像分辨率较低，随后逐渐加载更多细节。第一遍逐行加载，因此表现得像基线图像。

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

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

如果您需要完整尺寸的图像供用户打印或用于其他目的，您可以随时在页面上添加一个单独的 link 以及对文件大小的警告。

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

Answer 3

你需要有两张图片

大尺寸图片
小图

你需要放

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

以渐进方式渲染渐进图像

To render the Progressive Image in Progressive manner

javascript

html

node.js

frontend

graphicsmagick