什么是替代低质量图片的最佳选择？

Question

什么是替代低质量图片的最佳选择？

javascripthtmlcss

23

我想在img标签中使用lowsrc来显示较小分辨率的图像（更快），而加载较大分辨率的图像时则显示较大分辨率图像。

我的大分辨率图像大小为800KB，低分辨率版本大小为50KB。

由于lowsrc已被弃用，许多浏览器显然不支持它，因此我正在寻找一种能做同样事情的解决方案，最好只需尽可能少的代码。

是否有一个良好的替代lowsrc的方法？

- Bill Noble

4

请使用低分辨率图像作为源文件，并在加载时替换源文件。 - Jamiec

3个回答

6

W3C推荐HTML5规范列出了过时的、不符合标准的特性，包括lowsrc属性。其建议是制作一个渐进式JPEG图像，其第一扫描具有与50 kB图像相同级别的空间细节，并且后续扫描填充完整的800 kB图像的额外细节。这种机制可能需要用户代理使用HTTP范围请求来确定相对于显示图像的大小检索多少数据，就像它们使用范围请求来查找audio或video元素的源一样。

- Damian Yerrick

1

我有两种（未来可能三种）解决方案：

纯CSS。只适用于所有加载的图像只有一个占位符图像的情况。只需为具有 [lowsrc] 属性的图像包含背景，并指定一些最小高度即可。
使用JS设置背景。参见 http://codepen.io/anon/pen/yyQdYJ 并正确设置 <body onload>。
未来。目前不起作用（2015年）。类似于＃2，但使用 attr() CSS function，可以将背景设置为 [lowsrc] 的值。

所有这些解决方案都适用于背景，这不允许根据其背景的高度指定图像的正确高度。

// Not working yet
img[lowsrc] {
  width: 100%;
  min-height: 10em;
  background-image: attr(lowsrc);
}

他们本来可以让 [lowsrc] 继续工作 :-/

- Slawa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Gray · Accepted Answer

<img src="lowres.jpg" onLoad="this.src='highres.jpg'" width="?" height="?">

根据评论区的 @Ultimater 提供，这个备选版本似乎可以防止 Firefox 中的无限请求循环：

<img src="lowres.jpg" onLoad="this.src='highres.jpg';this.onload=new Function();" width="?" height="?">