iOS 图片使用探究(1)-- 图片基础知识+图片格式

图像基础知识

图像是人对视觉感知的物质再现。图像可以由光学设备获取,如照相机、镜子、望远镜及显微镜等;也可以人为创作,如手工绘画。图像可以记录、保存在纸质介质、胶片等等对光信号敏感的介质上。随着数字采集技术和信号处理理论的发展,越来越多的图像以数字形式存储。因而,有些情况下“图像”一词实际上是指数字图像。

与图像相关的话题包括图像采集、图像制作、图像分析和图像处理等。

图像分为静态影像,如图片、照片等,和动态影像,如影片等两种。

图像是一种视觉符号。透过专业设计的图像,可以发展成人与人沟通的视觉语言,也可以是了解族群文化与历史源流的史料。世界美术史中大量的平面绘画、立体雕塑与建筑,也可视为人类由古自今文明发展的图像文化资产。

计算机研究中一般是指 数字图像

数字图像,是二维图像用有限数字数值像素的表示。

通常,像素在计算机中保存为二维整数数组的光栅图像,这些值经常用压缩格式进行传输和储存。

数字图像种类:二值图像、灰度图像、彩色图像、假彩色图像、多光谱图像、thematic、立体图像、三维图像

数字图像显示:光栅图像格式:BMP、GIF、JPEG、PNG等。矢量图像格式:WMF、SVG等

DPI(dots per inch)分辨率:每英寸点数

像素 = 尺寸 * 分辨率

颜色空间:对相同颜色数值的解释方式。比如说一个像素的数据时(FF0000FF),在RGBA 颜色空间中,会被解释为红色,而在BGRA 颜色空间中,则会被解释为蓝色。解码之前一般要提取出颜色空间参数,保证解码前后图片颜色空间保持一致。

CoreGraphic支持的颜色空间类型:HSB、RGB、CMYK、BGR

图片的位深度: 用多少位二进制来 记录图片中像素的色值(位深度决定了像素点的 颜色种类)

常见的位深度有:

  • 1位,也就是黑白照片,只有黑色和白色

  • 4位,有2的4次幂种颜色,16种颜色

  • 8位,2的8次幂表示,它含有256种颜色(VGA)

  • 24位,2的24次幂种颜色,16777216种颜色(真彩色, SVGA)

  • 32位,32位在24位基础上加了透明度,颜色数量和24位是一样的.

在24位图片中, 红、绿、蓝 ( RGB ) 三基色各以2的8次幂,也就是256种颜色而存在的,这也是为什么图片中三基色的色值都在0~255之间的原因了。另外,有一些图片格式的位深度是固定的,比如GIF只有256种颜色。

图片格式 定义
BMP/Bitmap 位图文件。非压缩图片格式,体积非常大。图片每个像素的原始信息在存储器中依次排列,可以不经过解码就直接被渲染到UI上。其他格式图片一般都需要先被解码为bitmap格式,然后才能渲染到界面上 。
PNG 这种格式可以用来存储任何位深的图片.通用性非常广,包括透明图片. GIF 和 PNG 对于具有大面积相同颜色的图像是最好的选择,因为它们使用的 (主要是基于游程长度编码的) 压缩算法可以减少存储需求。这种压缩是无损的,这意味着图像质量不会被压缩过程影响。压缩比有上限,和JPG、GIF相比,PNG 最大的优势在于支持完整的透明通道
JPG 互联网中常见的格式,该格式使用有损压缩来减少图片的大小,jpg文件不支持透明图片.JPEG 不适用于对比鲜明的图像 (如线条图),其压缩方式对类似区域的图像质量损害会相对严重。如果某张截图中包含了文本,且保存为 JPEG 格式,就可以清楚地看到:生成的图像中字符周围会出现杂散的像素点。在大部分照片中不存在这个问题,所以照片主要使用 JPEG 格式。
GIF GIF只有256种颜色,图片质量相对JPG会大打折扣,但是GIF的优点是可以存储动图.
PDF 矢量图。编译时创建对应屏幕大小的PNG。图片被拉伸的话图片展示就不清晰了(pdf对阴影和渐变的处理会存在失真的情况)
SVG/SF Symbol SVG是一种无损的矢量图,是众多矢量图中的一种,它的特点是使用XML来描述图片。使用XML的优点是,任何时候你都可以把它当做一个文本文件来对待,也就是说,你可以非常方便的修改SVG图片,你所需要的只需要一个文本编辑器。(iOS13开始,苹果推出了SF Symbol,一种svg格式的矢量符号集。而且苹果还提供了多于1500多种icon模板,我们可以在这里下载查看。)
HEIC HEIC是HEIF(High Efficiency Image Format 高效率图像文件格式)的一种。它同时支持有损压缩、无损压缩、透明度等特性。(HEIC的目的就是作为JPEG的继任者,对于一些需要下载的大图可以转成HEIC格式,供客户端使用)
Live Photo 一张HEIC封面图 + mov 格式视频(mov QuickTime 影片格式,由Apple研发的音频、视频文件格式,用于存储常用数字媒体类型)(PHLivePhotoView)

