响应式图片 / Responsive images

[yuxino]

响应式图片就是能在绝大多数不同屏幕上都能很好的显示的图片。实现响应式图片可以通过CSS。但是本文利用的是srcset和sizes两个属性，以及更加进阶的<picture />和<source />标签。**这个标签在Edge非IE浏览器都已经得到支持。**你可以在Can i use搜索看看。

为什么要响应式

在这之前我们要搞懂为什么我们需要响应式图片。我们精彩用到的max-width: 100%不够用了吗?

我们这里看一个例子。很常见的例子，一个普通的文章页面。点击打开

看起来很好不管在电脑，还是平板上面。但是如果你把分辨率调到手机的看。

发现什么不对了吗。什么，没有?? 如果你没有发现，可能是因为你平时就是这么做的，没有在意到这个细节。对于用户来说，那张抱着小女孩的图太小了。压根看不到人脸啊 !!! 根本就没有意义了。

为了解决看不到脸的问题

我们使用了两个新的属性srcset和sizes, 提供多个附加源图像以及提示，以帮助浏览器选择正确的源图像。为了证明给你看这两个属性是有用的，我们弄了一个案例。代码可以在Github看见。

现在的案例比之前的要好太多。

新的两个属性

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset和sizes属性看起来很复杂，但是如果你按照上图所示进行格式化，那么他们并不是很难理解，每一行有不同的属性值。每个值都包含逗号分隔的列表。列表的每一部分由三个子部分组成。让我们来看看现在的每一个内容：

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

• 一个文件名 (elva-fairy-480w.jpg.)

• 一个空格

• 图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在Mac上，你可以在Finder上选择这个图像，然后按 Cmd + I 来显示信息）。

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：

• 一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当视窗的宽度是480像素或更少”。
• 一个空格
• 当媒体条件为真时，图像将填充的槽的宽度（440px）

就是这样！所以在这里，如果支持浏览器以视窗宽度为480px来加载页面，那么(max-width: 480px)的媒体条件为真，因此440px的槽会被选择，所以elva-fairy-480w.jpg将加载，因为它的的固定宽度（480w）最接近于440px。800px的照片大小为128KB而480px版本仅有63KB大小—节省了65KB。现在想象一下，如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。

老旧的浏览器不支持这些特性，它会忽略这些特征。并继续正常加载 src属性引用的图像文件。

这种方案比css/js好

当浏览器开始加载一个页面, 它会先下载 (预加载) 任意的图片，这是发生在主解析器开始加载和解析页面的 CSS 和 JavaScript 之前的。这是一个非常有用的技巧，平均来说，页面加载的时间少了 20%。但是, 这对响应式图片一点帮助都没有, 所以需要实现类似 srcset的方法。因为你不能先加载好 元素后, 再用 JavaScript 检测视图的宽度，如果觉得大小不合适，就动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说，是很糟糕的。

使用prciture标签

HTML 元素是一个容器，用来为其内部特定的 元素提供多样的 元素。浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源。

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

使用media

可以非常平稳的退化。同时<picture>也能做到和srcset / sizes一样的事情。同时他也支持media和type。

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

使用type

​<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

总结

记录来自MDN。响应式图片/新属性/新标签的好处

• 更好的用户体验
• 节省带宽，因为在不同的屏幕上显示不同的图片，小屏幕无需加载一个很大/很高清的图片资源。
• 比CSS/JS更加友好，容易控制，语义化
• 能够平稳的退化