《响应式Web图形设计》一13.3 自适应图像解决方案

简介:

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

13.3 自适应图像解决方案

响应式Web图形设计
为了处理自适应图像的大小问题,下面给出一些可以采用的方法。

13.3.1 另寻他法

一个看起来不太像解决方法的方法是:永远不要使用光栅图像,而要依赖其他格式的图像。

既然问题的核心是光栅图像的文件大小,那么如果我们可以使用其他文件格式或者技术来进行视觉呈现,自然也就可以减轻甚至消除自适应图像的麻烦了。

可以使用的技术有以下两种。

  • SVG——矢量图像就是为了缩放图像而存在的(见图13.8)。凭借前所未有的强大的浏览器的支持,如果你想要一张色彩简单或者线条简洁的图像,以前你通常会保存为GIF格式,但现在可以选择保存为SVG了(SVG的更多信息请参见第6章)。

8_9

  • 图标字体(Icon fonts)——字体与SVG类似,都是矢量图形,因此缩放效果很好。使用图标字体(见图13.9,在第10章中讨论过)是处理图形缩放边缘问题的绝妙办法。
  1. 虽说我们显然不可能完全放弃光栅图像,但作为替代方法,终归可以作为选项之一。你或许没法丢弃你所有的光栅图标,但是将其中的一部分转化成为SVG或者图标字体,总是可以让你的网站更为“响应式”。

13.3.2 压缩Retina图像

在为网页创建图像的时候,最好根据它们在浏览器中呈现的尺寸进行输出。例如,我们可以使用Photoshop生成一张115×115像素的GIF图像来作为头像图像,如图13.10所示。如果生成一张1 150×1 150像素的图像,那等于是强迫用户下载一张巨大的图像,这没有什么好处。

1.秘诀
不过既然响应式Web设计是通过设置百分比宽度来缩放图像的,我们就可以使用一张超大的图像,然后尽可能地将其压缩。虽然压缩后的图像在100%大小的时候可能看起来不完美,如图13.11所示。但是没关系,我们通过缩小图像来填满栏中的剩余空间,这些看似粗糙的瑕疵便会被遮掩起来。


10_11

举个例子,我们可以找一张图像,先取其实际大小:2 276 px×1 400 px,然后将图像压缩至0%质量(100%压缩),结果图像大小变成了460 kb。再使用ImageOptim对这张图像进一步压缩(正如我们在第7章中介绍的)。如图13.12所示,这张图像被进一步减少了14 kb,最终尺寸为446 kb。

虽然这张超大图像的体积依然比一般屏幕上的中等大小或者大尺寸图像大一些(见表13.2),但对于绝大多数设备来说,该图像已经够用了,因此这种方法值得考虑,如图13.13所示。


12_13

在老版本IE浏览器中使用SVG

老版本的IE浏览器本身不支持SVG。为了解决这个问题,可以使用jQuery插件(网址是

http://github.com/teleject/svg-swap)将所需图像转成光栅图像,或者使用Modernizr(网址是http://modernizr.com)来检测浏览器对SVG图像是否支持。

b2

2.注意事项
这种方法并不适用于所有图像。避免使用这种方法处理色彩对比强烈或者有大范围渐变的图像,如图13.14所示。


14

如果图像有大范围的渐变,压缩会引起条带色彩或者色调分离。对比强烈的图像在进行JPEG压缩时的效果不够好。为了缩小体积而丢失色彩数据后,JPEG很难保持色彩的平滑过渡。

最好是在色调、整体亮度相近的图像上使用这些方法。图像的直方图(见图13.15)应呈现平滑的“山脉”形状,而非尖锐的突起(见图13.16)。


15_16

相关文章
|
3月前
|
SQL 存储 安全
PHP 与现代 Web 应用的安全挑战与解决方案
随着 Web 应用的发展,PHP 作为一种广泛使用的服务器端脚本语言,面临着越来越复杂的安全挑战。本文探讨了当前 PHP 开发中常见的安全问题,并提供了相应的解决方案,帮助开发者构建更安全可靠的 Web 应用。 【7月更文挑战第8天】
60 1
|
7天前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
在现代Web开发领域,前后端分离已成为一种主流架构模式,它促进了开发效率、提升了应用的可维护性和可扩展性。随着实时数据交互需求的日益增长,WebSocket作为一种在单个长连接上进行全双工通讯的协议,成为了实现前后端实时通信的理想选择。在Python Web项目中,结合Flask框架与Flask-SocketIO库,我们可以轻松实现WebSocket的实时通信功能。
19 2
|
1月前
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
64 9
|
1月前
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
54 7
|
9天前
|
Web App开发 编解码 前端开发
构建响应式Web应用的最佳实践
构建响应式Web应用的最佳实践
17 0
|
28天前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
34 0
|
2月前
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
32 0
|
2月前
|
数据采集 前端开发 开发者
Angular表单控件详解:掌握模板驱动与响应式表单的精髓,让Web应用中的数据采集工作变得高效又简单,彻底告别繁琐的表单处理流程
【8月更文挑战第31天】表单是 Web 应用的关键组件,用于用户登录、注册及信息提交。Angular 作为成熟前端框架,提供了强大的表单处理功能,包括模板驱动与响应式表单。本文通过技术博客形式,详细介绍这两种表单控件,并提供示例代码,展示如何利用它们简化表单处理流程,提高开发效率。首先介绍简单的模板驱动表单,然后讲解基于 RxJS 的响应式表单,适用于复杂逻辑。通过本文,你将学会如何高效地使用 Angular 表单控件,提升应用的用户体验。
26 0
|
2月前
|
JavaScript 前端开发 API
揭秘Vue.js与JavaScript融合的神秘力量:如何一键解锁高效响应式Web应用的终极秘籍?
【8月更文挑战第30天】随着前端技术的发展,Vue.js凭借其轻量级、易上手和高度响应式的特性,在前端开发领域迅速崛起,成为构建现代Web应用的首选框架之一。Vue.js与JavaScript深度融合,使开发者能高效灵活地打造美观且功能强大的应用。本文将作为实战指南,带您深入了解Vue.js与JavaScript结合的奥秘,揭示构建高效响应式Web应用的秘籍。从Vue.js的基础开始,逐步介绍如何利用其数据驱动视图的特点,结合JavaScript的高级特性,如定时器、Promise、async/await等,提升应用的交互性和用户体验。
21 0
|
3月前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
【7月更文挑战第18天】在Python的Flask框架中,结合Flask-SocketIO库可轻松实现WebSocket实时通信,促进前后端分离项目中的高效交互。示例展示了一个简单的聊天应用:Flask路由渲染HTML,客户端通过Socket.IO库连接服务器,发送消息并监听广播。此方法支持多种实时通信协议,适应不同环境,提供流畅的实时体验。
75 3
下一篇
无影云桌面