本节书摘来异步社区《响应式Web图形设计》一书中的第13章,第13.4节,作者: 【美】Christopher Schmitt 译者: 曾斌 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。
13.4 多图像解决方案
响应式Web图形设计
如果你想对图像质量有更多把握,同时还可以不拘泥于一种图像格式,那么是时候该考虑下picture元素和srcset属性了。
13.4.1 picture元素
picture元素(见图13.17)是响应式图像社区(网址是http://picture.responsiveimages.org/)提出的新元素,旨在帮助网页设计师在用户可见的内容中指定合适的图像。
如果用户使用一个高清分辨率的大屏幕来访问网站,那么我们可以为之提供高清大图。
如果用户使用常规小屏幕上网,那么我们可以指定一张小一点的图像来取代超大的高清图像。
如果浏览器无法解析picture元素,那么原有的img元素将作为后退选项。
13.4.2 srcset属性
针对自适应图像的另一种解决方式(见图13.18)是采用srcset属性(网址是http://dev.w3.org/
html5/srcset/)。这一属性是img元素的延伸,主要针对浏览器窗口宽度和屏幕密度来采用合适的图像。
这一属性有多种取值。每个值都带有指向图像的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/)。
13.4.3 使用图像补丁脚本
picture和srcset的问题在于它们尚处于提议阶段,本书写作期间还没有被任何浏览器支持。
网页开发人员Scott Jehl编写了一个补丁,叫作picturefill,如图13.20所示,从而使使用picture和srcset成为了可能。现在我们就可以使用picturefill在屏幕中以合适的宽度呈现适当的图像。
Retina屏幕(iPad)选择不同的显示图像
使用Scott Jehl的picturefill的10个步骤如下所示。
① 访问picturefill polyfill的脚本地址:http://github.com/scottjehl/picturefill并下载代码。
② 把picturefill.js复制到文件目录下,并将该脚本在文档头部引入。
③ 把同位于zip下载文件中的matchmedia.js 引入文档头部。这一段JavaScript脚本用于侦测浏览器是否支持媒体查询,但目前尚无标准接口来实现这一功能。
④ 将img元素设置为使用适合移动设备的较小的图像。
⑤ 由于picturefill是JavaScript驱动的,所以我们需要确保用户浏览器中的JavaScript可用。将作为平稳回退的图像使用noscript标签包裹起来,保证在JavaScript可用的时候该图像不可见。
⑥ 将noscript和img元素使用div元素包裹起来。给data-picture、data-alt和title分配属性值。data-alt值替代常规alt值,供屏幕阅读器使用。如果你希望鼠标悬浮在图像上时有小提示的话,请给title属性设置一个值。
⑦ 由于img元素被包裹在noscript元素里隐藏了起来,请使用一张适合手机用户的图像替换基础图像,并用带有data-srcset属性的div元素包裹起来。如果浏览器是高分辨率屏,便会展示大图像。
⑧ 使用另一个div元素,设置另一个尺寸更大的图像的源地址。模拟媒体查询,设置显示尺寸更大的图像的最小屏幕宽度。在这个例子中,最小宽度是25em;只有超过了最小宽度,才会显示下一级宽度更大的图像。如果显示器是高清的,将URL指向一张高清图像。
⑨ 继续通过data-media属性添加浏览器宽度分界点,通过data-srcset添加其他图像地址,直到全部设置完毕。
281.tif