响应式图片(自适应图片)

在这篇文章中讨论的新特性 — srcset/sizes/<picture> — 都已经被新版本的现代浏览器和移动浏览器所支 持（包括Edge，而不是IE）。

解决的问题

1. 分辨率切换问题：小屏手机屏幕上显示网页，那么没有必要在网页上嵌入pc端的大图片，浪费带宽
2. 艺术方向问题：当网站在狭窄的屏幕上观看时，显示一幅包含了重要细节的裁剪版图片，而不是显示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: 当浏览器不支持上面的属性的时候，默认加载这里

加载的流程以下:

1. 查看设备宽度
2. 检查sizes列表中哪一个媒体条件是第一个为真
3. 查看给予该媒体查询的槽大小
4. 加载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>

须要说明的几点:

1. source当中的也可使用srcset、sizes属性
2. 必须提供一个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>