在网站图片储存、摄影以及论文写作中难免遇到图片储存的问题,什么时候用怎样格式的图片,以及图片大小与质量如何指定是一个问题,这一篇文章将讲述图片的格式问题。

参考链接:

JPG 和 PNG深度解析:标准、对比、扩展和如何选择 – 知乎 (zhihu.com)

JPG 和 JPEG 格式有什么区别? – 知乎 (zhihu.com)

深入探讨15种主流图片格式及其优缺点 – 闪电博 (wbolt.com)

如何实现WordPress网站使用WebP格式图片 – 闪电博 (wbolt.com)

raw图像格式Tiramisu920的博客-CSDN博客_raw10格式

理解图片分辨率/容量大小/清晰度/像素尺寸之间的关系 – 知乎 (zhihu.com)

像素_百度百科 (baidu.com)

不同单位的图形大小 — Matplotlib 3.6.2 文档

图像文件的分类

图像文件主要有两个类别:光栅(或者叫作栅格)图像文件、矢量图像文件。

光栅(或者叫作栅格)图像文件

前者最为常见,包括 .jpeg/.gif/.png。栅格图像文件类型为静态图像,可以理解为有很多小块,每一个小块中储存其所代表的颜色。这种图片最大的缺点就是无法自行调节其大小,过大或者过小都会导致图像的失真,如下图所示:

其中 jpgjpej 其实是一种格式(Joint Photographic Experts Group),因为后缀名长度的限制所以简写为.jpg,其可以理解成一种压缩标准,会将原始的图像数据,在设定的大小下,对一些数据进行删除,是一种有损压缩的光栅图像文件格式,因此在反复下载编辑的过程中,图片会变得越来越模糊,因此通常会根据使用场景固定图片的分辨率。其优点是更小的文件体积,兼容性较好。

与之对应的有.png 格式,全称:(Portable Network Graphics),相较而言,其采用无损压缩的方式,也就意味着无论怎样编辑保存,图像都不会受到损坏,但随之而来的也伴随着体积的增大。

一种使用经验是,当图像中,不同部分的颜色过渡较为自然时,例如照片,即使压缩有损,对图像观感不会产生较大影响,而当图像有较多轮廓时候,例如示意框图,应当使用无损压缩的方式,保证文本、线条或者边缘有较好的成像效果。

此外,png还可以支持透明 Alpha 通道,可以真正实现某一块区域的透明处理。

另外,还有 gif 格式(Graphics Interchange Format),虽然大家看到的 gif 格式往往是动画图片,但这一点其实是不确定的,它也可以表示静态图片,它是一种无损压缩方式,但由于它将图像的像素储存大小进行了限制,调色板的颜色也进行了限制,因此有更小的体积,保证了动画的实现。

这些是比较常见的,还有一些并不常见但会看见的,例如Webp(可以用于替代jpg或者png,用于网站建设,可以节省带宽提升图片加载速度),TIFF(Tagged Image File Format,一种光栅图像格式,可见于高质量扫描文件)…….

矢量图像文件

相较于光栅文件,矢量图像文件使用一些数学描述来生成图像,而不是依靠像素点记录的方式,当对图像进行放大缩小时,并不会影响图像显示效果,图片往往也更小,有点类似于记录了拟合公式而不是数据点。但面对色彩丰富,内容较多的图片是,效果较差,通常用于图形、徽标的处理。并且其处理并没有光栅类图片方便,需要特定的软件打开处理。

在 wordpress 中,目前还不支持 svg 文件的直接写入,之后有空再看看怎样演示。

常见的矢量图像文件格式有,.svg(Scalable Vector Graphics),这个还符合认知,另外一个很有意思,也是矢量图像文件,.pdf,(Portable Document Format),是基于为 EPS 矢量图像文件提供支持的 PostScript 语言,缺点是不能嵌入,必须作为独立文件读取。

非压缩文件

此外,在拍照时,还会遇到 raw 文件,这是未经压缩处理直接得到的,电子图像的数字化表达,没有色彩。

像素、分辨率、图片大小

首先是分辨率,dpi,含义是也就是像素/每英寸,也就是一块区域内,表示颜色点的数量(当然这些说法可能不太严谨,像百度中像素不是说点,而是指在由一个数字序列表示的图像中的一个最小单位,感觉差不多吧),分辨率不描述图片大小,只描述图片单位面积能表示的颜色丰富度。之后才是图片大小,通常用厘米等单位来描述。

matplotlib中图像大小的指定

在matplotlib中,一般使用 figsize 来指定图像大小,其默认单位为英尺,如果觉得不够直观,可以改为厘米,如下图:

# 单位为英尺
plt.subplots(figsize=(6, 2))

# 用厘米表示
plt.subplots(figsize=(15*cm, 5*cm))

# 用像素表示
plt.subplots(figsize=(600*px, 200*px))