图片发挥在网站设计中起重要作用，但也可能会带来不少挑战。当在站点上使用的图片决定，你必须确定，你会寻找那些图像，图像的题材本身，最后它的图像格式是最好的那个特定的实例。这些因素都是重要的，但是当你创建一个负责任的网站，有很多的，你必须面对以及其他挑战。
尺寸问题
在此之前的响应式网页设计的兴起，网站图片添加一个“一刀切”的做法。这意味着相同的图像被传递到所有的访客，不论其屏幕大小或设备（图像将被显示的最大尺寸是所使用的大小）。然而，这种做法难以为继的敏感网站。
这是最适合大屏幕的图像往往过于庞大，无论是在物理尺寸和文件大小，屏幕较小的设备而言。我们可以缩小图像的物理尺寸下来较小的显示器，但沉重文件大小保持。从一个网站性能的角度来看，这是一个很大的问题。
当涉及到敏感的网站，我们需要提供网站的图像更聪明的方法。如果你正在寻找做的是不同版本的图像，这是最常见的需求响应站点之间切换，那么，你可以考虑以更聪明的方式实现图像的几个选项。
自适应数字图像
据该网站的这种做法，自适应数字图像 “检测到您的访问者的屏幕尺寸，并自动创建，高速缓存，并提供你的网页的嵌入式HTML图像的设备进行适当的重新缩放的版本。”有了这个方法，你上传图片的最大版本将需要连同设计使用了一些断点。
自适应数字图像将创建图像的缩放版本，以更好地满足这些断点，并根据需要，而不是始终使用最大规模救他们。甚至还有视网膜屏幕的支持。
这种方法是非常容易部署，无需更改需要您的网站的HTML。虽然它完全可以帮你实现更小的图像屏幕较小的设备，也有局限性，这种方法为好。
自适应数字图像需要Javascript工作。这还需要Apache和PHP，所以要根据不同的网站，你正在建设的类型，自适应数字图像可能不适合你的工作需要。例如，如果你的网站是一个.ASPX网站在Windows服务器上，您将无法使用自适应数字图像。
HiSRC
另一个JavaScript供电（这个用了jQuery）选项HiSRC。这个插件允许你创建小型，中型和大型版本的图像。该脚本将随后显示了基于视网膜屏幕和网络速度适当的图像。
一个缺点这种方法是，它的工作原理是首先加载最小的图像。然后检查，看是否有较大的图像会更合适。如果是这样，它加载那些较大的图像。这意味着，有对某些用户双下载。是的，它仅影响在高带宽连接的用户，但它仍然是应该提到一个性能的关注。
另一个缺点是HiSRC需要自定义标记来执行的事实。这使得它非常具有挑战性在某些情况下使用，比如，你正在努力改造这个解决方案更大的网站或CMS解决方案，不给你完全访问标记。
srcset和大小
如果你正在寻找一种方法并不需要Javascript和更多的是本地的HTML供电解决方案中，该srcset和尺寸属性可能是你最好的选择。
添加到<IMG>元素，srcset可以让你决定正确的HTML内不同大小的图像，它是与另一个新特性一起使用尺寸。
虽然srcset是土生土长的HTML的一部分，它不是在所有的浏览器都支持。最值得注意的是缺乏支持旧版本的Internet Explorer公布到边缘之前（IE 11及以下不支持srcset）。这意味着，本地或没有，你可能会希望修补支持使用polyfill像 Picturefill。因此，即使srcset本身并不需要使用Javascript，确保该解决方案的广泛支持将推动你把它列入。
CMS供电解决方案
取决于使用内容管理系统中，还可以是可被添加到这些平台响应图象的解决方案。
我用的是ExpressionEngine CMS，并经常把一个叫做“插件图片锡泽 ”，可自动实现调整大小的图像。
如果你正在使用WordPress的，像“一个插件RICG响应图片 ”或“ 自适应数字图像中的WordPress” 可能会得到你从CMS需有良好的图像解决方案。
关于艺术指导
反应灵敏的网站提供更好的缩放图像的这些方法都工作得很好，如果你并不需要这些图像艺术指导（这意味着你需要以不同的裁剪图像的不同分辨率）。如果你需要超越简单的调整大小，使用的HTML <照片>元素将成为您的需求是更好的选择。
