以渐进方式渲染渐进式图像
Posted
技术标签:
【中文标题】以渐进方式渲染渐进式图像【英文标题】：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 也是一个更好的选择。 【参考方案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。如果您检查此页面上的网络选项卡，您实际上可以看到同时请求两个不同尺寸的同一图像。
【讨论】：
不，我不想生效。因为在生效后，正常和渐进图像需要相同的时间来渲染。在没有效果的情况下，渐进式图像与普通图像相比渲染速度更快。 如果是这种情况，您是否可以添加一个占位符图像（纯白色或黑色），以使效果看起来像是先渲染普通图像，然后再完全渲染您的这些渐进图像？跨度>以上是关于以渐进方式渲染渐进式图像的主要内容，如果未能解决你的问题，请参考以下文章