WEB图片格式的选择

Question

WEB图片格式的选择？

Answer 1

抛砖引玉：

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

图片格式	压缩方式	透明度	动画	浏览器兼容	适应场景
JPEG	有损压缩	不支持	不支持	所有	复杂颜色及形状、尤其是照片
GIF	无损压缩	支持	支持	所有	简单颜色，动画
PNG	无损压缩	支持	不支持	所有	需要透明时
APNG	无损压缩	支持	支持	Firefox Safari iOS Safari	需要半透明效果的动画
WebP	有损压缩	支持	支持	Chrome Opera Android Chrome Android Browser	复杂颜色及形状 浏览器平台可预知
SVG	无损压缩	支持	支持	所有（IE8以上）	简单图形，需要良好的放缩体验 需要动态控制图片特效

其中APNG和WebP格式出现的较晚，尚未被Web标准所采纳，只有在特定平台或浏览器环境可以预知的情况下加以采用，虽然均可以在不支持的环境中较好的功能降级，但本节暂不讨论这两种格式。图片格式选择过程如下：