响应式图片的处理

如果需要在响应式网页设计中，针对不同的设备使用不同图片的话。可以利用HTML5新增的picture标签：

<picture> 
<source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
<source srcset="default.jpg, default_retina.jpg 2x">
<img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

另外，兼容性问题方面，可以使用polyfill: http://scottjehl.github.io/picturefill/

<picture> 
<!--[if IE 9]><video style="display: none;"><![endif]--> 
<source srcset="smaller.jpg" media="(max-width: 768px)"> 
<source srcset="default.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="default.jpg" alt="My default image"> </picture>