~~~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">
~~~
~~~html
<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>
~~~
> [Responsive images -MDN ](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
> [Responsive images](https://caniuse.com/#search=Responsive%20images)
> [picturefill](https://github.com/scottjehl/picturefill):A responsive image polyfill for , srcset, sizes, and more
> [纯干货 —— 响应式图片解决方案](https://blog.csdn.net/qq_32614411/article/details/82223812)
