详情
Web图形是在线内容用户体验的关键，尤其是现在的用户使用多种移动设备：智能手机、信息亭、平板电脑、笔记本电脑和台式机。本书提供了基础的HTML和CSS语法，并深入研究了色彩、布局、图像、排版、动画、视频和音频等。
曾斌 译
北京
图书在版编目（CIP）数据
响应式Web图形设计/（美）施密特（Schmitt，C.）著；曾斌译.--北京：人民邮电出版社，2014.4
ISBN 978-7-115-34776-3
Ⅰ.①响… Ⅱ.①施…②曾… Ⅲ.①网页制作工具 Ⅳ.①TP393.092
中国版本图书馆CIP数据核字（2014）第037533号
版权声明
Designing Web and Mobile Graphics:Fundamental Concepts for Web and Interactive Projects
ISBN : 978-0-321-85854-2
Copyright©2013 by Christopher Schmitt
All rights reserved. Authorized translation from the English language edition published by New Riders.
本书中文简体字版由美国New Riders 出版公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
◆著 ［美］Christopher Schmitt
译 曾斌
责任编辑 赵轩
责任印制 王玮
◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京精彩雅恒印刷有限公司印刷
◆开本：800×1000 1/16
印张：14.75
字数：351千字 2014年4月第1版
印数：1-3500册 2014年4月北京第1次印刷
著作权合同登记号 图字：01-2012-8611号
定价：49.00元
读者服务热线：（010）81055410 印装质量热线：（010）81055316
反盗版热线：（010）81055315
广告经营许可证：京崇工商广字第0021号
网页中的图形设计是在线内容用户体验的关键，尤其是现在的用户会使用多种设备访问网页，如智能手机、平板电脑、笔记本电脑、桌面电脑，甚至是智能电视。本书以创建响应式Web的角度，介绍了基础的HTML和CSS语法，并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。
本书结构整、轻松易懂，能够帮助Web设计新手快速入门，并打下坚实的基础。
献给Nick、Elisabeth、Matt、Mary、Rose、Michael、Ryan、Megan、Meredith、Gianna
曾经，传统设计师在Photoshop中设计网页，并将其导出为一张巨大的图像，并声称这就是网站。
但设计师在意识到可以使用HTML和CSS设计出伟大的网页后，他们开始改变设计方式，但又遇到了新的问题：网页至少要960像素宽或固定宽度。
随着智能手机和平板电脑等移动设备的普及，网页既可以横向，也可以纵向显示。设计不再以桌面浏览器窗口的宽度为标准。为此，我们重新审视最佳实践并且采用新技术。
本书想要告诉初学者或已入门的网页设计师如何创建并强化网页中的图形部分，来满足当前的网站和移动标准。
在一个漂亮的网站中，所有这些工作一个人就能完成。亲爱的读者，你也可以。
本书提供了在开发环境下关于HTML和CSS的基础知识。为了帮助你掌握技术和技巧，我们将逐章深入地介绍更加先进或者独一无二的设计解决方案。
做好准备，出发！
网页设计在不断发生着变化，本书将为你介绍图形和其他基础知识。
“在为美国国会效力期间，我倡议创建互联网。”
——戈尔
（前美国副总统）
在这一章中，我们会首先学习借助 Adobe Illustrator、Photoshop之类的图像软件来准备网页图像的技巧和技术。然后，我们将逐步尝试将图像导出为多种格式。最后，我们会探讨如何优化和压缩图像，以便网站加载更加迅捷。
Adobe Illustrator是专为编辑矢量图形而设计的软件。大部分的网络图像目前仍然是基于栅格的，但随着浏览器对SVG图像的支持日益增强，Illustrator正逐渐成为网页设计师首选的图像处理软件。
打开Adobe Illustrator，你会看到一系列选项卡和面板，其中有一个用于网页开发的浮动面板。请按照以下操作步骤在Illustrator中打开Web工作区：“窗口>工作区>Web”（见图7.1）。
Web工作区包括以下几种面板。
■ 变形面板（Transform）可对标尺、尺寸或位置进行微调（见图7.2）。
■ 调色板可用来收集和存储颜色样本。同时，你也可以通过“窗口>扩展功能>Kuler”调出Kuler扩展。该扩展支持从Adobe社交媒体网站选取由社区中的海量配色方案（见图7.3）。
■ 符号面板（Symbols）收集了可以重复利用的图形实例。如果你在文档中放置了图形实例后，又对其做了一些更改，那么文档中的图形实例就会相应地自动更新（见图7.4）。
■ 外观面板（Appearance）用于改变透明度和混合模式。单击Illustrator对象可以改变一个对象的笔触、填充、透明度和其他属性（见图7.5）。
■ 画板面板（Artboards）可用来调整文档工作区域的尺寸，修改其名称；图层面板用于维护同一个工作区域内的图形，从而便于查找和组合（见图7.6）。
在针对网页进行设计的时候，你需要确保使用了正确的布局尺寸。和预先设定好的工作区设置一样，Illustrator预置了一系列文档尺寸，这些尺寸涵盖了浏览器和移动设备的宽度和高度设置。
1．桌面网站设计
选择“文件>新建”，打开“新建文档”对话框（见图7.7）。
从“新建文档配置文件”下拉菜单里，选择Web（见图7.8），设置文档的尺寸。
硬件性能变得越来越强，质量也在变得更好，桌面显示器亦是如此。目前较为流行的预设尺寸有1 024×768 和 1 280×800，当然，你也可以自己手动设定更大的尺寸，例如1 366×768（见图7.9）。
！为Retina屏幕定制Illustrator文档
Illustrator并没有为苹果的Retina或者其他高密度屏幕定制尺寸。不过，所幸Retina的尺寸实际上就是一般尺寸的两倍。因此，为iPhone的Retina显示屏进行设置时，你应当将尺寸设为640×960。iPad 的Retina 屏尺寸应该设置为1 536×2 048。如果你想要获得更多与移动设备图形相关的信息，请查看第13章。
2．移动网页设计
说到小尺寸，要是能够提供手机和平板的尺寸，自然最好不过了。而Illustrator恰好内置了一套移动端设备尺寸，从新建文档配置文件（Profile）菜单中可以选择所需的设备（见图7.10）。
在下拉菜单中，有iPad、iPhone、Fire/Nook、Galaxy S和Xoom的尺寸。
3．检查站点尺寸
通过Google Analytics分析来查看网站的访问数据（第4章/“网页设计中的挑战”中有详细的描述）。登录Google Analytics分析，选择“内容（content）>页面数据（In-Page Apalytics）”（见图7.11）。
接下来，选择“浏览器尺寸Browser Size”（见图7.12），并调整Web使用者百分比滑块，从而显示有多少网站访客可以看到网页中没有被遮盖住的部分（见图7.13）。
！网页不需要留出血
由于网页不需要留“出血”部分（印刷术语，意思是设计要包括印刷部分的边缘，以便于裁剪），这里将其设置为0 即可。
4．设置画板
当你想要创造许多个相似图像的时候，使用Illustrator的画板（artboards）特性就再方便不过了。例如你需要设计一系列logo，以便应用于移动设备、桌面计算机、黑白印刷或全彩印刷（见图7.14）。新建的Illustrator文档通常只有一个画板，不过你可以自己动手多添加几个。
想要给Illustrator文件添加更多画板，请按照以下4个步骤进行。
1 单击工具栏里的“画板工具”。
2 单击并拖曳一个盒子到文档区域，从而创建一个新画板。
3 在屏幕右上角部分填入相应数值，对画板尺寸进行微调。
4 在画板面板中双击画板名称，重命名画板。
5．选择像素精度
想要查看图像导出为光栅图像的效果，请选择“视图>像素预览”（见图7.15）。
将一幅图像从矢量图导出为光栅图像，中间会有一个转换过程。尽管原图像是基于矢量的，新导出的光栅图像还是会有一圈光环状的像素点（见图7.16）。
为减少图像周围不必要的像素，选择“视图>像素预览”（见图7.17），然后对图像进行缩放和微移，使之与像素点能对齐得更精准（见图7.18）。
Illustrator有很强大的导出能力，专为导出网页适用的图像而设计。
1．为导出的图像去除多余空白
想要将图像导出为适合网页发布的格式时，选择“文件>存储为Web和设备所用格式”。如果图像比画板小，那么图像周围的空白区域也会作为图像的一部分导出，这会生成一张相当大的图（见图7.19）。
为了只导出画板上的图案，取消原本勾选的“剪切到画板”选项（见图7.20），然后单击应用。
想要从Illustrator中导出光栅图像，请遵从以下6步。
1 准备好图像后，选择“文件 > 存储为Web和设备所用格式”，调出对话框。
2 在右上角，选择想要使用的图像格式：GIF、JPEG或者PNG-8。正如第6章中所说，生成的PNG-24通常在文件大小上会比导出的JPEG格式大不少，但如果原计划是用GIF图像的话，我们完全也可以使用PNG-8。
3 如有需要，则可以对每种格式的设置做些调整。
4 在“双联”或者“四联”的视图中比较不同格式的图像效果，检查质量和文件大小。
5 当准备妥当后，选中图像格式，单击“存储”按钮。
6 在“将优化结果存储为”对话框中，给文件起个名字，单击“保存”按钮即可。
2．导出两倍大的图像
鉴于苹果公司把自家的显示屏像素数增加了一倍，为了适配其设备，我们需要导出原图两倍大的图像才行。当设计是基于矢量图形的时候，针对苹果的Retina屏幕来对图像进行放大，便变成了一件非常轻松的事情。
在“保存为Web和设备所用格式”对话框中，设置百分数为200（见图7.21），然后单击“确定”按钮退出此选项卡。
使用Illustrator除了可以导出常规光栅图像之外，还可以导出基于矢量的SVG图像。因此我们得以保存矢量信息——允许图像在放大或者缩小的同时，不丢失一丝一毫的画质。
从Illustrator导出矢量图像要遵从以下6步：
1 如需删除图像周围多余的空白，选择“对象>画板>适合图稿边界”。
2 选择“文件>存储为…”，调出对话框。
3 从格式下拉菜单里选择SVG格式。
4 如果你的图像里有文本，选择子集化下拉菜单中的“仅使用的字形”，这有助于减少文件大小。
5 “小数位数”这一栏内的数值越小，意味着图像品质越差。增大此值可以提升图像品质，但与此同时，文件大小也会变大。比较能够接受的值为1到7。
6 单击“确定”按钮，保存SVG文件。
早在网页出现之前，Photoshop就已经成为图像处理软件的典范了。到目前为止，它依然是最好的图像处理软件，其内置工具足以胜任处理在网页中使用的图像。
选择“文件>新建”，调出“新建”对话框（见图7.22）。
从预设下拉菜单中选择“Web”。根据项目需求，从预先设定好的尺寸里挑出适合你的网站或banner（横幅广告）的尺寸。
如果是针对移动设备的设计，那就选择专为移动设备所做的预设。正如图7.23所呈现的，这里也有针对Retina屏幕和常规屏幕的选项。
除Photoshop之外的其他工具
Photoshop 并不是唯一的图像处理软件。还可以试试Adobe Fireworks，特别是在创建和优化网页图像方面，这是款非常卓越的软件。
等你准备好用于网页的图像或者logo，接下来就要将其以网络图像格式导出。让我们重新梳理一遍准备网页图像的流程。
按照下面的7个步骤，在Photoshop中导出光栅图像:
1 准备好图像后，选择“文件 > 存储为Web和设备所用格式”，弹出对话框。
2 在右上方选择想要保存的图像格式：GIF、JPEG或者PNG-8。与PNG-24相关的内容请参见第8章。
3 如果需要的话，对各种格式的设置进行相应调整。
4 在双联或者四联视图中，比较不同格式的最终效果，检查图像质量和文件尺寸。
5 单击“Device Central中测试”按钮，查看图像下载速率。
6 等准备好的图像存储为Web图像格式后，选择“优化”选项卡，单击“存储”按钮。
7 在“将优化结果存储为”对话框中为文件命名，之后单击“保存”按钮。
为图像命名的时候，要明确命名的目的。下面是关于命名的6个小提示。
1 让文件名包含尽可能多的描述信息。为图像命名为“图_1”并不能让它容易地被搜索到，这对网站毫无用处。命名应该尽量精确。例如，使用“百合花”命名要比仅仅用“花”更好。此外，命名准确清晰，且包含关键字，这样的图像也有助于提升网站的Google搜索排名。
2 文件名要以字母开头，而不要用数字。理想情况下，文件名应该体现文件自身的含义，这样不但易于搜索，也方便对文件进行管理。日期或者数字应该跟在描述的后面。
3 在文件名中只使用字母、数字和下划线，这样可以保证格式简单，易于浏览器检索；插入文件名中的特殊字母只会让文件在一般的搜索查找中难以辨识。
4 用一定的格式表示日期，年份用四位表示，之后是两位的月份和两位的日期：YYYY-MM-DD。这样易于搜索和按时间排序。例如，1月日期都会排在3月之前，每一年都是如此。
5 让文件名尽量精简。使用缩写，例如将 information 的缩写为 imfo，government 可缩写为gov。
6 记住，文件名通常都会以文件类型的扩展名结尾，例如 .gif、.jpg、.png 或者 .svg。因此，通用汽车logo的GIF文件名为“gm_logo_2012.gif”；而去年拍摄的照片可能就会被命名为“百合花_2013-03-04.jpg”。
遵循上述惯例，不但可以保证电脑里的图像文件易于辨识和检索，而且还能最大化网页浏览器对其搜索的便利性。
尽管Photoshop可以导出用于网络的不同格式的优秀图像，但它通常并不能让文件变得尽可能小。
Mac系统中用来最大限度优化图像的工具是 ImageOptim（见图7.24）。
你只需要把图像文件拖曳到ImageOptim的窗口中，8种不同的压缩工具就会开始自动处理它们（见图7.25）。用不着担心，这一压缩过程既不会有损画质，也不会削弱图像的视觉整体性。
压缩后，ImageOptim不会创建元图像的新副本。而是自动将老图像替换为最新优化过的图像（但是不要担心，它只会处理你导出的图像，不会影响你的设计源文件）。
批处理
如果你需要将大量图像转换为另一种格式，那么就能利用到Photoshop中的一个伟大的特性——动作。
为此，你要录制下自己想要Photoshop自动执行的一系列操作，然后将该动作应用到一个图像文件夹上，单击开始。如果顺利的话，你的图像就会被自动处理好了。如果事情不顺，出了点小意外，也不要沮丧。这是一个自动化的过程，计算机需要你提供非常准确的指令。
Windows系统的用户可以使用PNGGauntlet（http:// pnggauntlet.com），但这款软件不仅仅只能处理PNG格式图像（见图7.26）。
PHP、HTML和GZIP
如果你的网站使用的是PHP语言，把这一行代码加入到你的PHP文件顶部：
<? ob_start("ob_gzhandle"); ?>
这将会压缩HTML文件，加快网络传输速度。
尽可能地压缩图像文件大小，有助于为网站访客提供更快、更好的访问体验。因此，采取HTTP压缩是非常值得的，这是一种更高级的压缩技术。通过使用这种技术，在文件被服务器通过网络上发送到用户的计算机之前，服务器端会使用gzip工具，尽可能地对文件进行压缩。随后，在文件被浏览器打开之前，再被解压出来。
1．检查gzip
或许你已经在使用gzip了，也可能你的同事或者合作者已经安装了它。为了确认是否启用了gzip，请访问http://gzipwtf.com，并输入你的网址（见图7.27）。
2．设置gzip
如果你还没有开始使用gzip，那么应该先去读一读网站所在的网络托管服务器的技术支持文档，或者咨询一下技术支持人员，找到开启gzip的最好方法。他们很有可能已经按步骤将指导文档写好了。
你的网站可以抓住“零耐心”的访客么？
Akamai是一家致力于帮助客户更快地把页面传送给访客（无论用户身在何处）的公司，其客户包括Facebook和Twitter。据Akamai所言，网页完全加载完毕的标准时间应当是2秒钟。
如果没有技术支持的话，你也可以按照以下6个步骤自己开启gzip。
1 访问 HTML5 Boilerplate（http://html5boilerplate.com.）。
2 单击页面顶部的资源代码链接，打开https:// github.com/h5bp/html5-boilerplate。
3 选择文件列表里的.htaccess文件（https://github.com/h5bp/ html5-boilerplate/blob/master/. htaccess）。
4 选择并复制文件中和gzip压缩相关的所有文本。在本例中相关的代码块从第152行开始。拖动滚动条，直到找到你需要的文本段落。
5 将内容粘贴到你自己网站的.htaccess文件末尾。
6 将编辑好的.htacess文件上传到你的Web服务器，放在根目录下面。好！这样就完成了！
在本章中，我们研究了如何使用Illustrator和Photoshop这两款专业图像软件处理网页和移动设备的图像。高效的工作意味着需要高效运用这项工作所需要的工具。这包括创建图像，然后保证它们以最好的样貌从图像处理软件中导出，接下来，确保它们被压缩，以敏捷的速度发布到网站访客的眼前。在下一章中，我们将会对带透明度和阴影的图像进行研究。
“于是，我对健身教练说，‘你可以教我劈叉吗？’他说，‘你柔韧性（flexible）如何？’我说，‘我每周二没有时间来。’”
——蒂姆·瓦因
（英国作家、演员、喜剧家、制片人）
在我们所处的时代，浏览器无处不在。现在，人们有许多设备可以连接到因特网，每一个设备都有用于网上冲浪的不同的浏览器和屏幕。
这样的多重用户体验对图像运用提出了前所未有的挑战。
因为我们调整设计来适应不同的设备，所以同样需要对图像一些调整：改变大小。然而，基于网格的图像格式只能够保存固定高和宽的图像。
多亏了CSS，我们可以对图像进行缩放，以便应用于响应式设计。图像被过度拉伸，超过实际尺寸时会失真，因此我们要先将图像的max-width（最大宽度）属性设置为100%：
img{
max-width:100%;
height:auto;
}
在图13.1中，我们在左、右两栏放置了相同的600×600像素的小猫图像。由于图像宽度比左栏宽度小，因此呈现效果还不错。但是，右侧的图像比右栏宽，这时我们需要使用CSS规则，将图像缩小，同时保持高宽比不变。
我们可以对视频使用同样的方法。在img元素的CSS规则选择器处添加video选择器（同时为Flash视频添加object）:
img, video, object {
max-width: 100%;
height: auto;
}
背景图并非如此
这里我们特别讨论一下网页内容中的图像——内嵌图像。用CSS设置为HTML元素背景图的图像，通过使用媒体查询可以很容易地根据情境使用。内嵌图像可做不到。
使用CSS缩放图像只能算解决一半问题。光栅图像的脆弱在于必须为显示尺寸准备像素足够大的图像。图像被拉长或拉宽的时候，它没有多余的像素数据供其添加。因此，边缘会变得模糊不清。这就是为什么一开始最好从尽可能最大的尺寸开始着手处理图像。该尺寸可能是一个非常大的显示器宽度。
在创作本书期间，戴尔公司推出了UltraSharp U3011显示器，30寸超大尺寸，2 560×1 600分辨率。因此，能够匹配此屏幕的自适应图像可能会非常大（正如第4章所述，先确认你的网站浏览数据，看看你的网站是不是真的需要适应这么大的显示器）。
图13.2到图13.4 展现了像素数据的增加与图像文件大小增加的关系。
以今天的标准来看，戴尔的此款屏幕大了点，但还有另一类屏幕设备以截然不同的方式打包数据：它们缩小了像素点，提高了密度。苹果公司称其为Retina高密度屏，也正成为Windows操作系统硬件制造的趋势。
通过width:max-width这类CSS规则的控制，常规显示器尺寸的高密度屏能够呈现所有的视觉信息。为了显示出清晰的图像，我们需要提供两倍于原有显示尺寸的图像才可以。很自然地，更多的像素信息意味着图像文件也更大了（见表13.1）。
尽管图13.5、图13.6和图13.7在“物理体积”上更大，但是，在高密度屏幕上的大图像和常规屏幕上的小一些的图像看起来大小是一样的。
这些自适应图像的体积在不断增大，但使用宽带连接的用户还可以接受目前的下载速度。但是我们不会总有那么好的运气，可以一直使用速度超快的Wi-Fi热点。
上班、下班途中，或者出游时，我们只能依赖于缓慢的移动网络服务来保持网络连接。尽管我们的手机和平板电脑越来越多地使用了高清屏，然而我们还得指望因地变化的、顺畅的互联网网络服务。
因此，如果我们使用了大尺寸图像（无论是高清还是常规屏幕），可能会强迫用户接受多于他们实际需求的数据——尤其是他们的套餐数据流量有限的时候。
为了处理自适应图像的大小问题，下面给出一些可以采用的方法。
一个看起来不太像解决方法的方法是：永远不要使用光栅图像，而要依赖其他格式的图像。
既然问题的核心是光栅图像的文件大小，那么如果我们可以使用其他文件格式或者技术来进行视觉呈现，自然也就可以减轻甚至消除自适应图像的麻烦了。
可以使用的技术有以下两种。
■ SVG——矢量图像就是为了缩放图像而存在的（见图13.8）。凭借前所未有的强大的浏览器的支持，如果你想要一张色彩简单或者线条简洁的图像，以前你通常会保存为GIF格式，但现在可以选择保存为SVG了（SVG的更多信息请参见第6章）。
■ 图标字体（Icon fonts）——字体与SVG类似，都是矢量图形，因此缩放效果很好。使用图标字体（见图13.9，在第10章中讨论过）是处理图形缩放边缘问题的绝妙办法。
虽说我们显然不可能完全放弃光栅图像,但作为替代方法，终归可以作为选项之一。你或许没法丢弃你所有的光栅图标，但是将其中的一部分转化成为SVG或者图标字体，总是可以让你的网站更为“响应式”。
在为网页创建图像的时候，最好根据它们在浏览器中呈现的尺寸进行输出。例如，我们可以使用Photoshop生成一张115×115像素的GIF图像来作为头像图像，如图13.10所示。如果生成一张 1 150×1 150 像素的图像，那等于是强迫用户下载一张巨大的图像，这没有什么好处。
1．秘诀
不过既然响应式Web设计是通过设置百分比宽度来缩放图像的，我们就可以使用一张超大的图像，然后尽可能地将其压缩。虽然压缩后的图像在100%大小的时候可能看起来不完美，如图13.11所示。但是没关系，我们通过缩小图像来填满栏中的剩余空间，这些看似粗糙的瑕疵便会被遮掩起来。
举个例子，我们可以找一张图像，先取其实际大小：2 276 px×1 400 px，然后将图像压缩至0%质量（100%压缩），结果图像大小变成了460 kb。再使用ImageOptim对这张图像进一步压缩（正如我们在第7章中介绍的）。如图13.12所示，这张图像被进一步减少了14 kb，最终尺寸为446 kb。
虽然这张超大图像的体积依然比一般屏幕上的中等大小或者大尺寸图像大一些（见表13.2），但对于绝大多数设备来说，该图像已经够用了，因此这种方法值得考虑，如图13.13所示。
在老版本IE浏览器中使用SVG
老版本的IE浏览器本身不支持SVG。为了解决这个问题，可以使用jQuery插件（网址是http://github.com/teleject/svg-swap）将所需图像转成光栅图像，或者使用Modernizr（网址是http://modernizr.com）来检测浏览器对SVG图像是否支持。
2．注意事项
这种方法并不适用于所有图像。避免使用这种方法处理色彩对比强烈或者有大范围渐变的图像，如图13.14所示。
如果图像有大范围的渐变，压缩会引起条带色彩或者色调分离。对比强烈的图像在进行JPEG压缩时的效果不够好。为了缩小体积而丢失色彩数据后， JPEG很难保持色彩的平滑过渡。
最好是在色调、整体亮度相近的图像上使用这些方法。图像的直方图（见图13.15）应呈现平滑的“山脉”形状，而非尖锐的突起（见图13.16）。
如果你想对图像质量有更多把握，同时还可以不拘泥于一种图像格式，那么是时候该考虑下picture元素和srcset属性了。
HD.jpg 2x">
picture元素（见图13.17）是响应式图像社区（网址是http://picture.responsiveimages.org/）提出的新元素，旨在帮助网页设计师在用户可见的内容中指定合适的图像。
<picture width="500" height="500">
<source media="(min-width: 45em)"srcset="pizza-large-1.jpg 1x, pizzalarge-
HD.jpg 2x">
<source media="(min-width: 18em)"srcset="pizza-med-1.jpg 1x, pizza-med-HD.
jpg 2x">
<source srcset="pizza-small-HD.jpg 1x, pizza-small-HD.jpg 2x">
<img src="pizza-small-1.jpg" alt="A photo of a supreme pizza.">
<p><a href="pizza-small-1.jpg">A photo of a supreme pizza.</a></p>
</picture>
如果用户使用一个高清分辨率的大屏幕来访问网站，那么我们可以为之提供高清大图。
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="pizza-large-1.jpg 1x, pizzalarge-
<source media="(min-width: 18em)" srcset="pizza-med-1.jpg 1x, pizza-med-HD.
jpg 2x">
<source srcset="pizza-small-1.jpg 1x, pizza-small-HD.jpg 2x">
<img src="pizza-small-1.jpg" alt="A photo of a supreme pizza.">
<p><a href="pizza-small-1.jpg">A photo of a supreme pizza.</a></p>
</picture>
如果用户使用常规小屏幕上网，那么我们可以指定一张小一点的图像来取代超大的高清图像。
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="pizza-large-1.jpg 1x, pizzalarge-
HD.jpg 2x">
<source media="(min-width: 18em)" srcset="pizza-med-1.jpg 1x, pizza-med-HD.
jpg 2x">
<source srcset="pizza-small-1.jpg 1x, pizza-small-HD.jpg 2x">
<img src="pizza-small-1.jpg" alt="A photo of a supreme pizza.">
<p><a href="pizza-small-1.jpg">A photo of a supreme pizza.</a></p>
</picture>
如果浏览器无法解析picture元素，那么原有的img元素将作为后退选项。
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="pizza-large-1.jpg 1x, pizzalarge-HD.jpg 2x">
<source media="(min-width: 18em)" srcset="pizza-med-1.jpg 1x, pizza-med-HD. jpg 2x">
<source srcset="pizza-small-HD.jpg 1x, pizza-small-HD.jpg 2x">
<img src="pizza-small-1.jpg" alt="A photo of a supreme pizza.">
<p><a href="pizza-small-1.jpg">A photo of a supreme pizza.</a></p>
</picture>
针对自适应图像的另一种解决方式（见图13.18）是采用srcset属性（网址是http://dev.w3.org/html5/srcset/）。这一属性是img元素的延伸，主要针对浏览器窗口宽度和屏幕密度来采用合适的图像。
<figure>
<img alt="Pizza Supreme"
src="pizza.jpeg"
srcset="pizza-HD.jpeg 2x,
pizza-phone.jpeg 480w,
pizza-phone-HD.jpeg 480w 2x">
</figure>
这一属性有多种取值。每个值都带有指向图像的URL地址，同时列有视口尺寸，也可以加上屏幕密度。
提出一种全新的响应式图像格式
为了避免在响应式Web设计中无时无刻不在解决的光栅图像问题，我们需要一种本质上为数据锁的图像格式。
例如，非常流行的MP3音频文件格式实际上是将一系列元数据信息存储在一个音频标签里。通过这个音频标签，iTunes可以找到类似于歌曲名称、艺术家、专辑名称、年份等的信息，如图13.19所示。
我们需要类似的图像格式，不是为图像捕获元信息，而是存储图像的不同版本。
一个“图像”文件能够存储不同版本的图像：缩略图、适用于手机移动端的图像、用于桌面计算机的图像、适用于Retina屏幕的图像和便于打印的图像等。浏览器可以将网页的浏览环境发送给服务器端，然后请求从该图像的存储单元中找到分辨率合适的图像版本。
例如pizza-phone-HD.jpeg 480w 2x。其中，480w意味着浏览器窗口宽度最大为480 px（单位只能是px）。
值中的2x将CSS定义的1 px设置为2个设备物理像素，这意味着是高密度屏。
因此整体来说，这意味着如果浏览器宽度小于 481 px，并且屏幕为高密度屏，则使用 pizza-phone-HD.jpeg图像。
方法不止一种
还有别的方法可以为响应式Web设计提供合适的图像，例如使用服务器端算法使该过程自动化。具体参见Chris Coyier 的博客文章“你该使用哪一种方法实现响应式图像？”（http://css-tricks.com/which-responsive-images-solution-should-you-use/）。
picture和srcset的问题在于它们尚处于提议阶段，本书写作期间还没有被任何浏览器支持。
网页开发人员Scott Jehl编写了一个补丁，叫作picturefill，如图13.20所示，从而使使用picture和srcset成为了可能。现在我们就可以使用picturefill在屏幕中以合适的宽度呈现适当的图像。
使用Scott Jehl的picturefill的10个步骤如下所示。
1 访问picturefill polyfill的脚本地址：http://github.com/scottjehl/picturefill并下载代码。
<head>
<meta charset=utf-8 />
<title>Picturefill</title>
<script src="picturefill.js"></script>
</head>
2 把picturefill.js复制到文件目录下，并将该脚本在文档头部引入。
<head>
<meta charset=utf-8 />
<title>Picturefill</title>
<script src="picturefill.js"></script>
<script src="external/matchmedia.js"></script>
</head>
3 把同位于zip下载文件中的matchmedia.js 引入文档头部。这一段JavaScript脚本用于侦测浏览器是否支持媒体查询，但目前尚无标准接口来实现这一功能。
<img src="external/imgs/pic-Small-180x111-@1x-72ppi.jpg" alt="Kayaking in front of Sandy Spit, BVI"/>
4 将img元素设置为使用适合移动设备的较小的图像。
<!-- Fallback content for non-JS browsers. -->
<noscript>
<img src="external/imgs/pic-Small-180x111-@1x-72ppi.jpg" alt="Kayaking in front of Sandy Spit, BVI"/>
</noscript>
5 由于picturefill是JavaScript驱动的，所以我们需要确保用户浏览器中的JavaScript可用。将作为平稳回退的图像使用noscript标签包裹起来，保证在JavaScript可用的时候该图像不可见。
<div data-picture data-alt="Kayaking in front of Sandy Spit, BVI"
title="Photo of kayakers in front of Sandy Spit, BVI"> <!-- Fallback content for non-JS browsers. -->
<noscript><img src="external/imgs/pic-Small-180x111-@1x-72ppi.jpg"
alt="Kayaking in front of Sandy Spit, BVI"></noscript>
</div>
6 将noscript和img元素使用div元素包裹起来。给data-picture、data-alt和title分配属性值。data-alt值替代常规alt值，供屏幕阅读器使用。如果你希望鼠标悬浮在图像上时有小提示的话，请给title属性设置一个值。
<div data-picture data-alt="Kayaking in front of Sandy Spit, BVI" title="Photo of kayakers in front of Sandy Spit, BVI">
<div data-srcset="external/imgs/pic-Small-180x111-@1x-72ppi.jpg 1x,
external/imgs/pic-Small-360x221-@2x-72ppi.jpg 2x"></div>
<!-- Fallback content for non-JS browsers. -->
<noscript><img src="external/imgs/pic-Small-180x111-@1x-72ppi.jpg"
alt="Kayaking in front of Sandy Spit, BVI"></noscript>
</div>
7 由于img元素被包裹在noscript元素里隐藏了起来，请使用一张适合手机用户的图像替换基础图像，并用带有data-srcset属性的div元素包裹起来。如果浏览器是高分辨率屏，便会展示大图像。
<div data-picture data-alt="Kayaking in front of Sandy Spit, BVI" title="Photo of kayakers in front of Sandy Spit, BVI">
<div data-srcset="external/imgs/pic-Small-180x111-@1x-72ppi.jpg 1x,
external/imgs/pic-Small-360x221-@2x-72ppi.jpg 2x"></div>
<div data-media="(min-width: 25em)" data-srcset="external/imgs/pic-Medium-375x231-@1x-72ppi.jpg 1x,external/imgs/pic-Medium-750x461-@2x-72ppi.jpg 2x"></div>
<!-- Fallback content for non-JS browsers. -->
<noscript><img src="external/imgs/pic-Small-180x111-@1x-72ppi.jpg"
alt="Kayaking in front of Sandy Spit, BVI"></noscript>
</div>
8 使用另一个div元素，设置另一个尺寸更大的图像的源地址。模拟媒体查询，设置显示尺寸更大的图像的最小屏幕宽度。在这个例子中，最小宽度是25em；只有超过了最小宽度，才会显示下一级宽度更大的图像。如果显示器是高清的，将URL指向一张高清图像。
<div data-picture data-alt="Kayaking in front of Sandy Spit, BVI" title="Photo of kayakers in front of Sandy Spit, BVI">
<div data-srcset="external/imgs/pic-Small-180x111-@1x-72ppi.jpg 1x, external/imgs/pic-Small-360x221-@2x-72ppi.jpg 2x"></div>
<div data-media="(min-width: 25em)" data-srcset="external/imgs/pic-Medium-375x231-@1x-72ppi.jpg 1x, external/imgs/pic-Medium-750x461-@2x-72ppi.jpg 2x"></div>
<div data-media="(min-width: 50em)" data-srcset="external/imgs/pic-Large-480x295-@1x-72ppi.jpg 1x, external/imgs/pic-Large-960x591-@2x-72ppi.jpg 2x"></div>
<div data-media="(min-width: 62.5em)" data-srcset="external/imgs/pic-ExtraLarge-768x472-@1x-72ppi.jpg 1x, external/imgs/pic-ExtraLarge-1536x845-@2x-72ppi.jpg 2x"></div>
<!-- Fallback content for non-JS browsers. -->
<noscript><img src="external/imgs/pic-Small-180x111-@1x-72ppi.jpg"alt="Kayaking in front of Sandy Spit, BVI"></noscript>
</div>
9 继续通过data-media属性添加浏览器宽度分界点，通过data-srcset添加其他图像地址，直到全部设置完毕。
<div data-picture data-alt="Kayaking in front of Sandy Spit, BVI"title="Photo of kayakers in front of Sandy Spit, BVI">
<div data-srcset="external/imgs/pic-Small-180x111-@1x-72ppi.jpg 1x, external/imgs/pic-Small-360x221-@2x-72ppi.jpg 2x"></div>
<div data-media="(min-width: 25em)" data-srcset="external/imgs/pic-Medium-375x231-@1x-72ppi.jpg 1x, external/imgs/pic-Medium-750x461-@2x-72ppi.jpg 2x"></div>
<div data-media="(min-width: 50em)" data-srcset="external/imgs/pic-Large-480x295-@1x-72ppi.jpg 1x, external/imgs/pic-Large-960x591-@2x-72ppi.jpg 2x"></div>
<div data-media="(min-width: 62.5em)" data-srcset="external/imgs/
pic-ExtraLarge-768x472-@1x-72ppi.jpg 1x, external/imgs/pic-ExtraLarge-
1536x845-@2x-72ppi.jpg 2x"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. -->
<noscript><img src="external/imgs/pic-Small-180x111-@1x-72ppi.jpg"alt="Kayaking in front of Sandy Spit, BVI"></noscript>
</div>
！使用更多或更少的图像
在这个例子中，我们使用了picturefill来处理多图像资源的问题。你的设计方案或许用不到这么多的图像，也或许更多。这算是一种行得通的方式，是否最终适合你的设计要由你自己来决定。
10 如果你需要支持IE 8及其以下版本的浏览器，而这些浏览器并不支持媒体查询，那么使用条件注释来给桌面端调用大图像，否则老版本的IE浏览器将会使用小图像。
自适应图像是现代网页设计的一大难关。幸好现在的浏览器发展迅速，而且通过嵌入字体和使用原生矢量图形，我们得以免去不少处理光栅图像的繁重工作，让我们的网页可以弹性地自适应众多的网络接入设备。
在原生浏览器能够兼容所有的主流浏览器之前，我们可以采用一些变通的方法和技术来指定合适的栅格图像。接下来，我们将会面对3种颇有难度的图像对齐难题，以及应对这些难题的方法。
