在网页上大部分有图片构成，也就是说超过一半的流量和时间都是用来下载图片。从性能优化的角度看，图片也绝对是优化的热点和重点之一。
图片格式的选择
如果效果真的需要图片来表现，那么选择图片格式是优化的第一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等等，我们首先说明各种图片格式的特点
图片格式 压缩方式 透明度 动画 浏览器兼容 适应场景
JPEG 有损压缩 不支持 不支持 所有 复杂颜色及形状、尤其是照片
GIF 无损压缩 支持 支持 所有 简单颜色，动画
PNG 无损压缩 支持 不支持 所有 需要透明时
APNG 无损压缩 支持 支持 Firefox 、Safari、iOS Safari 需要半透明效果的动画
WebP 有损压缩 支持 支持 Chrome、Opera、Android、Chrome、Android、Browser 复杂颜色及形状浏览器平台可预知
SVG 无损压缩 支持 支持 所有（IE8以上） 简单图形，需要良好的放缩体验需要动态控制图片特效
颜色丰富的照片，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阶透明，效果最好但尺寸也最大
优化jpg和png
工具 用途
jpegtran 优化JPG图片
OptiPNG 无损PNG优化
AdvPNG 无损PNG优化
PNGQuant 有损PNG优化
ImageOptim (Mac)
Mac平台下非常赞的图片优化工具，只需要把需要优化的图片拖拽进ImageOptim，就能够完成对图片的优化。设置选择的也很丰富，目前支持JPG和PNG的优化。这是我在写文章时最常用到的工具，把网站用到的图片拖进去，优化就完成了~
Kraken (Web)
在免费模式下可以上传图片，优化后打包下载，很多国外企业也选择了它的收费服务。亲自测试Kraken的图片优化结果比ImageOptim一般要小3%左右，效果不错，当然价格也不错。适合偶尔有图片优化需求，或者不在开发机上没有优化软件可以使用的情况。
智图 (Web)
腾讯ISUX团队有篇文章介绍智图：http://isux.tencent.com/zhitu.html
国货当自强，腾讯的智图工具推出不久，但实测效果很好，而且提供了Gulp的自动化支持，这部分会在后面自动优化章节介绍。只想建议一句，Kraken的首页比智图美好几百倍…… 而且把压缩前的PNG和压缩后的JPG放在一起对比大小，真的没关系么~
优化SVG
所有较新的浏览器都支持可缩放矢量图(SVG)，SVG是基于XML的图片格式，适用于二维图片。可以将SVG标记直接嵌入网页，也可以作为外部资源嵌入。可以通过大多数基于矢量的绘图软件创建SVG文件。这是一段简单的SVG图形：
就写这么多了，如有补充的欢迎
网友评论