根据http archive的数据，今天互联网上排名前100的网站看起来像这样:
没错，2015年11月有3分之2个网站以图片为主。网站大小变得越来越臃肿 ，这可能导致加载时间缓慢和用户体验不佳，尤其是在移动设备上。
然而，众所周知，“图片描绘千言万语”，客户非常热衷于在他们的网站上拥有图像丰富的页面，无论用于查看它们的设备如何。他们明白，客户不会阅读他们网站上的每一个文字，但图片可以在感知和理解他们的品牌方面产生更大的影响。当然，他们希望这些图像看起来很棒，运行速度快，适合任何设备的参数。
因此，图像越来越受欢迎，但它们可能会损害用户体验。响应式图像是这里的解决方案，可以在克服缓慢的加载时间方面发挥重要作用。然而，尽管它们很有用，但响应式图像并不是最容易实现的。有许多部署它们的方法，但每种方法都有其自身的限制和缺点。
有很多关于如何实现响应式图像的说法 (请参阅这里的详细指南， 这里和这里 )。今天我们将更全面地概述响应式网页设计，并考虑在选择方法时需要提出的各种问题。
基本方法
使图像响应的基本方法是将其最大宽度设置为100%。这意味着您的图像将始终适合它周围的容器，并且永远不会超过它。这适用于基本页面，但如果你有许多不同的元素一起工作，你很快就会遇到问题。其他需要考虑的因素包括:
-
性能和带宽
“基本” 解决方案的主要缺点是每个设备接收相同的图像。如果您的网站由小徽标或图像填充，这很好。但是，如果您使用的是大图片，则将这些图片发送到通过有限的移动数据连接进行连接的设备将大大占用加载时间。
-
艺术指导
“基本” 方法的第二个缺点是，虽然图像适合任何设备，但它们可能会失去对每个设备的影响或功率。在景观桌面屏幕上看起来很棒的城市远景或山景在智能手机上可能看起来很混乱或不合适。它试图传达的信息可能会丢失; 您可能更喜欢移动屏幕版本，以 “放大” 网站图像的某个方面。
那么，如何用基本方法克服这些问题呢？
要问的问题
在深入研究解决方案之前，您首先需要确定要解决的问题。已经提出了一系列针对响应图像问题的解决方案。然而，每一种都有其特定的优势和限制。有些人会帮助解决某些问题; 其他人会比其他人更强。这里最重要的是要了解您的客户正在寻找什么; 这应该告知您选择的解决方案。
-
问题是艺术指导吗？
-
客户是否有一个庞大的网站，他们希望每个图像都能得到响应？
-
应该加载所有图像，还是应该通过JavaScript动态加载？
-
测试用户的带宽优先-所以你可以看到他们的连接是否可以处理高分辨率图像？
-
您可以使用第三方解决方案，还是需要保留内部托管？
有很多解决方案是为了应对响应式设计的困境而创建的。以下是一些已开发的最令人兴奋的解决方案:
1. PictureFill
PictureFill提供了一个非常简单的脚本，在页面加载时显示自适应图像。它确实需要一些JavaScript标记，并且不做任何带宽检测。
2. HiSRC
一个jQuery插件，可让您创建图像的低，中和高分辨率版本。该脚本检测网络速度和视网膜准备情况，以显示最合适的版本。您将需要使用jQuery但是，它需要在HTML客户标记。
自适应图像主要是服务器端解决方案。你需要安装它 (这可能需要一段时间)。但是，一旦安装和配置，PHP脚本将为您调整任何图像的大小。但是，它不能检测带宽，也不能解决art方向问题。
其他解决方案包括:
知道如何做响应式网页设计在当今多样化的设备世界中越来越重要。了解您的客户想要从他们的网页应该帮助您选择最合适的工具。
使用AngularJS指令、Bootstrap支持和Microsoft MVC服务器端小部件创建高性能、触摸优先、响应式应用。下载Ignite UI今天为您的高需求的数据需求。
</p