如果你在做响应式网站的时候，你无疑会遇到了那些网站当前图像的挑战。提供图像的最大尺寸，他们将被显示，然后使用CSS来调整这些图像的物理尺寸从性能的角度来看是一个失败的解决方案。如何做才是正确的，响应网站要求响应的图像。
如果你只需要提供不同大小的版本相同的图像在不同的屏幕尺寸，然后使用<img>属性srcset和尺寸会是你最好的办法
如果你需要有一个水平方向的艺术形象，然而，那么HTML<picture>元素将是更好的选择
响应图像艺术的方向是什么？
有次当图像在响应的网站需要裁剪不同屏幕尺寸被用来查看现场图像。
看看本文附带的图像。这是我的办公楼前的一张照片。你会看到它是如何出现在各种设备的不同方式。这是艺术方向。图像不只是调整在这些不同的视口的大小，但却表现为不同的图像完全。上述srcset和尺寸属性不允许这样的艺术方向，但<picture>做
语法<picture>
那么，HTML的语法是<picture>元的样子吗？下面是一个例子：
<picture><source media="(min-width: 1000px)" srcset="building-lrg.jpg"><source media="(min-width: 750px)" srcset="building-med.jpg"><img src="building-sm.jpg" alt="The front of our office building"></picture>这个<picture>元素本身把整片在这里。独自一人，这个元素没有。它要求源和IMG，它包含的元素。
img元素应该很熟悉。这是同样的老img标签，我们已经使用了多年的网页设计。这个标签设置默认图像将使用。
它还提供了一个任何浏览器不支持使用这里的其他新的元素回退（更多的浏览器支持不久）。那些不支持的浏览器会显示图像正常而忽视这个标记的休息。
浏览器做支持这一新功能，“源”是重要的一部分。源使用的两个性质—媒体和srcset。这个媒体属性设置媒体查询它决定当图像URL设置在srcset财产将被显示
在上面的例子中，“大”大小的图像将任何视口超过1000像素的负荷。“媒介”一将视口超过750像素显示，但小于1000。最后，任何视口中低于750的像素，默认的图像，这就是“小”，将显示。
双下载说明
关于这一问题<picture>语法必须解决的是它实际上创造了一个双下载场景。虽然媒体查询将加载和显示正确的图像，图像的默认也装，即使它不显示。这是一个需要解决的问题<picture>元，但现在，这篇文章“如何避免重复下载响应的图像”提供了一些有用的方法来回避这个问题。
浏览器支持
这个<picture>元目前有一些混合的支持。这是很好的支持在Chrome，Firefox，Opera，但它不支持Safari浏览器或Internet Explorer。在你当前的网页设计工作中使用这个元素，你需要polyfill支持。
从灯丝组picturefill你可以支持旧的浏览器响应图像的一种方法。这不仅会增加支持polyfill<picture>，但它也将支持srcset属性和尺寸的图像。
