图片格式对比

CameIIia
759 阅读10分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

目前我们常用的图片通用格式有JPEG、PNG相对较新的还有SVG、WebP，本文通过对比这四种图片格式的优缺点来帮助日后对图片资源格式的选用。

图片如何渲染

在对比之前，我们先搞清楚图片是怎么渲染的，以iOS为例，代码中要显示一张图片，我们通常要：

let image = UIImage.init(named: "imageName")

let imageView = UIImageView.init(image: image)

self.view.addSubview(imageView)

从代码执行到图片展示，大致经历了：

  1. 加载图片
  • 从磁盘中加载一张图片；
  • 然后将生成的 UIImage 赋值给 UIImageView ；
  • 接着一个隐式的 CATransaction 捕获到了 UIImageView 图层树的变化；
  • 分配内存缓冲区用于管理文件 IO 和解压缩操作，将文件数据从磁盘读到内存中；
  1. 图片解码（解压）
  • 将压缩的图片数据解码成未压缩的位图形式，这是一个非常耗时的 CPU 操作，默认在主线程进行；
  1. 图片渲染
  • CoreAnimation 中 CALayer使用解压（解码）的位图数据渲染 UIImageView 的图层；
  • CPU计算好图片的Frame，对图片解压之后，就会交给GPU来做图片渲染渲染流程；
  • GPU获取获取图片的坐标，将坐标交给顶点着色器(顶点计算)，将图片光栅化(获取图片对应屏幕上的像素点)，片元着色器计算(计算每个像素点的最终显示的颜色值)；
  • 从帧缓存区中渲染到屏幕上；

image.png

名词解释

有损vs无损

有损压缩：指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。

无损压缩：只在压缩文件大小的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。

索引色vs直接色

索引色：用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是256种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。

直接色：使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化之多。

点阵图vs矢量图

点阵图：也叫做位图，像素图。构成点阵图的最小单位是象素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。点阵图缩放会失真，用最近非常流行的沙画来比喻最恰当不过，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒的颜色。

矢量图：也叫做向量图。矢量图并不记录画面上每一点的信息，而是记录了元素形状及颜色的算法，当你打开一张矢量图的时候，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。

图片格式对比

一张图片，如果我们将它的每一个像素及其对应的颜色都存储起来（BMP格式），是会很大的。为了减小图片占用的存储空间，派生出了各种不同压缩算法所代表的图片格式。

PNG

PNG有两种类型：PNG-8和PNG-24。

PNG-8是无损的、索引色、点阵图。它支持透明度的调节。

PNG-24是无损的、直接色、点阵图。因为使用直接色，颜色范围更大，也占用更大的空间。他的目标是替代JPEG，但一般而言，PNG-24的文件大小是JPEG的五倍之多，而显示效果则通常只能获得一点点提升。所以如果不是对图片质量要求特别高，不建议使用PNG-24

JPEG

JPEG是有损的、采用直接色的、点阵图压缩方式。JEPG目标是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。一般都是用于相机图片的格式。但因为有损，会导致图片失真。

PDF

pdf图片通常是矢量的，它的导入方式有些特殊。我们需要在 Assets.xcassets文件，创建一个 NewImageSet，然后将该文件的 Scales设置为 SingleScale，拖入1x尺寸的pdf文件即可：

image.png 使用时我们可以把它当做普通图片对待：

let image = UIImage(named: "sunset")

在运行期间Xcode会根据屏幕的比例因子生成对应尺寸的png图像。比如导入一张100x100的pdf图片，在2x和3x的机型里面会生成对应的200x200，300x300的png（可以在Assets.car中找到）。所以pdf只不过是Xcode处理图片的中间状态，下载到手机的应用包里面是没有这张pdf的。

这种处理方式有一个好处就是，当苹果以后发布一款4x屏幕的手机时，使用pdf处理的图片会自适应生成对应的4x资源，不需要再手动导入。但相比优点，pdf作为图片资源的缺点更多。

首先是尺寸上，因为是自动生成对应的png，并没有任何优化和压缩，而且我们也并不能在这中间做什么。对比相同尺寸经过ImageOptim压缩过的png，在大小上后者会是前者的1/2，甚至1/4。

另外pdf对阴影和渐变的处理会存在失真的情况：

