近年来，随着智能设备的普及，响应式Web设计可谓风头正茂，Web开发者的追捧，各种资源的报道，相信您对其并不陌生。响应式的图像是使用 HTML的IMG标签传送的图片，可以根据不同的屏幕大小而改变图片来源。在响应式的网站设计中，很重要的一个部分就是图片的响应式设计，在这篇文章中我 们将探讨移动Web在处理图片时需要用到哪些技术，使用它们能够帮助你快速的生成支持响应式设计的图片。
图像的位置和样式
利用CSS3属性来创建图像或许是个不错的想法，它能帮助你在富媒体页面上脱颖而出，你可以根据页面的布局来随意调整大小。
当用户调整浏览器窗口时，你应该思考如何将图片进行堆叠。HTML元素的位置将决定布局位置是否能够自由缩放。
支持Retina（视网膜）图像
响应式媒体另一方面也适用于移动retina设备。有些常用的图像会在设备上出现更加密集的像素。那么我们该如何解决呢？最好的办法就是将图片设置 为较大的尺寸，最好设置成正常大小的两倍。因此，如果你的logo是200×150 ，那么你应该创建的图像为400×300。依此类推。如果你的读者使用的是retina显示屏，那他就不会错过任何一个先进的样式。
就我个人而言，我比较喜欢JavaScript库，这里推荐使用retina.js的@2x图像。这里需要注意的是，当页面加载Retina.js时，检查当前的设备是否支持像素密度大于1x，是否所有的<img> src属性被替换为典型的Apple-style @2x（比如，pear.png变成pear@2x.png）。
自然更改CSS图像大小
在默认的情况下，如果你的图像没有按照设固定的宽度或高度进行设置，这时图片会折叠页面内容。但是响应式图片并不能有效的使用自定义的宽度/高度。这里有个不错的方法可以帮助你解决此问题。
将下面的代码max-width添加到样式列表中
- img { display: block; border: 0; max-width: 100%; }
问题是当我们给宽度添加自定义的宽度/高度属性时，其高度依然保持不变。因此，图像可以拉伸和缩放但不能垂直下拉。你可以在CSS中添加height: auto;请注意，这个方法不适用于JavaScript或是外部第三方资源。我已经在大部分响应式Web项目中试用过，在Firefox，Chrome、Internet Explorer中没有发现任何Bug。
开源替代方案
这是一款有趣的解决方案被称之为Adaptive图像，基于HTML和CSS代码创建而来。你可以在PHP后端添加一行JavaScript代码。这将有助于将图片生成动态缓存状态，能够完美的适配用户浏览器窗口大小。
在服务器资源占用问题上。对于用户来说调整较大图片的大小比利用脚本自动缩放要容易的多。但是缓存系统并不是那么简单，因此，当页面发出请求时最好不要运行新的操作系统。你只需要填写几个PHP变量内的Adaptive-Images文件，并检查该网站有关安装脚本的详细信息即可。
当然，你也可以利用jQuery的一款插件HiSRC，该项目托管在Github上。你只需下载源代码并将脚本权限及jQuery库的副本添加到文档header。该代码不仅支持响应式图片技术，还能支持一个分辨率@2x的副本，以替换设备上的retina大屏幕。
