常用图片格式的原理与理解

353 阅读11分钟

图片格式

  1. JPEG(Joint Photographic Experts Group):广泛应用于摄影和图像压缩,适合保存彩色照片和复杂图像。
  2. HEIC(High Efficiency Image Format):苹果公司推出的高效图片格式,以取代 JPEG,能够保持更高的图像质量但文件大小更小。
  3. PNG(Portable Network Graphics):支持透明度和索引色,适合保存带有透明背景的图像或图标。
  4. GIF(Graphics Interchange Format):支持动画和透明度,适合保存简单动画和图标。
  5. BMP(Bitmap):无压缩的位图格式,适合保存简单的图像,但文件大小较大。
  6. TIFF(Tagged Image File Format):高质量的图像格式,支持多页和多图层,适合保存印刷品质图像。
  7. WEBP:由 Google 开发的新型图片格式,具有更高的压缩率和更好的图像质量,适合在互联网上使用。
  8. SVG(Scalable Vector Graphics):基于 XML 的矢量图像格式,可以进行缩放而不失真,适合保存图标和简单的矢量图形。

WebP结合有损与无损

旨在提供更好的压缩率和图像质量

  1. 颜色空间转换:WebP 通常使用 YUV 颜色空间,类似于 JPEG 中的亮度和色度分量。通过将 RGB 图像转换为 YUV,WebP 可以更好地处理图像的色彩信息。
  2. 块分割和预测:WebP 将图像分割为 4x4 或 16x16 的块,并对每个块进行预测编码。预测编码利用了相邻像素之间的空间相关性,通过预测当前块内像素的值来减少数据量。
  3. 有损压缩:WebP 使用一种无损压缩算法和一种有损压缩算法。对于无损压缩,WebP 使用了 LZ77 算法和哈夫曼编码来减小数据的大小。而对于有损压缩,WebP 使用了变换编码和熵编码来减小数据量,并且可以根据压缩质量参数进行压缩比的调整。
  4. Alpha 通道压缩:WebP 还可以压缩图像的透明通道(Alpha 通道),以在支持透明度的图像中提供更好的压缩效果。WebP 使用了无损或有损的方法来压缩 Alpha 通道数据。

WebP 可以提供比 JPEG 更好的压缩率和图像质量,特别是对于图像中的细节和颜色信息。它通常适用于 Web 端的图像显示和传输,可以减少图像的加载时间和带宽占用。

在 Web 端,可以使用像 canvas 或图像处理库(如 sharp、gm 等)提供的 API 来实现 WebP 压缩。一般来说,WebP 压缩可以根据需求和性能要求进行调整,可以选择不同的压缩质量参数和压缩模式来达到最佳的图像质量和文件大小平衡

PNG一种无损图像压缩算法

用于减小图像文件的大小

  1. 颜色空间转换:与 JPEG 不同,PNG 不需要进行颜色空间转换,可以直接使用 RGB 颜色空间。
  2. 像素编码:PNG 使用一种称为差分预测的方法来编码像素数据。差分预测通过计算当前像素与其周围像素的差异来表示像素值,从而可以通过较少的位数保存像素信息。
  3. 无损压缩:PNG 使用一种称为 DEFLATE 的压缩算法对差分预测后的像素数据进行进一步压缩。DEFLATE 是一种通用的无损压缩算法,它使用了 LZ77 算法和哈夫曼编码来减小数据的大小。
  4. 滤波器:在差分预测和压缩之前,PNG 还会应用一系列滤波器来改善数据的压缩性能。这些滤波器通常用于减少相邻像素之间的差异,从而提高压缩效果。

JPEG有损图像压缩算法

