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、有损紧缩、无损紧缩等等，咱们首要阐明各种图像格局的特色：

其间APNG和WebP格局呈现的较晚，尚未被Web规范所选用，只要在特定平台或浏览器环境能够预知的情况下加以选用，尽管均能够在不支撑的环境中较好的功能降级，但本节暂不评论这两种格局。图像格局挑选进程如下：