使用 1x1 px PNG 的更好的响应图像？

Question

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

我想到了一种方法，使用 1x1 像素的 PNG 图像，在标记中使用 width 和 height 属性来定义比例。这样，您的 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>

Answer 1

是的，辅助功能存在问题。 html 中的图像意味着……好吧，有意义。因此，您将无意义的完整图像放在 html 中，而将有意义的图像放在 CSS 中，它们对屏幕 reader（例如）完全没有兴趣。

此外，我猜你打算加载大图像来处理视网膜显示器，在不需要它们的设备上，只是 "resize down"?

您有更好的方法来处理移动设备像素大小，例如 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

Answer 2

如果您的目标是尽量减少 HTTP 请求，HTML5 提供 <picture> 元素：

4.8.2 The picture element

The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.

使用此元素，您可以允许浏览器 select 基于媒体查询的适当图像：

<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岩石

使用 1x1 px PNG 的更好的响应图像？

A better responsive image with 1x1 px PNG?

html

css

image

media-queries

responsive-design