HTML入门12

　　开始了解响应式图片

　　响应式，根据屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片，接下来考虑怎样创建自适应得图片，专注于img元素，完成自适应。

　　分辨率切换，不同的尺寸

　　<img srcset="elva-fairy-320w.jpg 320w,

　　　　　　　　elva-fairy-480w,jpg 480w,

　　　　　　　　evla-fairy-880w,jpg 800w"

　　　　sizes="(max-width: 320px) 280px,

　　　　　　　　(max-width: 480px) 440px,

　　　　　　　　800px"

　　　　src="elva-fairy-880w,jpg" alt="elva dressed as a fairy">

其中srcset和sizes属性看起来比较复杂，按照上述样子进行格式化后，就定义好了浏览器选择的图像集以及每个图像的大小，包含一个文件名 一个空格 图像的固有宽度，这里的宽度单位用w表示，表示图像的真是大小，sizes属性定义了一组媒体条件，屏幕宽度知名某些媒体条件为真时，选择什么样的格式，（max-width: 480px）叫媒体条件，当媒体条件为真时填充后面的槽宽度。最后一个没有媒体宽度时默认条件。当浏览器匹配了第一个后续的媒体条件将被忽略。

　　对于图片的插入还可以改用picture条件，代码如下：

<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包含一个media属性，仅仅你在艺术方向场景下使用media属性。

　　浏览器加载一个页面会先下载任意图片也叫预加载（相对应的叫懒加载），发生在主解析器开始加载和解析css.js之前的，所以需要设置srcset，方法监测media如果你用js控制还需要先监测视图宽度如果不合适还需要将原先已经加载好了的替换掉，对响应式理念来说，很糟糕。

　　大胆使用现代图像格式。

　　新的图片格式webp  ipeg-2000高质量且小，虽然浏览器支持程度不大一致，通过使用picture指定type属性兼容其他不支持的类型；

<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>

在source元素中只可以引用声明的文件类型。

　　小结：艺术方向，为不同的布局裁剪图片，桌面布局完整横向的图片，手机布局显示裁剪过的纵向图片，用picture元素实现；分辨率切换，为窄频提供小图片或者高分辨率提供不同分辨率的图片，通过SVG、srcset、sizes来实现。