《响应式Web图形设计》一13.4 多图像解决方案

简介:

本节书摘来异步社区《响应式Web图形设计》一书中的第13章,第13.4节,作者: 【美】Christopher Schmitt 译者: 曾斌 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

13.4 多图像解决方案

响应式Web图形设计
如果你想对图像质量有更多把握,同时还可以不拘泥于一种图像格式,那么是时候该考虑下picture元素和srcset属性了。

13.4.1 picture元素

picture元素(见图13.17)是响应式图像社区(网址是http://picture.responsiveimages.org/)提出的新元素,旨在帮助网页设计师在用户可见的内容中指定合适的图像。


17

如果用户使用一个高清分辨率的大屏幕来访问网站,那么我们可以为之提供高清大图。


q2


如果用户使用常规小屏幕上网,那么我们可以指定一张小一点的图像来取代超大的高清图像。


q3


如果浏览器无法解析picture元素,那么原有的img元素将作为后退选项。

q4

13.4.2 srcset属性

针对自适应图像的另一种解决方式(见图13.18)是采用srcset属性(网址是http://dev.w3.org/
html5/srcset/)。这一属性是img元素的延伸,主要针对浏览器窗口宽度和屏幕密度来采用合适的图像。


q5


这一属性有多种取值。每个值都带有指向图像的URL地址,同时列有视口尺寸,也可以加上屏幕密度。


18


提出一种全新的响应式图像格式

为了避免在响应式Web设计中无时无刻不在解决的光栅图像问题,我们需要一种本质上为数据锁的图像格式。

例如,非常流行的MP3音频文件格式实际上是将一系列元数据信息存储在一个音频标签里。通过这个音频标签,iTunes可以找到类似于歌曲名称、艺术家、专辑名称、年份等的信息,如图13.19所示。

我们需要类似的图像格式,不是为图像捕获元信息,而是存储图像的不同版本。

一个“图像”文件能够存储不同版本的图像:缩略图、适用于手机移动端的图像、用于桌面计算机的图像、适用于Retina屏幕的图像和便于打印的图像等。浏览器可以将网页的浏览环境发送给服务器端,然后请求从该图像的存储单元中找到分辨率合适的图像版本。


19


例如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在屏幕中以合适的宽度呈现适当的图像。


20


Retina屏幕(iPad)选择不同的显示图像

使用Scott Jehl的picturefill的10个步骤如下所示。

① 访问picturefill polyfill的脚本地址:http://github.com/scottjehl/picturefill并下载代码。


q6


② 把picturefill.js复制到文件目录下,并将该脚本在文档头部引入。


q7


③ 把同位于zip下载文件中的matchmedia.js 引入文档头部。这一段JavaScript脚本用于侦测浏览器是否支持媒体查询,但目前尚无标准接口来实现这一功能。


q7


④ 将img元素设置为使用适合移动设备的较小的图像。


q8


⑤ 由于picturefill是JavaScript驱动的,所以我们需要确保用户浏览器中的JavaScript可用。将作为平稳回退的图像使用noscript标签包裹起来,保证在JavaScript可用的时候该图像不可见。


q9

⑥ 将noscript和img元素使用div元素包裹起来。给data-picture、data-alt和title分配属性值。data-alt值替代常规alt值,供屏幕阅读器使用。如果你希望鼠标悬浮在图像上时有小提示的话,请给title属性设置一个值。


q9


⑦ 由于img元素被包裹在noscript元素里隐藏了起来,请使用一张适合手机用户的图像替换基础图像,并用带有data-srcset属性的div元素包裹起来。如果浏览器是高分辨率屏,便会展示大图像。


q10

⑧ 使用另一个div元素,设置另一个尺寸更大的图像的源地址。模拟媒体查询,设置显示尺寸更大的图像的最小屏幕宽度。在这个例子中,最小宽度是25em;只有超过了最小宽度,才会显示下一级宽度更大的图像。如果显示器是高清的,将URL指向一张高清图像。


q11


⑨ 继续通过data-media属性添加浏览器宽度分界点,通过data-srcset添加其他图像地址,直到全部设置完毕。


q12


281.tif

相关文章
|
1月前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
45 3
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
166 3
|
2月前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
82 0
|
2月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
61 5
|
2月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
2月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
2月前
|
前端开发 JavaScript 测试技术
构建响应式Web应用程序:React实战指南
【10月更文挑战第9天】构建响应式Web应用程序:React实战指南
|
2月前
|
移动开发 前端开发 小程序
浅谈-web屏幕适配的解决方案
浅谈-web屏幕适配的解决方案
57 0
浅谈-web屏幕适配的解决方案
|
3月前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
在现代Web开发领域,前后端分离已成为一种主流架构模式,它促进了开发效率、提升了应用的可维护性和可扩展性。随着实时数据交互需求的日益增长,WebSocket作为一种在单个长连接上进行全双工通讯的协议,成为了实现前后端实时通信的理想选择。在Python Web项目中,结合Flask框架与Flask-SocketIO库,我们可以轻松实现WebSocket的实时通信功能。
73 2
|
2月前
|
JavaScript 前端开发 安全
轻松上手Web Worker:多线程解决方案的使用方法与实战指南
轻松上手Web Worker:多线程解决方案的使用方法与实战指南
61 0