HTML5 响应式图片加载

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="">

分辨率切换：不同的尺寸

<picture>

HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。

<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="">
</picture>

第一个条件返回真，那么就会显示这张图片。

srcset

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。

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

<img src="128px.jpg"
     srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">

<img src="128px.jpg"
     srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
     sizes="(max-width: 360px) calc(100vw - 20px), 128px">

当<img>元素的宽度规格为128的时候，加载128px.jpg，宽度规格为256的时候，加载256px.jpg， 宽度规格为512的时候，加载512px.jpg。

这里的宽度规格就是w描述符的另外一种理解，其与sizes属性设定和屏幕密度密切相关。

假设屏幕密度是2的iPhone6手机，sizes属性计算值是128px，则此时<img>实际的宽度规格应该是128*2也就是256w，因此会加载256px.jpg这张图。

sizes属性值(max-width: 360px) 340px, 128px表示当视区宽度不大于360像素时候，图片的宽度限制为340像素；其他情况下，使用128像素。
sizes属性值(max-width: 360px) calc(100vw - 20px), 128px表示当视区宽度不大于360像素时候，图片的宽度限制为屏幕宽度减20像素；其他情况下，使用128像素。

<picture>
  <source
 media=”(max-width: 800px)“
 srcset=”f1-focused-800.jpg 800w, f1-focused-1406.jpg 1406w“
 sizes=”(min-width: 530px) calc(100vw – 96px), 100vw“>
  <img alt=”“
 src=”f1-689.jpg“
 srcset=”f1-689.jpg 689w, f1-1378.jpg 1378w, f1-500.jpg 500w, f1-1000.jpg 1000w“
 sizes=”(min-width: 1066px) 689px, calc(75vw – 137px)“>
</picture>

引用SVG

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

对于不支持SVG（IE 8及更低版本，Android 2.3及更低版本）的浏览器，您可以从src属性引用PNG或JPG，并使用srcset属性 只有最近的浏览器才能识别）来引用SVG。

背景图中使用

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;