图片格式选择

图片格式 适用范围 注意事项
png 应用icon,界面icon,卡通风格的背景图 导入项目前可以使用ImageOptim进行压缩
jpeg 尺寸较大的风景图,照片 不支持透明度;因为可以调节压缩比,可以在大小和质量之间寻找最佳平衡。
webp 支持有损、无损压缩、透明度、动图等特性,因为苹果本身不支持一般只应用于服务端返回来的图片 无法在xcode预览,不建议内置该类型图片
pdf 字形,高分辨率的矢量图 存在展开尺寸较大,光效失真的情况
svg(sf symbol) 指示性icon 仅支持iOS13及以上,系统sf符号是有版权的,使用时要注意应用范围和苹果要求

Apple 官方文档

sRGB 目前比较通用的全色彩图像色域,每个像素占4个字节。所以在iOS的实际使用中 图片实际占用的内存是 像素 * 4。一张分辨率很高的图片,展示时所消耗的内存会比图片实际的文件大小要大很多。(WWDC2018 图像最佳实践)

Objccn 图片格式

图片的格式

  • sRGB:这个是目前比较通用的全色彩图像色域,每个像素占 4 个字节

  • Wide:每个像素占 8 个字节,相比 sRGB 能表示的颜色更多

还有占内存更小的格式:

  • 亮度和 alpha 8 格式:每像素 2 个字节,单色图像和 alpha,metal 着色器。

  • Alpha 8 格式:每个像素 1 个字节,用于单色图像,比 SRGB 小 75%

选择正确的格式可以减少了内存的使用。简单总结一下:

一个字节:Alpha 8
两个字节:亮度和alpha 8
四个字节:SRGB
八个字节:Wide 格式

那下一个话题来了,如何选择正确的格式呢?

选择正确的格式

简单的回答是:不需要你来选择格式,而是应该让格式选择你。是不是觉得一下子松了一口气?哈哈

用 UIGraphicsImageRenderer 代替 UIGraphicsBeginImageContextWithOptions

使用 UIGraphicsBeginImageContextWithOptions 生成的图片,每个像素需要 4 个字节表示。建议使用 UIGraphicsImageRenderer,这个方法是从 iOS 10 引入,在 iOS 12 上会自动选择最佳的图像格式,可以减少很多内存。

另外,如果想修改颜色,可以直接修改 tintColor,不会有额外的内存开销。(图片测试下 通过tintColor 和 iconfont占用的内存比较)

Downsampling

当你缩小一幅图像的时候,会按照取平均值的办法把多个像素点变成一个像素点,这个过程称为 Downsampling

UIImage 在设置和调整大小的时候,需要将原始图像加压到内存中,然后对内部坐标空间做一系列转换,整个过程会消耗很多资源。我们可以使用 ImageIO,它可以直接读取图像大小和元数据信息,不会带来额外的内存开销。

页面上实际展示的ImageView 所占用的内存大小,图片本身的尺寸决定的,所以通过Downsampling 生成缩略图 来降低内存 。

通过Downsampling,我们成功地减低了内存的使用,但是解码同样会耗费大量的 CPU 资源。如果用户快速滑动界面,很有可能因为解码而造成卡顿。

解决办法:Prefetching + Background decoding

Prefetch 是 iOS10 之后加入到 TableView 和 CollectionView 的新技术。我们可以通过tableView(_:prefetchRowsAt:)这样的接口提前准备好数据。有兴趣的小伙伴可以搜一下相关知识。

至于Background decoding其实就是在子线程处理好解码的操作。(最好在单个同步队列中处理,否则线程切换的性能也比较差)

来源:

WWDC 图像最佳实践

iOS 深入分析大图显示问题

你可能感兴趣的:(iOS 图片使用探究(1)-- 图片基础知识+图片格式)