响应式图片加载技术

转自：http://hi.baidu.com/erictseng/item/377f51caa7c19c62f7c95dcc

随着移动互联网的发展，HTML5技术的普及，网页的设计开发也发生了很大的变化。这两年最火的莫过于响应式网页设计了，网络上这方面的文章很多，在此不再敷述，本文仅就响应式网页设计开发中的图片部分做探讨。

在开发移动网站的时候经常会遇到这样的问题：在图片尺寸一定的情况下，如果设备屏幕尺寸大于一定值，那么图片显示出来就是模糊的。以前一般的做法是按照普遍最高的屏幕尺寸作图，这样即使屏幕小显示也不会有问题，但是这样对小屏幕加载远超屏幕尺寸的图显然也不合适。

那么有没有既能适应各种屏幕尺寸，又能很好的控制图片大小的方案呢？

1、Javascript图片替换。

retinajs提供这样一个解决方案：当用户加载页面的时候，JS脚本会逐个检查网页中的图片确认该图片是否有一个更高分辨率的版本，如果存在的该图片则自动替换当前低分辨率的图片。

这个脚本推荐使用苹果公司制定的“@2x”标准来标示高分辨率图片的文件名。

假设你的网页上有一个图片标签：

<img src="/images/my_image.png" />
           

retinajs脚本会检查你的服务器上是否有一个"/images/[email protected]"文件存在，如果有的话就自动替换当前图片。

2、服务器端响应图片

Adaptive Images 在页面加载时探测用户设备屏幕尺寸，然后根据这个尺寸自动创建和缓存相应的图片供前端调用。这个方案的好处是不需要对HTML标签做任何更改，而且相对于客户端的逐个图片检查效率会更高。

两种方法各有优劣，具体使用还需根据设计开发具体情况而定。

转自：http://hi.baidu.com/erictseng/item/377f51caa7c19c62f7c95dcc