《Web性能优化：图片优化.docxVIP

Web性能优化：图片优化HTTP Archieve有个统计，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看，图片也绝对是优化的热点和重点之一，Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了Web图片优化的方方面面，从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及。Google Web Fundamentals的说法我很喜欢：图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。真的要用图片吗？要实现需要的效果，真的需要图片吗？这是首先要问自己的问题。浏览器和Web标准的发展速度极快，记得数年前我在用微软Silverlight 1.0写视频播放器的时候，中文还不能使用自定义字体显示，所以那时候写了很多糟糕的代码把需要的文字在服务器上生成图片并缓存起来。用户下载起来很慢，搜索引擎也完全无法检索这些文字。但是现在不一样了，很多特效（渐变、阴影、圆角等等）都可以用纯粹的HTML、CSS、SVG等加以实现，实现这些效果少则寥寥数行代码，多则加载额外的库（一张普通的照片比非常强大的效果库也大了许多）。这些效果不但需要的空间很小，而且在多设备、多分辨率下都能很好的工作，在低级浏览器上也可以实现较好的功能降级。因此在存在备选技术的情况下，应该首先选择这些技术，只有在不得不使用图片的时候才加入真正的图片。备选技术CSS效果、CSS动画。提供与分辨率无关的效果，在任何分辨率和缩放级别都可以显示得非常清晰，占用的空间也很小。 网络字体。现在连很多图标库都是用字体方式提供，保持文字的可搜索性同时扩展显示的样式。 前端工程师最好能和设计师、产品经理保持沟通，帮助他们了解到什么样的效果比较“简洁、高效、可维护”，毕竟对于CSS来说改变圆角矩形的Radius可以实时看到效果，用图片的话至少要重新生成图片、切图并替换资源。Retina、高分辨率屏幕、多尺寸的设备，这些都加快了非图片特效的发展，想想在高分辨率屏幕下Windows 7的惨不忍睹，就知道原生的图片资源绝对不是多多益善。图片格式的选择如果效果真的需要图片来表现，那么选择图片格式是优化的第一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等等，我们首先说明各种图片格式的特点图片格式压缩方式透明度动画浏览器兼容适应场景JPEG有损压缩不支持不支持所有复杂颜色及形状、尤其是照片GIF无损压缩支持支持所有简单颜色，动画PNG无损压缩支持不支持所有需要透明时APNG无损压缩支持支持FirefoxSafariiOS Safari需要半透明效果的动画WebP有损压缩支持支持ChromeOperaAndroid ChromeAndroid Browser复杂颜色及形状浏览器平台可预知SVG无损压缩支持支持所有（IE8以上）简单图形，需要良好的放缩体验需要动态控制图片特效?其中APNG和WebP格式出现的较晚，尚未被Web标准所采纳，只在特定平台或浏览器环境可以预知的情况下加以采用，虽然均可以在不支持的环境中较好的功能降级，但本节暂不讨论这两种格式。图片格式选择过程如下：颜色丰富的照片，JPG是通用的选择人眼的结构很适合查看JPG压缩后的照片，可以充分的忽略并在脑中补齐细节 JPG在压缩率不高时保留的细节还是不错的 WebP能够比JPG减少30%的体积，但目前兼容性较差如果需要较通用的动画，GIF是唯一可用的选择GIF支持的颜色范围为256色，而且仅支持完全透明/完全不透明GIF在显示颜色丰富的动画时可能出现颜色不全、边缘锯齿等问题 如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式SVG是使用XML定义的矢量图形，生成的图片在各种分辨率下均可自由放缩SVG中可以通过JavaScript等接口自由变换图片特效，可以完成其中部分元素的自由旋转、移动、变换颜色等 如果需要清晰的显示颜色丰富的图片，PNG比较好PNG-8能够显示256种颜色，但能够同时支持256阶透明，因此颜色数较少但需要半透明的情景（如微信动画大表情）可以考虑PNG-8 PNG-24可以显示真彩色，但不支持透明，颜色丰富的图片推荐使用（如屏幕截图、界面设计图） PNG-32可以显示真彩色，同时支持256阶透明，效果最好但尺寸也最大 图片尺寸的选择尺寸，曾经是最不需要讨论的话题，但自从Retina出现之后世界就变得复杂多了。关于移动设备上的像素和尺寸，展开说