看完这张图就知道，JPEG、PNG还有SVG，到底该怎么挑着用。回想1993年，Mosaic浏览器把图片弄进网页里，世界这才有了视觉体验。GIF和JPEG那时候早就有了，PNG和SVG还在肚子里憋着。没几年工夫，图片就变成了网页的灵魂：Logo、截图、品牌图、数据图啥的，用处多得是。选错格式就跟给自己网站埋雷一样吓人。 先说JPEG，这东西老当益壮呢。1992年由联合图像专家小组搞出来的，因为是有损压缩，所以名字直接就叫JPEG。它抓住了人眼觉得亮度比颜色重要的特点，把看不清的细节给扔了，换来的是体积大大变小。压缩得越狠，丢的信息越多，但你往往看不出来。 什么时候用JPEG最合适？像照片、3D渲染、带阴影的画这种色彩和亮度变化大的场景，JPEG能把多余的信息精准砍掉；但如果是矢量图形、截图或者线稿这种边缘锐利、颜色单一的东西，JPEG反而会把细节给破坏掉。 在Photoshop保存面板里有个质量滑块，从0到100%代表不同的压缩力度。50%到60%这个区间算是网页用图的黄金比例，看着和原图没两样。把Exif和IPTC这些元数据删掉，还能再省5%到10%。用TinyJPG或者ImageOptim这种App和在线工具一按就能把空间榨干。 再看PNG，它是个专门负责透明的家伙。1995年出来的时候叫“可移植网络图形”，因为用的是无损压缩技术，反复保存也不会丢东西；最重要的是它能做透明效果，是唯一能真正抠图的栅格格式。PNG的压缩效率比GIF高25%，还支持那种慢慢变亮的渐进显示和调色板优化。 哪些情况用PNG最香？线稿、图标、Logo这种颜色少、边缘又尖锐的东西；还有那些需要透明背景的剪贴画和UI元素。JPEG在这方面直接歇菜。 用8位调色板的话就是把24位颜色降到256色，文件一下子就小了；Pngquant在不影响透明的前提下砍掉一些颜色；Pngyu和ImageAlpha能让你一边操作一边看到不同色深的效果。在线工具TinyPNG能把10KB的Logo压到2KB，肉眼基本看不出来差别。 至于GIF这个老古董动画鼻祖，虽然现在过时了但还没完全消失。1989年就有了，只支持256色和二进制透明通道，压缩率还不如PNG高。因为是一行一行加载的，看着有点卡。不过它在动画方面的历史地位没人能抹杀。 除非是做那种特别复古的小游戏或者表情包，不然还是把动画任务交给SVG或者视频吧。GIF就给它个“怀旧”的标签得了。 最后来说说SVG，这才是矢量图形的未来之星。它的全称是“可伸缩矢量图形”，用XML加CSS再加JavaScript这种组合拳来画图。不管你把图放大多少倍都不会糊，响应式、可交互、可动画这些都是它的拿手好戏。 做数据可视化、图标库或者需要反复调整大小的Logo时最适合SVG；线稿和插画的边缘由路径构成的细节随便怎么缩放都不变形；如果需要JavaScript驱动的动画也很方便直接操作DOM就能搞定。 清理一下没用的锚点：用Illustrator的“导出为”而不是“另存为”，能把那些没用的属性都去掉；Sketch导出的SVG里有时候会打包空文件夹这是需要手动删掉的；用SVGOMG和Compressor这两个在线工具一键就能瘦身下来。1KB的图标轻轻松松压到400B不到。 浏览器兼容还是个大问题——当年IE6不认PNG透明色的时候大家很头疼。所以掌握每种格式的脾气很重要。 只要能在好看和省流量之间找到那个平衡点就行。让用户更快看到清楚的内容，也让设计师有更大的空间去搞动画和响应式设计——这就是优化图像格式的最终目标。