图像基础知识
图像是人对视觉感知的物质再现。图像可以由光学设备获取,如照相机、镜子、望远镜及显微镜等;也可以人为创作,如手工绘画。图像可以记录、保存在纸质介质、胶片等等对光信号敏感的介质上。随着数字采集技术和信号处理理论的发展,越来越多的图像以数字形式存储。因而,有些情况下“图像”一词实际上是指数字图像。
与图像相关的话题包括图像采集、图像制作、图像分析和图像处理等。
图像分为静态影像,如图片、照片等,和动态影像,如影片等两种。
图像是一种视觉符号。透过专业设计的图像,可以发展成人与人沟通的视觉语言,也可以是了解族群文化与历史源流的史料。世界美术史中大量的平面绘画、立体雕塑与建筑,也可视为人类由古自今文明发展的图像文化资产。
计算机研究中一般是指 数字图像
数字图像,是二维图像用有限数字数值像素的表示。
通常,像素在计算机中保存为二维整数数组的光栅图像,这些值经常用压缩格式进行传输和储存。
数字图像种类:二值图像、灰度图像、彩色图像、假彩色图像、多光谱图像、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的优点是可以存储动图. |
矢量图。编译时创建对应屏幕大小的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预览,不建议内置该类型图片 |
字形,高分辨率的矢量图 | 存在展开尺寸较大,光效失真的情况 | |
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 深入分析大图显示问题