共计 1746 个字符，预计需要花费 5 分钟才能阅读完成。
在这篇文章中讨论的新特性 — srcset/sizes/<picture> — 都已经被新版本的现代浏览器和移动浏览器所支 持（包括 Edge，而不是 IE）。
解决的问题
分辨率切换问题：小屏手机屏幕上显示网页，那么没有必要在网页上嵌入 pc 端的大图片，浪费带宽
艺术方向问题：当网站在狭窄的屏幕上观看时，显示一幅包含了重要细节的裁剪版图片，而不是显示 pc 端的大图，这样会显得图片缩小，重要地方不突出
分辨率切换问题
不同分辨率加载不同尺寸的图片
<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 语法: “ 图片路径 物理像素, 图片路径 物理像素, …..”
size: “ 媒体查询 css 像素 ”
src: 当浏览器不支持上面的属性的时候，默认加载这里
加载的流程如下:
查看设备宽度
检查 sizes 列表中哪个媒体条件是第一个为真
查看给予该媒体查询的槽大小
加载 srcset 列表中引用的最接近所选的槽大小的图像
在很多 pc 端上，1px=1w
不同的分辨率加载相同的尺寸
<img srcset=”elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x”
src=”elva-fairy-640w.jpg” alt=”Elva dressed as a fairy”>
img {
width: 320px;
}
一般情况下当我们给 img 设置固定的宽的时候, 为了在不同的 dpr 设备上显示相同的大小，可以配合 x 来，例如 1.5x 代表 dpr 为 1.5 的设备
艺术问题
<picture>
<source media=”(max-width: 799px)” srcset=”elva-480w-close-portrait.jpg”>
<source media=”(min-width: 800px)” srcset=”elva-800w.jpg”>
<img src=”elva-800w.jpg” alt=”Chris standing up holding his daughter Elva”>
</picture>
需要说明的几点:
source 当中的也可以使用 srcset、sizes 属性
必须提供一个 img 元素，以备浏览器不支持的时候使用
为什么不使用 css 和 javaScript 来完成图片替换
因为你不能先加载好 <img> 元素后, 再用 JavaScript 检测视图的宽度，如果觉得大小不合适，就动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说，是很糟糕的。
另一种方式 svg
位图由以像素为单位的宽和高表示，如果位图显示的尺寸大于原始尺寸，一张较小的位图看来会有颗粒感（然而矢量图不会这样）
但是它不适用于所有的图片，在某种程度上是这样的——它们无论是文件大小还是比例都合适，无论在哪里你都应该尽可能的使用它们。
虽然在简单图形、图案、界面元素等方面较好，但如果是有大量的细节的照片，创建矢量图像会变得非常复杂。加载会消耗更多的带宽。
使用现代图像格式
有很多令人激动的新图像格式（例如 WebP 和 JPEG-2000）可以在有高质量的同时有较低的文件大小。然而，浏览器对其的支持参差不齐。
为了兼容老旧浏览器，我们可以在 <source> 标签当中指定 MIME 类型，使用 type 属性，并在 srcset 当中指定相应格式的图片
<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>
