<img/> 元素的 HTML 和显示答案

【问题标题】：HTML and displaying of <img/> element<img/> 元素的 HTML 和显示
【发布时间】：2013-03-18 16:37:10
【问题描述】：

我正在尝试了解网络是否允许查看 渐进式 JPEG。

假设我们有一个服务器（见progressive jpegs）：

$ identify /var/www/test.jpg
/var/www/test.jpg JPEG 2048x1080 2048x1080+0+0 8-bit DirectClass 129KB 0.020u 0:00.019
$ identify -verbose /var/www/test.jpg | grep Inter
  Interlace: JPEG

现在如果我们放置以下 HTML 文档：

$ cat /var/www/test.html
<!DOCTYPE html>
<html>
<head><title>jpg test</title></head>
<body>
<p><img src="test.jpg" width="256" height="128"></p>
</body>
</html>

我试图了解（根据img element）是否需要用户代理来下载整个 2048x1080 图像，而渲染区域仅为256x128。

或者相反一个User Agent，被允许考虑渲染区域：256x128，因此推断它只能处理progressive的一部分> JPEG。知道拥有全分辨率没有意义，因为它不会为图像添加任何细节（从技术上讲，即使在低分辨率下，质量层也会产生影响，这只是为了简化）。

通常，我想知道在诸如谷歌地图之类的应用程序中，用户代理是否可以中止（暂停？）当前显示的图像的检索，因为用户决定再放大一些仅基于解压缩 渐进式 JPEG 的部分结果（整个 JPEG 尚未在用户端）。

更新：事实证明，网络正在尝试一种不同的方法，使用 HTML 中的 loading 属性：

<img src="example.jpg" loading="lazy" alt="example" />

【问题讨论】：

澄清一下，您是在询问是否允许 Web 浏览器过早地中止渲染/下载高分辨率图像，因为它有足够的渐进式 JPEG 以它的分辨率显示图像-标签指定？
正确。或者更笼统地说“什么时候允许网络浏览器中止下载 img src ？”
我怀疑任何当前的浏览器在具有足够分辨率时都会中止下载，但您的问题对浏览器开发人员来说是一个很好的激励。也许有人首先实现了您的问题所建议的内容，然后为您提供了该特定浏览器的答案 :-) 还要考虑不下载完整图像可能有缺点，因为您可能会丢失可能作为优化的预加载。
现在我想起来了，如果我是一个超级优秀的浏览器开发者，有很多时间，我想我会在分辨率足够的时候暂停下载，而不是中止它
...等有足够的带宽再恢复

标签： html web-applications jpeg w3c

【解决方案1】：

在网站中使用渐进式 JPEG 的想法与节省带宽的关系不大，而与更早向最终用户展示内容有关。无论如何，浏览器仍会下载完整的图像，但渐进式 JPEG 允许用户看到更早发生的事情。

JPEG 上的W3 page 是这样说的：

渐进式 JPEG 是一种对信息进行重新排序的方法，以便在仅下载一小部分后，呈现整个图像的模糊视图，而不是一小部分的清晰视图。

因为包含 IMG 标记通常意味着您希望浏览器下载该资产，它不会仅仅因为确定它已下载“足够”而中途终止它。浏览器也不知道您稍后打算如何处理图像 - 也许您稍后会放大它，或者它可能需要稍后以不同的尺寸显示它。部分下载一次意味着浏览器可能需要稍后再次下载。

JPEG 上的Wikipedia article 指出：

但是，渐进式 JPEG 并没有得到广泛支持，[需要引用]，甚至某些支持它们的软件（例如 Windows 7 之前的 Internet Explorer 版本）[12] 仅在完全下载后才显示图像。

因此，即使某些浏览器在下载“足够”后确实中止了这些连接，也没有足够的浏览器为我提供支持，甚至一开始就考虑使用它们。

【讨论】：

我的问题是关于标准允许什么，而不是关于哪个特定实现被破坏了......

【解决方案2】：

简短的回答是没有标准方法可以在不离开或中止页面或更改标签的 src 的情况下中止 img（渐进式或其他方式）（这将删除部分图像）。我也不知道有什么黑客可以做到这一点。

虽然这听起来像是一个不错的功能，但在以下常见情况下，现有网站会出现问题：

使用大型渐进式图像作为缩略图 + 预加载的图库（即 Galleria 执行此操作）
任何依赖图像的 onload 事件的网站（如果您的半渲染图像可以中止/暂停，在什么时候会被视为“加载”）？

仅出于这些原因，除非将其作为属性添加到规范中（例如已弃用的lowsrc 属性或您明确要求此行为的某种allowpartial 属性），否则这将是一个坏主意。作为关注 WHATWG 讨论的人，我可以告诉你它几乎肯定会被彻底拒绝，原因很简单，它增加了解决边缘问题的复杂性。如果确实需要此功能，那么几年前宽带几乎普及之前就会有需求。在游戏的这一点上，巧妙地使用 Javascript 和/或缩略图基本上是多余的。

【讨论】：

人们通过使用缩略图来增加复杂性这一事实清楚地表明缺少某些东西。你是说标准是这样写的：所以你阻止人们使用渐进式 JPEG、JPEG-XR 和/或 JPEG 2000，对吧？
我并不是说该标准会阻止您使用渐进式图像，我是说它不允许渲染器根据一些关于“足够”的任意视觉决定来停止下载图像”。如果您要求它，您可能必须提供一个更有说服力的用例。您的问题是“何时允许浏览器停止下载图像？”，答案是“当您离开/中止页面时”。你们其余的问题基本上是一个建议，我非常怀疑它是否会像你所说的那样被接受。

【解决方案3】：

刚刚在以下位置发现了相关提案：

和一个框架：

https://developers.google.com/speed/pagespeed/module/filter-image-optimize#JpegRecompressionQualityForSmallScreens

【讨论】：

【解决方案4】：

据我了解您的问题，答案很大程度上取决于您要支持的浏览器。

可以使用“Firebug”等 3rd 方插件轻松检查浏览器行为。这些插件可以显示页面创建的进度、请求的内容以及发送到服务器和从服务器发送的字节数。在 Firebug 中，它可以在“网络”选项卡中看到。

【讨论】：

不，我的问题不是关于 a 的具体实现，而是标准要求/建议/允许的内容。