图片在网站设计中起重要作用，但也可能会带来不少挑战。当在站点上使用的图像决定，你必须确定，你会寻找那些图像，图像的题材本身，最后它的图像格式是最好的在该特定实例。这些因素都是重要的，但是当你创建一个反应灵敏的网站，还有，你必须面对以及其他挑战。

大小事项

在此之前的响应网页设计的兴起，是一个added网站图片“一刀切”的做法。这意味着相同的图像被传递给所有观众，无论其屏幕大小或设备的（一个图像将被显示的最大尺寸是已使用的大小）。这种方法对上不去响应网站，但是。

这是最好的大屏幕图像往往过于庞大，无论是在物理尺寸和文件大小，为小屏幕设备而言。我们可以缩小图像的物理尺寸下为较小的显示器，但份量文件大小保持。从一个网站性能的角度来看，这是一个大问题。

当涉及到网站的响应，我们需要提供网站图片更聪明的方法。如果你所希望做的是不同版本的图像，这是敏感部位最常见的需要之间进行切换，再就是你可以考虑以更聪明的方式实现图像的几个选项。

自适应数字图像

据该网站的这种做法，自适应数字图像 “检测到您的访问者的屏幕尺寸，并自动创建，高速缓存，并提供你的网页的嵌入式HTML图像的设备进行适当的重新缩放的版本。”有了这个方法，你上传图片的最大版本将与您的设计使用了一些断点一起必需的。

然后自适应数字图像将会创建图像的缩放版本的最佳匹配断点，并根据需要，而不是总是用最大的尺寸拯救他们。甚至还有视网膜屏幕的支持。

这种方法是非常容易部署，无需更改需要您网站的HTML。虽然它绝对可以帮助您提供更小的图像，屏幕较小的设备，有局限性这种方法为好。

自适应数字图像需要Javascript工作。这还需要Apache和PHP，所以这取决于你正在构建的网站类型，自适应数字图像可能不适合你的工作需要。举例来说，如果你的网站是在Windows Server上的.ASPX网站，您将无法使用自适应数字图像。

HiSRC
另一个JavaScript供电（这一个使用jQuery）选项HiSRC。这个插件允许你创建小型，中型和大型版本的图像。然后，该脚本将展示基于视网膜屏幕和网络速度适当的图像。

一个缺点这种方法是，它的工作原理是首先加载最小图像。然后检查，看是否有较大的图像会更合适。如果是这样，它加载这些较大的图像。这意味着有对某些用户双下载。是的，它只会影响高带宽连接的用户，但它仍然是一个应该提到一个性能问题。

另一个缺点是需要HiSRC自定义标记来执行的事实。这使得它非常具有挑战性的在某些情况下使用，比如较大的网站，你正在努力改造这个解决方案或CMS解决方案，不给你完全访问标记。

srcset和大小
如果你正在寻找一种方法并不需要Javascript和更多的是本地的HTML供电解决方案的的srcset和尺寸属性可能是你最好的选择。

添加到<IMG>元素，srcset让你决定正确的HTML中不同大小的图像，它是与另一个新的属性一起使用尺寸。

虽然srcset 是HTML土生土长的一块，它不是在所有的浏览器都支持。最引人注目的是没有支持老版本的Internet Explorer发布沿之前（IE 11和下面不支持srcset）。这意味着，本地或没有，你可能会想修补支持利用填充工具像  Picturefill。因此，即使srcset本身并不需要Javascript，确保该解决方案的广泛支持将推动你把它列入。

CMS供电解决方案
取决于使用内容管理系统，还可以是可被添加到这些平台响应图象的解决方案。

我使用ExpressionEngine CMS和经常把一种叫做“插件影像仪 ”来自动实现调整大小的图像。

如果你正在使用WordPress的，像“一个插件RICG响应图像 ”或“ 自适应数字图像WordPress的 ”搜索可以查到您从CMS权所需要的影像解决方案。

关于艺术指导
为响应网站提供更好的缩放图像的这些方法都工作得很好，如果你并不需要这些图像艺术指导（这意味着你需要以不同的裁剪图像的不同的决议）。如果你需要超越简单的调整大小，使用的HTML <照片>元素将成为您的需求更好的选择。