《响应式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

相关文章
|
8天前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
46 4
|
2月前
|
存储 移动开发 JSON
H5学习之路之Web存储解决方案
H5学习之路之Web存储解决方案
10 0
|
5天前
|
JSON 前端开发 安全
Web前端开发中的跨域问题及解决方案
【2月更文挑战第8天】在Web前端开发中,跨域是一个常见且具有挑战性的问题。本文将深入探讨跨域产生的原因、影响以及多种解决方案,帮助开发者更好地理解和解决跨域问题。
|
10天前
|
缓存 前端开发 安全
前后端分离架构下Java Web开发的挑战与解决方案
前后端分离架构下Java Web开发的挑战与解决方案
|
2月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
32 0
|
2月前
|
JSON 安全 算法
JSON Web Token(缩写 JWT) 目前最流行、最常见的跨域认证解决方案
JSON Web Token(缩写 JWT) 目前最流行、最常见的跨域认证解决方案
65 0
|
2月前
|
Web App开发 前端开发 测试技术
【Web API系列】使用异步剪贴板API(async clipboard)的图像的编程复制和粘贴
【Web API系列】使用异步剪贴板API(async clipboard)的图像的编程复制和粘贴
44 1
|
3月前
|
前端开发
响应式web设计 - Viewport 和 网格布局
响应式web设计 - Viewport 和 网格布局
24 0
响应式web设计 - Viewport 和 网格布局
|
6月前
|
编解码 前端开发 UED
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(1)
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(1)
|
6月前
|
编解码 前端开发 JavaScript
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(2)
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(2)

相关产品

  • 云迁移中心