Web开发中的响应式图片处理

目前手机等移动设备网站开发已经有比较好的解决方案，一种是响应式网站，像笔者博客一样，PC网站就是移动网站，一种是把移动网站和PC网站分开，类似淘宝那样。从网站SEO的角度来说，两者并无差别，也各有利弊，不论采取那种方式也都能解决移动设备浏览问题。随着移动设备和类型越来越多，我们几乎不太可能针对某一类设备建设单独的网站，不论PC网站和移动网是否分开建设，那都意味着我们的移动网站将会面临越来越多各不相同设备进行访问，也就是说即使是建设单独的移动网站，我们也必须要考虑网站符合用户的设备特性。

一般来说，网站很容易实现自适应，笔者博客就是一个完全自适应的网站，但自适应网站有一个难点，那就是图片问题，图片在网页中的重要性毋须去提，那么我们在移动网站中如何展示给用户合适的图片呢，一般有以下几种做法:

1,直接把质量最好的图片加入到html中，用户用不同的设备访问时，通过CSS或者javascript控制其大小，这样直接忽略不同设备的尺寸，但可能会因为加载过大的图片占用太大带宽而增加访问时间、耗费过多移动流量。

2,异步加载，事先加载一张较小的图片页面中，再通过javascript获取用户设备信息，按需加载图片，这样解决了速度问题，对于网站排名可能不利。

3,在html头部利用javasctipt生成一个cookie，包含设备分辨率和像素比等信息，在用户代理请求图片时，这个cookie会和其它请求信息一起发送到服务器，在服务端获取到cookie之后，对图片进行处理，然后传送给客户端。这样做解决图片尺寸和优化问题，但灵活性较差，还可能由于用户不支持cookie而导致工作失败，另外在网页头部增加javascript的方式总让人感觉有那么一点奇怪。

为了解决移动开发中的图片响应式问题，HTML5标准专门增加img标签的srcset和sizes属性，srcset以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像，每一个字符串列表包含一个图像的URL和可选的宽度描述符(像素加“w”表示)和像素密度描述符(像素比+“x”表示，默认为1x),w和x不能同时使用。sizes表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括一个媒体条件和一个资源尺寸的值,它用来指定图像的预期尺寸,当srcset使用 ‘w’ 描述符时，用户代理使用当前图像大小来选择srcset中合适的一个图像URL 如果img不包含srcset或者srcset中没有’w’描述符，sizes不生效。 被选中的尺寸影响图像的显示大小（如果没有CSS样式被应用的话）。如果没有设置srcset属性，或者没值，那么sizes属性也将不起作用。读起来很拗口，要弄彻底弄清楚，必须明白三个概念:设备CSS像素，设备物理像素，设备像素比，如果你不清楚，可以查看我之前的这篇文章 响应式网站建设中的像素和宽度问题 。

如果你弄清楚了以上三个概念，知道一些高端设备为了让图片显示更清晰，会在浏览器底层把图片进行压缩，在显示器上用两个或者更多的物理像素显示图片上个一个CSS像素，就能理解在w是指设备的物理像素宽度，x是指设备的设备像素比，那么下面两段代码的意思分别是:

<img src="demo-small.jpg" srcset="demo-small.jpg 300w,demo-medium.jpg 600w,demo-big.jpg 750w"> 
300物理像素宽的设备加载demo-small.jpg,600加载demo-medium.jpg,750加载demo-big.jpg
<img src="demo-small.jpg" srcset="demo-small.jpg 1px,demo-medium.jpg 2x,demo-big.jpg 2.5x">
1设备像素比加载demo-small.jpg,2加载demo-medium.jpg,2.5加载demo-big.jpg

我们这里遇到了一个问题，用w对像素的控制更加灵活，因为相同的设备像素比可能有着悬殊的像素差别，进而导致显示大小发生变化，例如，有两台设备，一台CSS像素宽720，像素比2，另外一台CSS像素宽1024，像素比也是2;有两张图片，分辨率分别为360*200的demo-small.jpg和720*400的demo-big.jpg，用像素比控制显示:<img src=”demo-small.jpg” srcset=”demo-small.jpg 1px,demo-big.jpg 2x”>,则两台设备上都会显示分辨率为720*400的demo-big.jpg，则他们所占屏幕宽度为:

设备1: ([图片像素]720 ÷ [像素比]2) ÷ [CSS像素]720 = 50%

设备2: ([图片像素]720 ÷ [像素比]2) ÷ [CSS像素]720 = 35%

用’w’描述符的方式可能非常灵活的控制加载的图片和展示的大小，还是上面的设备，可以通过w指定合适的图片，也可以通过sizes指定图片的显示大小。

综上我们可以得知，使用srcset和描述符，浏览器能根据客户端的情况，自动选择需要加载的图片，进行定向加载，相对于文章开头说的三种响应式图片的解决方案，灵活性强，节省流量，快速网站加载速度，是更好的响应式图片解决办法。

动态Responsive Image生成方案

srcset方案的一个弊端是需要指定不同屏幕情况下的多个图片，如果手动生成这些图片，费时费力，利用Responsive Image工具，可以动态自动生成图片，操作如下：

1，下载代码，并把所有访问图片的请求重定向到Responsive Image的plm.php文件。

2，创建图片缓存目录，打开plm文件，根据提示做好配置。

3，获取指定图片的操作如下:

剪裁:example.com/example.jpg/(crop:[x[,y,]]width[,height])

缩放:example.com/example.jpg/(reduce:[x[,y,]]width[,height])

括号里面为动作，可以连续多次使用:

example.com/example.jpg/(crop:[x[,y,]]width[,height])/(reduce:[x,[y,]]width[,height])为先进行剪裁，然后压缩处理

[]中的为可选值，x,y不填默认为0,height不填默认为图片高度（剪裁）和宽度缩小后图片高度（缩放）

可以参考Responsive Image的index.html文件进行配置。

参考资料

1. 响应式图片srcset全新释义sizes属性w描述符
2. HTML img element
3. Responsive Image