响应式图片

定义：
根据不同的屏幕大小换网页上展示的图片

原理：

1第一个原理就是说根据cookie。

首次载入，先给一个默认的图片，然后确定屏幕的大小加载合适图片然后把默认图片替换掉。
再次载入直接根据cookie判断就好了

2根据html属性

改变图片大小

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

根据sizes选择合适的srcset

改变图片质量

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

后面的倍率就是图片的质量。会自动选择合适的图片进行加载

Art direction

根据不同的宽度替换图片。

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