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