Skip to content

图片格式

常见的图片格式有 GIFPNG8PNG24JPEGWEBP,根据图片格式的特性和场景需要选取适合的图片格式。

GIF

GIF 图象是基于颜色列表的(存储的数据是该点的颜色对应于颜色列表的索引值),最多只支持 8 位(256 色)。GIF 文件内部分成许多存储块,用来存储多幅图象或者是决定图象表现行为的控制块,用以实现动画和交互式应用。GIF 文件还通过 LZW 压缩算法压缩图象数据来减少图象尺寸。

特性

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

更多关于 GIF:

PNG

PNG 是 20 世纪 90 年代中期开始开发的图像文件存储格式,是一种支持多种颜色的无损压缩格式。PNG 格式支持 8 位、24 位、32 位真彩色图像,支持透明度,支持动画,支持半透明,支持压缩。

特性

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

更多关于 PNG:

JPEG

JPEG 是一种针对照片视频而广泛使用的一种有损压缩标准方法。

特性

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

更多关于 JPEG:

WEBP

WebP,是一种同时提供了有损压缩与无损压缩的图片文件格式。

特性

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

更多关于 WebP:

使用建议

内容图

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

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

背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片。

  • PNG 与 GIF 格式,优先考虑使用 PNG 格式,PNG 格式允许更多的颜色并提供更好的压缩率。
    • 8 位 PNG:适合简单、颜色数量少的图像,例如简单的图标、标志。
    • 24 位 PNG:适合需要丰富色彩和细节的图像,例如照片、复杂的插图。
    • 32 位 PNG:适合需要透明背景或半透明效果的图像,通常用于 UI 设计和网页开发。
  • 图像颜色比较简单的,如纯色块线条图标,优先考虑使用 PNG8 格式,避免不使用 JPEG 格式
  • 图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式
  • 图像颜色丰富而且文件比较大的(40KB - 200KB)优先考虑 JPEG 格式
  • 条件允许的,优先考虑 WebP 代替 PNG 和 JPEG 格式

君子慎独