认识达内从这里开始

图片的优化在web前端性能优化中会经常用到的一个优化方式，而本文我们就通过案例分析来简单学习一下，web前端图片性能优化方法分享。

1、图片格式的选择

如果效果真的需要图片来表现，那么选择图片格式是优化的一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等等。

其中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阶透明，效果好但尺寸也大

2、图片尺寸的选择

尺寸，曾经是不需要讨论的话题，但自从Retina出现之后世界就变得复杂多了。

这里只说我们关心的部分和结论，我们需要分清不同类型的像素：CSS像素和设备像素。一个CSS像素可能包含多个设备像素。对于图片来说，在高DPI的屏幕上需要使用分辨率更高的图片，如果我们讨论的是Retina，那么就需要2倍分辨率(几乎4倍尺寸)的图片。这几乎没有取巧的空间，屏幕就是那么大，需要的图片也就是那么大。

我们能够控制的地方是“恰好”显示所需尺寸的图片。例如在屏幕中通过CSS或者标签的wihth/height属性，将一副200x200的图片调整为100x100大小，那么这其中就有(200x200)-(100x100)=30000个像素是浪费的，这占到了图片尺寸的75%!

之所以有这么大的浪费，是因为图片的尺寸与面积基本成正比，与宽高的平方成正比。因此良好的计算客户端实际显示的图片尺寸，能够大大减小图片的大小。即使只有长和宽都只有10px被浪费，但是当图片足够大时，这部分也将产生很大影响。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。