在响应式设计和自适应设计的流行下，🐷很多web 应用往往都兼容手机、平板和PC，其中一个让人比较头痛的问题就是图片的加载了。不同平台显然不可能用同一张大的图片，这样子꧟不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰。让浏览器根据分辨率自动识别图片是最好的方法。

响应式图片和多媒体是青岛网站制作的响应式网站的三大基础重点之一。表面上看这是一件非常简单的事情，只要把图片元素的高、宽属性值都移去，💫然后设置max-width属性为100%即可。不过在这么做之前还需要考虑很多情况。

设计响应式图片的难点

去年力图数𒉰字科技在做网站时也是通过设置max-widtꦍh属性使得图片能够自适应。不过这么做的前提是你必须要创建一幅尽可能高分辨率的图片。

除非是真正需要那么大的图片，否则这就是一种浪费。智能手机和平板电脑通过移动网络浏览该网站时，并不需要那么大🌱尺寸的图片——大尺寸图片意味着大的带💯宽。即使不考虑带宽也应该考虑同一幅图片以不同尺寸显示时的问题，在图片原始大小是300px的情况下以1000px尺寸显示无疑会损失很多的细节。最好的解决方法则是使用大图的一部分或者干脆完全用不同尺寸的图片。

同时我们不应当忘记高分辨率的显示需求。Apple 设备的retina技术显示图片要求更多的图片，考虑到其他设备也会跟随Apple的高分辨率显示技术（不过可能显示的像素尺寸不同）。我们若将所有不同尺寸的图片都预加载进来，൩此乃饮鸩止渴之举，万不可取——毕竟我们的目标只是是减少带🎶宽而非增加。

目前已经有几种备选的解决方案解决这些问题，力图小编在这里归纳总结如下：

创建新的图像格式

创建一个新的（html）元素

使用特定技术手段

1.创建新图像格式

这种方法比较容易解释，力图小编呼吁针对响应式图片创建一种新的图像格式。💎该新的格式包含了几种不同大小版本的图片。比如100k的文件里有75k的版本、20k的版本和5k版本的图像。

从某种意💜义上讲就像.mp3格式那样，该种文件格式既存储了歌曲也存𓆉储了歌曲的meta信息。这里的图像版本信息就好比MP3的meta信息，然后依据既定的一组标准选择该里面最为合适设备的一个图片版本。

这种解决方法的缺点是必须放弃一些可控性能。𝐆新文件格式会自🌜行决定什么时候使用哪个版本的图片，只是当然对于不支持该种格式的浏览器也失去了后向兼容。

2.创建新元素（或属性）

该方法已经在使用了，不过在使用方式上存在一些争议。这些争议主要来自两方面：业界的web开发者和浏览器制造者ꦐ。web开发者提议创建一个新的picture元素（类似HMTL5中的video这样的元素），该元素中包含其他的图片源，示例代码如下：

其中的img元素是默认情况下显示的图片源，在其上面的两个source元素则是在特定媒体查询（media queries）条件下显示的图片—&mdas𝐆h;这也是开发者所喜欢的一种解决方案♚。

Scott Jehl针对图片元素创建了polyfill项目💝，就是利用了这种思想，你现在可是就可以使用它了。

浏览器开发者则是通过给♌img元素标签增加srcset属性来解决此问题❀的，功能一样，然而直觉上不好理解。

以srcset的一个值为例讲解：

path-to-another-image.jpg 600w 200h 2x

path-to-another-image.jpg 是不言自明的，当符合下述条件时就使用该 图片

 依据media queries要求，设备最小尺寸为600w和200h

浏览器有以2x像素密度显示的能力

因此这里所表达的意思是，当浏览器能够处理2x像素图片，且设备至少是600px宽、200px高的情况下，使用此图片源显示。此种解决方法从浏览器开发者角度看是非常合适的，毕竟能够让浏览器自ܫ己通过算法获取设备的兼容性和像素密度。

力图小编在网上找到了提供响应式图片的做法，我们可以模仿它的做法，如下：

• Markup —默认是用img元素标签
• javascript — 决定viewport的尺寸，将存储在cookie中的相关信息传给服务器，而后再改变img标签的src属性。
• Server — 获取初始图片请求，读取cookie，如果不是移动终端设备则返回1x1大小的空白占位图。然后等待JS脚本将真正的图片填充进去。

这种方式并没有想期望中那样完美，却也给出了一种解决思路，可以让其他人在上面继续发挥。

许多后续的方法其思路与此相仿，默认都是提供移动端图片，继而尝试探测设备属性后再发送合适大小的图片。

Foresight.js是在给♉服务器发送请求之前用JavaScript去探测该设备是否支持高分辨率图片，同时也探测该设备所在网络的网速。依据探测结果才向服务器请求合适的图片资源。

Images redux使用空白的1x1GIF（转成base64格式）。它将该图片设置为所有图片的初始背景或占位符，提供更好的用户体验。由于图片是依据CSS设置的，所以可用media queries改变响应样式。

HiSRC是一个jQuery插件，它能探测网络速度与分辨率，默认情况下只提供最小的图片。但是HiSRC能够探测设备更多的能力，然后🥀提供更多不同类别的图像。

总结

图片响♉应式化的第一步是让它自适应，移除高、宽属性然后设置max-width属性为100%。然而这并不能从根本上解决问题。主要的问题在于，那样做会不得不创建一张大尺寸高分辨率的图像，很明显这种图片并不利于移动终端设备的接收。

一种有效的解决方法是使用新的HTML语法，告知浏览器应当使用那张合适的图片；也许我们应当创建新的图像格🌼式，那样也能解决现在的问题。

不过为今之计，还是不得不借助现有的技术实现图像响应式。这些技术的思想是提供移动端版⭕本的图像，然后探测其是否还能处理更大的图像，如果可以则使用Javascript脚本将🌊更大的图片替换默认的小图。

最后，青岛网站设计的小编收集的响应式图片的解决方案，希望大家喜欢。