比较JPG、PNG、GIF、BMP图片格式

本文比较JPG、PNG、GIF、BMP四种常见的图片格式的优劣。

图片属性

首先需要了解电子图片的一些基本概念:

分辨率

  • 分辨率通常写作 水平像素数×垂直像素数 的格式,比如 1080×720 ,表示图片的长、宽分别是多少个像素点。
  • 也可以用 DPI(Dots Per Inch)、PPI(Pixels Per Inch)表示,即每英寸内有多少个像素点。
  • 图片的分辨率越高,就能显示更多像素点,即更多内容、更多细节。

位深度

  • 位深度指图片中的每个像素点用几个二进制位表示。这些二进制位有多少种取值,就能存储多少种颜色。
  • 位深度可以取值为 1、4、8、16、24、32 。例如:
    • 位深度为 1 bit 时,只能存储黑白 2 种颜色。
    • 位深度为 8 bit 时,可以存储 256 种颜色。
    • 位深度为 24 bit 时,可以存储 2563 种颜色。
  • 图片的位深度越大,就能显示更多种颜色。

颜色模式

  • 黑白图
    • 位深度为 1 bit 。每个像素点的取值为 0~1 。
  • 灰度图
    • 位深度为 8 bit 。每个像素点的取值为 0~256 ,对应黑色、白色、中间的 254 种灰色。
    • 只有一个灰度通道。
    • 灰度图转换成黑白图时,通常选择 128 作为阙值,如果一个像素点的灰度值大于等于阙值,则记作 1(即白色),否则计 0(即黑色)。
  • 索引颜色
    • 位深度为 8 bit 。
    • 原理:将图中的颜色数减少到 256 种以内,把它们记在一个调色板上,然后记录图中的每个像素点采用编号 0~256 中的哪种颜色。
    • 优点:位深度为 8 bit ,因此图片体积较小。
    • 缺点:最多只能显示 256 种颜色。
  • RGB
    • 位深度为 24 bit ,又称为真彩色。
    • 有 RGB 三个通道,每个通道占 8 bit 。
  • RBGA
    • 位深度为 32 bit 。
    • 比 RGB 模式多了一个描述透明度的 Alpha 通道。
  • CMYK
    • 位深度为 32 bit ,有 CMYK 四个通道。
    • 印刷图片时通常转换成 CMYK 模式,减少印刷前后的色差。
      • 因为 CMYK 印刷品是通过反光来显示的,而 RGB 图片是通过主动发光来显示的,两者存在不可避免的色差。

图片体积

  • 指图片占用的磁盘空间。
  • 例如一张分辨率为 1080×720 、位深度为 24 bit 的图片,其理论体积为:1080×720×24 bit ≈ 2.2 MB 。实际体积可能偏小,因为通常会采用压缩算法。
  • 图片的分辨率越高、位深度越大,显示效果越好,越接近人眼看到的炫彩世界。但是这样图片的体积越大,占用更多磁盘空间。
  • 如果一张图片的体积很大,比如 10GB ,即使有足够的磁盘空间容纳它,但可能没有足够的内存空间读取它,导致不能显示。

压缩方式

  • 不压缩:不压缩图片的体积,直接保存原图。
  • 无损压缩:可以压缩图片的体积,且压缩时没有损失图片的任何质量。
  • 有损压缩:可以压缩图片的体积,但压缩时降低了图片的质量。压缩率越高,画质越差。

比较四种图片格式

图片格式JPG/JPEGPNGGIFBMP
位深度最高为24 bit最高为32 bit最高为8 bit,画质差最高为32 bit
图片体积较小较大很小很大
能否压缩有损压缩,压缩率可以很高(通过舍弃一些不影响人眼观看的细节,来压缩体积)无损压缩,压缩率低无损压缩,压缩率高不压缩
能否透明不能能(在RGB通道之外加了一个Alpha通道,用0~256表示透明度)能(但是不能控制透明度,要么完全透明要么不透明)不能
总结适合保存色彩丰富、却要压缩体积的图片适合保存色彩丰富、又不限制体积的图片、透明图层适合保存色彩简单、而体积很小的图片。不仅可以存储单张图片,还支持用多帧组成动画体积很大,不适合在网络传输
  • 欢迎纠正

实验分析

  1. 在PhotoShop中创建一个1920×1080分辨率的画板,采用RGB模式(每个通道占8位)。清空画板使其透明,只能看到方格背景。
    在这里插入图片描述
  2. 将这个图片分别保存为位深度为24 bit的jpg、png、bmp格式,以及位深度为8 bit的gif格式,结果如下。bmp图片由于不压缩,体积很大。

在这里插入图片描述

  1. 在透明画板上画一道彩虹:
    在这里插入图片描述
  2. 再分别保存为四种格式的图片,结果如下。这里是使用默认的压缩率,实际上gif、jpg图片还可用压缩到更小的体积。
    在这里插入图片描述
  3. 它们在PhotoShop中的显示效果如下:
    png:彩虹的两侧是透明的。彩虹的边缘从不透明逐渐淡化,直到完全透明。
    在这里插入图片描述
    gif:彩虹的两侧是透明的。但边缘生硬,要么不透明,要么完全透明。这证明了 gif 格式不能控制透明度。
    在这里插入图片描述
    jpg:透明信息被丢失,被纯白色填充。
    在这里插入图片描述
    bmp:跟 jpg 图片看起来一样。既然 bmp 格式占用很大磁盘空间,采用 jpg 格式不是更香?
    #pic_center =300x300
  • 10
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值