用于减少图像文件的大小。

  1. 颜色空间转换:JPEG 首先将 RGB 颜色空间转换为亮度(Y)和色度(Cb和Cr)分量的颜色空间,这是因为人眼对亮度的感知更为敏感,而对色度的感知较不敏感。
  2. 块分割和变换:将图像分割为 8x8 的块,并对每个块进行离散余弦变换(DCT)。DCT 将图像从空域转换为频域,将每个块中的像素值转换为相应的频率系数。
  3. 量化:对 DCT 变换后得到的频域系数进行量化。量化是通过除以一个特定的量化矩阵来舍弃一些高频系数,从而减少数据量。较低的频率系数通常会被保留,而较高的频率系数会被舍弃。
  4. 霍夫曼编码:对量化后的频域系数进行霍夫曼编码,将其转换为变长编码。霍夫曼编码将频繁出现的频域系数用较短的编码表示,而较不频繁的频域系数用较长的编码表示,以进一步减小数据量。
  5. 压缩:将量化和编码后的数据进行压缩,通常使用一种压缩算法(如 Deflate)来进一步减小数据大小。
    在 Web 端,可以使用像 canvas 或图像处理库(如 sharp、gm 等)提供的 API 来实现 JPEG 压缩。一般来说,根据具体需求和性能要求,可以选择合适的压缩比和参数来进行 JPEG 压缩。

APNG动画的位图格式

多用于呈现动图

  1. 它是 PNG 图片格式的扩展,具有 PNG 图片格式的所有优点,并支持逐帧动画效果。
  2. 与 GIF 图片格式相比,APNG 具有更好的图像质量和更高的压缩比,支持更多的颜色和更高的透明度。同时,APNG 支持透明度混合、原始图像的 Alpha 通道和高级颜色转换等功能,使得它成为一种更加优秀的动画图片格式。
  3. 目前,APNG 图片格式被越来越多的浏览器和应用程序所支持,已成为一种流行的动画图片格式。

PS:由于 APNG 图片格式相对较新,不是所有的浏览器和应用程序都支持它。因此,在使用 APNG 图片格式时,需要谨慎考虑兼容性问题,并根据实际情况选择合适的图片格式。

BMP一种无压缩的位图图像文件格式

BMP(Bitmap)是一种无压缩的位图图像文件格式,它以像素的颜色值进行存储,每个像素都对应一个颜色值。

  1. 像素表示:BMP 图片由像素阵列组成,每个像素表示图像中的一个点,它包含了红、绿、蓝三种基本颜色的色彩值,通常是 24 位色(每种颜色占 8 位)或 32 位色(包含 Alpha 通道)。
  2. 文件结构:BMP 图片文件由文件头、信息头、调色板和图像数据等部分组成。文件头包括文件类型、文件大小、保留字段和图像数据偏移量等信息;信息头包括图像尺寸、色彩位深、压缩类型等信息;调色板包含颜色索引表;图像数据存储了像素的颜色值。
  3. 无损压缩:BMP 图片格式是一种无压缩的格式,图像数据直接存储像素的颜色值,因此文件大小通常较大,适合保存不经过任何压缩处理的图像。
  4. 色彩深度:BMP 图像可以支持不同的色彩位深度,例如 1 位黑白图像、8 位灰度图像、24 位真彩色图像等。色彩位深越高,图像质量越好,但文件大小也会相应增加。
  5. 兼容性:BMP 图片格式具有很好的兼容性,几乎所有的操作系统和图像处理软件都支持打开和保存 BMP 图像。

尽管 BMP 图片格式无压缩,文件较大,但由于它的简单结构和广泛的支持,仍然在某些特定场景下被广泛应用,如打印图像、位图编辑等。在实际应用中,可以根据需求选择合适的图片格式来平衡图片质量和文件大小。

TIFF一种高质量的位图图像文件格式

