《响应式Web设计：HTML5和CSS3实践指南》——1.3节基于cookie及JavaScript的响应式图像

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第1章，第1.3节基于cookie及JavaScript的响应式图像，作者（美） Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

1.3 基于cookie及JavaScript的响应式图像
使用复杂的服务器端逻辑也能实现响应式图像。有时因为一些特殊的需求，开发者往往不能够采取最简单的方法来实现特定的目标。之前提到的基于宽度百分比的方法依赖于客户端来实现对于大图像文件的缩放。而本方法则是在服务器端依据客户的请求，返回恰当大小的图像文件。如果你正为网页加载过慢导致的网站性能问题而烦恼，也许该方法能够给不堪重负的服务器负载和网络带宽带来一些改进。

1.3.1 准备工作
本条目所涉及的方法都需要在服务器端实现相应的功能。首先，服务器端需要提供PHP服务。其次，服务器端需要实现根据客户端的请求返回3张不同大小的图像的功能。

1.3.2 实现方式
下面的JavaScript代码比较简单，创建一个基于用户设备屏幕尺寸的cookie。当客户端请求服务器端的图像时，运行在服务器端的PHP服务便会依据该屏幕参数决定返回何种大小的图像。

现在通过你的图像编辑软件，打开一张尺寸较大的图像，然后保存两份较小尺寸的新图像。如果原始图像为300px，那么新图像的大小可以分别保存为200px和100px。然后分别命名为robot.png、robot-med.png及robot-low.png，并上传到images文件夹中。
最后很重要的一点，将下面的HTML文件存放到服务器端的文档根目录中：

虽然该方法只能根据屏幕大小返回特定的图像，并不完全是自适应的，但是该方法在服务器端提供与CSS媒介查询一样的功能。可以通过CSS给这些图片加上样式，或者使用JavaScript实现动画效果。将不同的方法结合在一起使用，能够更好地提供响应式内容。
本方法中所涉及的代码最初由我聪明的同行所创建，放置在http://www.html.it/articoli/responsive-images-con-i-cookie/上。

1.3.3 工作原理
首先HTML文件中创建cookie用以记录设备屏幕的尺寸。当向服务端发起获取图片的请求时，就如同PHP中的include声明一样。首先检查声明的文件是否存在，然后读取cookie中的屏幕尺寸，最后返回与之适配的图像资源。