Html 采用1x1像素PNG的图像响应性更好？

我喜欢

img

标签在响应性设计中的工作方式。它按比例调整大小并展开包含它的div。问题是，图像在每个大小上都是相同的像素数，这对移动设备来说是可怕的

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

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

.container{
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景重复：无重复；
边框：1px纯蓝色；
背景图像：url（large.png）
}
@媒体屏幕和屏幕（最大宽度：968px）{
.集装箱{
背景图像：url（small.png）
}
}
img{
宽度：100%；
高度：自动；
}

---

是的，可访问性存在问题。html中的图像意味着……嗯，有意义。所以，你把没有意义的完整图像放在html中，而把有意义的完整图像放在CSS中，它们对屏幕阅读器毫无兴趣（例如）

此外，我猜您计划在不需要的设备上加载大图像来处理视网膜显示，然后“缩小尺寸”

您有更好的方法来处理移动设备像素大小，如srcset：

或图片元素：

---

如果您的目标是最小化HTTP请求，HTML5提供了

元素：

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>

请注意，此元素尚未获得通用浏览器支持：

如有必要，这里有一个polyfill：

参考资料：

• ~MDN
• ~z~环境专员+
• ~HTML5岩石

---

谢谢你，迈克尔。最小化HTTP请求是一个好处，但我的主要目标是在尽可能多的浏览器（ie8及以上）上使用美观/功能良好的图像。我也希望移动用户有类似的体验，而不会耗尽他们的数据计划！我还没有听说过picture+srcset属性，我打算在将来进行更广泛的实现。同时，polyfill看起来将是一种很好的绷带。非常感谢。