image.png 左边是png，右边是pdf。在一些渐变和光影的图像部分可以看出明显的失真。

更多关于pdf和png的差别，可以看这篇：Why I don't use PDFs for iOS assets: bjango.com/articles/id…

SVG

SVG是一种无损的矢量图，是众多矢量图中的一种，它的特点是使用XML来描述图片。使用XML的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改SVG图片，你所需要的只需要一个文本编辑器。

另外iOS13开始，苹果推出了SF Symbol，一种svg格式的矢量符号集。而且苹果还提供了多于1500多种icon模板，但符号是有版权的使用时要注意范围

WebP

WebP 格式是 Google 于2010年发布的一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。它具有较优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。目前，知名网站 Youtube 、Facebook、Ebay 等均有使用 WebP格式。

WebP 集合了多种图片文件格式的特点，JPEG 适合压缩照片和其他细节丰富的图片，GIF 可以显示动态图片，PNG 支持透明图像，图片色彩非常丰富，而 WebP 则兼具上述优点，且较于它们还有更出色的地方。

据 Google 测试，无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小，即使 PNG 文件经过其他压缩工具压缩后，WebP 还是可以减少 28% 的文件大小。此外，与 JPEG 相比，在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%，而 WebP 在压缩方面比 JPEG 格式更优越。

与其它图片格式相比，WebP 的体积更小，可以省却大量带宽和流量，也能提升网页加载速度。据 GigaOM 报道：谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，每天可以节省几 TB 的带宽，页面平均加载时间大约减少 1/3，而 Google+ 移动应用采用 WebP 图片格式后，每天节省了 50TB 数据存储空间。

WebP 格式分静态 WebP 与动态 WebP，而动态 WebP 支持将 GIF 直接转换成动态 WebP。由于 GIF 图片大小相对于普通的 JPEG、PNG 图片更大，访问时也更耗费流量，为此，七牛云新上线 GIF 转码动态 WebP 功能（imageMogr2接口中体现），让大家在保障图片质量的前提下，大幅减小图片体积，节省流量，提升访问图片的流畅度。

GIF 图片主要应用于娱乐、图片分享类应用中，如堆糖、橘子娱乐便经常使用。与传统的 GIF 图比较，动态 WebP 的优势在于：

  • 支持有损和无损压缩，并且可以合并有损和无损图片帧；
  • 体积更小，GIF 转成有损动态 WebP 后可以减小 64% 的体积，转成无损可以节省 19% 的体积；
  • 颜色更丰富，支持 24-bit 的 RGB 颜色以及 8-bit 的 Alpha 透明通道（而GIF 只支持8-bit RGB 颜色以及 1-bit 的透明）；
  • 添加了关键帧、metadata 等数据；

事实上，WebP 格式在 Android 应用程序和 iOS 应用程序上已得到广泛使用。除了可以将 GIF 转码为动态 WebP 格式外，七牛还支持 JPEG、PNG格式的图片实时转码成 WebP 格式。

数据对比

YY大神做出了很详细的对比：blog.ibireme.com/2015/11/02/…

SVG与WebP对比：www.jianshu.com/p/343bc37a0…

image.png 对于简单的图形类型的图像（比如 App 内的各种 UI 素材），WebP 无损压缩的文件体积和解码速度某些情况下已经比 PNG 还要理想了，如果你想要对 App 安装包体积进行优化，可以尝试一下 WebP。

对于复杂的图像（比如照片）来说，WebP 无损编码表现并不好，但有损编码表现却非常棒。相近质量的图片解码速度 WebP 相距 JPEG 也已经相差不大了，而文件压缩比却能提升不少。

如何选择图片格式

图片格式适用范围注意事项
PNG应用icon，界面icon，卡通风格的背景图导入项目前可以使用ImageOptim进行压缩
JPEG较大的风景图，照片不支持透明度；因为可以调节压缩比，可以在大小和质量之间寻找最佳平衡。
PDF字形，高分辨率的矢量图存在展开尺寸较大，光效失真的情况
SVG适用于图片样式相对简单的场景系统sf符号是有版权的，使用时要注意应用范围和苹果要求
WebP可完全替代png，jpeg，GIF，目前大部分云存储都支持通过参数一键转换WebPiOS系统库解析效率不高
avatar
文章
阅读
粉丝