具有 1x1 像素 PNG 的更好的响应式图像？答案

【问题标题】：A better responsive image with 1x1 px PNG?具有 1x1 像素 PNG 的更好的响应式图像？
【发布时间】：2016-10-09 01:24:39
【问题描述】：

我喜欢 img 标签在响应式设计中的工作方式。它按比例调整大小并扩展包含它的 div。问题是图像在每种尺寸下都是相同的像素数，这对于移动设备来说是很糟糕的。

我想到了一种方法，在标记中使用具有宽度和高度属性的 1x1 像素 PNG 图像来定义比例。这样，您的 div 将根据 PNG 按比例调整大小，并且您可以使用媒体查询交换背景。您可以在整个页面中多次使用它，只需一个 http 请求。

这种攻击响应式图像的方式有什么问题吗？

.container {
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  background-repeat: no-repeat;
  border: 1px solid blue;
  background-image: url(large.png)
}

@media screen and (max-width: 968px) {
  .container {
    background-image: url(small.png)
  }
}

img {
  width: 100%;
  height: auto;
}

<div class="container">
  <img src="1x1.png" width="5" height="1">
</div>

【问题讨论】：

标签： html css image responsive-design media-queries

【解决方案1】：

如果您的目标是最小化 HTTP 请求，HTML5 提供了<picture> 元素：

4.8.2 The picture element

picture 元素是一个提供多个来源的容器到其包含的img 元素，以允许作者以声明方式控制或提示用户代理要使用哪个图像资源使用，基于屏幕像素密度，视口大小，图像格式，和其他因素。

使用此元素，您可以允许浏览器根据媒体查询选择适当的图像：

<picture>
    <source srcset="large.png" media="(min-width: 1000px)">
    <source srcset="standard.png" media="(min-width: 600px) and (max-width: 999px)">
    <source srcset="small.png" media="(max-width: 599px)">
    <img src="standard.png" alt="accessibility text here"><!-- graceful degradation -->
</picture>

请注意，此元素尚不支持通用浏览器：http://caniuse.com/#search=picture

如果需要，这里有一个 polyfill：https://scottjehl.github.io/picturefill/

参考资料：

The <picture> element~MDN
Better Responsive Images With the picture Element ~ envatotuts+
Built-in Browser Support for Responsive Images ~ HTML5 摇滚

【讨论】：

谢谢迈克尔。最小化 HTTP 请求是一个好处，但我的主要目标是在尽可能多的浏览器（ie8 及更高版本）上使用美观/功能强大的图像。我也希望移动用户有类似的体验，而不会耗尽他们的数据计划！我还没有听说过 picture + srcset 属性，我已经退出了，以便在未来进行更广泛的实施。同时，看起来 polyfill 将是一个很好的创可贴。谢谢！

【解决方案2】：

是的，可访问性存在问题。 html 中的图像意味着......嗯，很有意义。因此，您将无意义的图像放在 html 中，将有意义的图像放在 CSS 中，它们对屏幕阅读器完全没有兴趣（例如）。

此外，我猜你打算在不需要它们的设备上加载大图像来处理视网膜显示器，然后“缩小”？

您有更好的方法来处理移动设备的像素大小，例如 srcset：https://developer.mozilla.org/en/docs/Web/HTML/Element/Img#Example_3_Using_the_srcset_attribute

或者图片元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

http://caniuse.com/#feat=srcset http://caniuse.com/#feat=picture

【讨论】：