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

13.3　自适应图像解决方案

响应式Web图形设计

为了处理自适应图像的大小问题，下面给出一些可以采用的方法。

13.3.1　另寻他法

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

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

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

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

• 图标字体（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所示。但是没关系，我们通过缩小图像来填满栏中的剩余空间，这些看似粗糙的瑕疵便会被遮掩起来。

举个例子，我们可以找一张图像，先取其实际大小：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插件（网址是

）将所需图像转成光栅图像，或者使用Modernizr（网址是）来检测浏览器对SVG图像是否支持。

2．注意事项

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

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

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