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

Posted 2023-03-06

【中文标题】具有 1x1 像素 PNG 的更好的响应式图像？

【英文标题】：A better responsive image with 1x1 px 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"  >
</div>

【参考方案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" ><!-- 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