特性

  • 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
  • 可设置透明色以产生对象浮现于背景之上的效果。
  • 由于采用了8位压缩,最多只能处理256种颜色,故不宜应用于真彩色图片。

更多关于GIF:

GIF文档

PNG

特性

  • 支持256色调色板技术,文件体积小。
  • 无损压缩
  • 最高支持48位真彩色图像以及16位灰度图像。
  • 支持Alpha通道的透明/半透明特性。
  • 支持图像亮度的Gamma校准信息。
  • 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。
  • 渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。
  • 使用CRC防止文件出错。
  • 最新的PNG标准允许在一个文件内存储多幅图像。

PNG格式

特性

  • 适用于储存24位元全采影像
  • 不支持透明或动画
  • 压缩比越高影像耗损越大,失真越严重
  • 压缩比在10左右肉眼无法辨出压缩图与原图的差别

更多关于JPEG:

WEBP

特性

  • 同时提供有损压缩和无损压缩两种图片文件格式
  • 文件体积小,无损压缩后,比 PNG 文件少了 45% 的文件大小;有损压缩后,比 JPEG 文件少了 25% - 34% 文件大小
  • 浏览器兼容差,目前只支持客户端 Chrome 和 Opera 浏览器以及安卓原生浏览器(Andriod 4.0+),

更多关于WebP:

维基百科 - WEBP

团队约定

内容图多以商品图等照片类图片形式存在,颜色较为丰富,文件体积较大

  • 优先考虑 JPEG 格式,条件允许的话优先考虑 WebP 格式
  • 尽量不使用PNG格式,PNG8 色位太低,PNG24 压缩率低,文件体积大

背景图

  • PNG 与 GIF 格式,优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
  • 图像颜色比较简单的,如纯色块线条图标,优先考虑使用 PNG8 格式,避免不使用 JPEG 格式
  • 图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式
  • 图像颜色丰富而且文件比较大的(40KB - 200KB)优先考虑 JPEG 格式