TIFFF(Tagged Image File Format)它支持无损压缩和多页、多图层等复杂图像数据。

  1. 文件结构:TIFF 图片文件由文件头、图像数据目录、图像数据等部分组成。文件头包含文件标识、字节顺序、版本号等信息;图像数据目录包含了图像数据的描述信息,如图像宽度、高度、色彩深度、压缩类型等;图像数据存储了实际的像素数据。
  2. 像素表示:TIFF 图像使用像素阵列表示图像内容,每个像素包含了颜色值或灰度值。TIFF 支持不同的色彩深度,包括 1 位黑白图像、8 位灰度图像、24 位真彩色图像等。
  3. 无损压缩:TIFF 图片格式支持无损压缩和有损压缩两种方式。无损压缩不会导致图像质量损失,适合保存需要保持原始质量的图像数据。
  4. 多页、多图层:TIFF 格式支持多页图像和多图层,可以在同一个文件中存储多张图像或不同版本的同一图像,方便组织和管理图像数据。
  5. 兼容性:TIFF 图片格式具有很好的兼容性,几乎所有的操作系统和图像处理软件都支持打开和保存 TIFF 图像。

由于 TIFF 图像格式的高质量和灵活性,它常用于打印、出版、医学图像等领域,需要保持图像质量和元数据完整性的应用场景。然而,由于其文件大小较大,一般不适合在互联网上使用,通常用于存储和传输高质量的图像数据。

HELC 旨在取代传统的 JPEG 格式

HEIC(High Efficiency Image Format)是由苹果公司推出的一种高效的图片格式,旨在取代传统的 JPEG 格式。

  1. 压缩效率:HEIC 是一种高效的图像压缩格式,可以实现更小的文件大小而保持更高的图像质量。相比于 JPEG 格式,HEIC 格式具有更好的压缩率,节省存储空间。
  2. 支持特性:HEIC 格式支持多种特性,包括透明度、深色模式、动态范围调整、深度信息等。它还支持保存多张图像、动态图像和图像序列。
  3. 兼容性:HEIC 格式最初是苹果公司在 iOS 11 上引入的,后来也被其他设备和平台所支持。然而,由于一些老旧设备和软件不支持 HEIC 格式,因此在一些情况下可能需要将 HEIC 转换为其他格式。
  4. 存储特性:HEIC 格式支持文件大小动态调整,可以根据需要进行无损和有损的调整。这使得 HEIC 格式适用于存储和传输图像时可以根据需要调整文件大小。
  5. 其他功能:HEIC 格式还支持元数据信息的存储,可以包含拍摄时间、地理位置、相机型号等信息。这些元数据信息可以帮助用户更好地管理和组织图像库。

总的来说,HEIC 是一种高效的图片格式,具有更好的压缩率和更丰富的特性,适合用于保存高质量图像并节省存储空间。然而,由于其兼容性问题,用户在使用 HEIC 格式时需要考虑设备和软件的支持情况。

SVG一种基于 XML的开放标准矢量图形格式

SVG(Scalable Vector Graphics)是一种基于 XML(可扩展标记语言)的开放标准矢量图形格式,用于描述二维矢量图形。

  1. 矢量图形:SVG 是基于矢量的图形格式,图像由形状、路径、文本等基本元素组成,可以无限缩放而不会失真。与位图图像不同,SVG 图像不基于像素,而是基于数学描述的矢量图形。
  2. 可编辑性:SVG 图像是文本文件,可以通过文本编辑器或专门的 SVG 编辑软件进行编辑和修改。用户可以轻松地调整图像的大小、颜色、形状等属性。
  3. 网页应用:由于 SVG 图像的矢量特性和可伸缩性,它在网页设计和开发中被广泛应用。SVG 图像可以直接嵌入到 HTML 文件中,用于创建图标、图形、动画等元素。
  4. 动画效果:SVG 图像支持动画效果,可以使用 CSS 或 JavaScript 添加动态效果,如渐变、旋转、缩放等,使图像更生动和吸引人。
  5. 兼容性:大多数现代浏览器都支持 SVG 图像的显示,但在一些旧版本的浏览器中可能存在兼容性问题。为了确保跨浏览器兼容性,建议在使用 SVG 图像时进行兼容性测试。

总的来说,SVG 图像格式适合用于需要无损放大和高品质矢量图形的场景,如网页设计、图标设计、数据可视化等。它的可编辑性和动画效果使得 SVG 成为一种灵活且功能丰富的图像格式。