【20190305】CSS-响应式图片：srcset+sizes，picture，svg

响应式图片可以根据不同的设备屏幕大小从而选择加载不同的图片，从而节省带宽。实现响应式图片有三种方法：srcset+sizes属性、picture标签、svg

1. srcset+sizes

srcset是img标签的一个属性，它可以提供一系列图片源，供浏览器在不同设备屏幕大小和像素密度下选择适合的图片。W3C规范中的描述：srcset属性允许作者根据不同分辨率或不同视窗尺寸提供多个不同分辨率图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。

使用语法如下：

 <img src="selina.jpg" alt="alt"
      srcset="100-s1.jpg 100w,300-s1.jpg 300w,600-s2.jpg 600w,800-s2.jpg 800w"
      sizes="(max-width:500px) 300px,(max-width:1000px) 500px,100vw"/> 

 <img src="selina.jpg" alt="alt"
      srcset="100-s1.jpg 1x,600-s2.jpg 2x" /> 

其中sizes的媒体条件中的px可替换成rem、em等相对单位，或vw相对于视口的百分比大小。

srcset中提供了一系列图片源，每个资源之间用逗号隔开，资源由图片的url与显示条件构成。

• 以w结尾表示条件为像素，如第一条语句中表示100-s1的固定宽度为100像素，当设备视口宽度小于等于100px时选择100-s1图片，当设备视口宽度小于等于300px时选择300-s1图片。
• 以x结尾表示条件为像素密度，第二条语句表示当设备像素密度为1时选择100-s1图片，当设备像素密度为2时选择600-s2图片。

第一条语句中的sizes属性是为响应式图片设置的断点，它表示怎样根据视口宽度来选择图片，如果不设置sizes，那么它默认的是100vw，也就是永远根据100%视口宽度来选择图片源。sizes属性值一般由一系列媒体条件构成，媒体条件后跟一个该条件下的图片预估宽度，每个条件以逗号隔开，最后没有媒体条件的预估宽度表示默认值。

第一条语句中的sizes表示当设备视口宽度小于等于500px时，当前预估图片尺寸为300px，那么浏览器将会在图片源中查找符合条件的图片，并且查找的原则首先是图片固定宽度应该大于等于预估宽度，然后图片宽度是最接近预估宽度的。当媒体条件都不满足时，就采用默认值100vw，也就是将100%视口宽度作为预估宽度来选择图片。

另外由于浏览器验证媒体条件时如果第一个条件为真，那么就会停止验证，因此媒体条件的顺序也应该按照从小到大的规律排列，否则后面的小范围条件将会不起作用。

目前大多数浏览器都支持srcset属性，但是我自己测试的在chrome 72.0上的显示效果很奇怪，没搞懂怎么回事。

W3C规范是这样描述srcset:srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/responsive/responsive-images-part-1-using-srcset.html © w3cplus.com

W3C规范是这样描述srcset:srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/responsive/responsive-images-part-1-using-srcset.html © w3cplus.com

W3C规范是这样描述srcset:srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/responsive/responsive-images-part-1-using-srcset.html © w3cplus.com

W3C规范是这样描述srcset:srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/responsive/responsive-images-part-1-using-srcset.html © w3cplus.com

2. picture标签

picture元素是HTML5的新特性，它允许你放置多个source标签，指定不同的图像文件名，根据媒体条件（视口高度viewport height、宽度width、方向orientation）或像素密度来选择图片进行加载。

使用语法如下：

 <picture>
       <source media="max-width:800px"

             srcset="image800.jpg 800w,
                     image1406.jpg 1406w
             "

             sizes="(min-width:530px) calc(100vw - 96px),
                    100vw"
        >

        <img alt="aaa"
           src="689.jpg"

           srcset="689.jpg 689w,
                   1378.jpg 1378w,
                   500.jpg 500w
                   1000.jpg 1000w"

          size="(min-width:1066px) 689px
                 calc(75vw - 137px)"
        >
   </picture>

当符合source标签中的media条件时，选择source中的图片源，否则使用img中的图片源。

picture元素内部的source与img的关系像是相片与相框的关系，相框带有一个底图，当你有很多不同尺寸的图片时，你试图找到第一个合适尺寸的照片放到相框里，如果没有，就不放照片而用相框本身的底图，picture就是告诉你这个相框只能在这些图片里找合适的。

另外还支持选择不同格式的图片：

 <picture>
        <source type="image/webpp" srcset="snow.webp">
        <img src="snow.jpg" alt="a cat">
 </picture>

如果浏览器支持webp格式，则加载snow.webp，否则加载jpg图片。

目前大多数浏览器也已支持picture，如果有特殊情况，可以使用picturefill工具来兼容各个浏览器。

3. svg

通过img标签插入svg矢量图也可以达到实现响应式图片的效果，但是这种方法不能用JavaScript来操作图像，而且只能使用内联css样式来控制图像，也不能使用css伪类。

或直接在HTML中插入svg代码，svg代码应该包含在<svg></svg>中。

最后可以通过iframe嵌入svg文档。

具体可参考：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web