UI 设计知识库 [04] 图片

这是个  碎片 是还没用做成罐头的原材料:

这是《nullice 的 UI 设计知识库》的第四篇。图片对 UI 设计师来说应该是再熟悉不过的东西了,而关于图片相关的知识也非常之多,多了解一些技巧对减少图片体积、优化显示效果会很有帮助。

概念

这里是一些位图的概念,位图也就是记录每个像素点信息的图片类型,位图的一般属性包括:

像素

像素是图片的信息记录的基本单位,其意义应该不用多说,不过值得注意的是像素并不一定是正方形的,像素只是代表矩阵中的一个元素,其形状不是固定的,虽然常用的都是正方形的像素,不过有时也会用到其他形状的像素,比如长方形的。
长方形像素

3:1 长宽比的长方形像素

PhotoShop 视图->像素长宽比设置

 

通道

一般图像有 R(红)、G(绿)、B(蓝)三个通道,有透明度的图片如 PNG 格式图片还有一个记录透明度的 Alpha 通道,图像内容由各通道组合而成。其中由于人视觉对绿色最敏感,绿色通道的信息对图像整体(亮度)影响最大。
一些图片格式并非是记录的 RGB 通道信息,如 JPEG 格式图片编码时会把图片内容转换为更适合压缩的 YCbCr 色彩空间,记录 Y、Cb、Cr 通道信息。不过计算机显示的图片无论用种内部色彩空间和通道组成,最终显示时都会转换为 RGB 色彩通道来处理。

色彩位数


通常说的 “32 位图片”、“8 位图片”、“24 位图片”、“16 色图片”、“256 色图片” 指定就是图片的色彩位数,也被称为图像的“阶调”。

通常有 2 种描述方式,

  • 描述每通道的位数:“8 位”、“16 位”、”32 位“、“ 8 位/通道”,这是指每通道分别由 8、16、32 位 bit 记录,8 位记录范围是 28 = 256 种层次,也就是常用的色彩值范围 0~255 的图片。16 位记录范围是 216 = 65536 种层次,32 位记录范围是 232 = 16777216 种层次。注意这只是单通道色彩数量,整体色彩数量是其 3 次方( RGB 三通道)。
    后两种通常只在摄影图片中使用。而由于图片通常有 R、G、B 3 个通道,所以 8 位/通道的图片也被称为 8 x 3 = “24 位”图片,在 Windows 中也被称为“24 位深度”。而带有 Alpha 透明度通道的图片如 PNG,就会有 4 个通道所以带透明度的 PNG 是 32 位深度。
  • 直接描述总色彩数量,如 ” 256 色图片”、“65536 色图片”、“16777216 色图片”。
    这里 256 色代表总共有 256 种颜色,通常这是索引色板来记录颜色,而非分通道记录具体色值。例如原本一个像素记录的是 RGB:(255,100,33)的值,而用索引色板的模式,记录的是 色板:(5) ,而具体的 RGB 色彩值则记录在第 5 号色板中,这样相同的颜色只用记录一次,能大大减少存储空间,GIF 和 PNG-8 就是使用索引色板来记录图像信息的。
    “16777216 (一千六百万)色图片” 即是常用的 8 位/通道 的图片,256 x 256 x 256 = 16777216 ,这种色彩数量也被称为真彩色。

压缩方式

除了 BMP 这样直接记录每一个像素信息的格式之外,大部分常用的图片格式都使用了压缩手段来记录像素信息,所以根据压缩方式的不同分为了有损压缩与无损压缩格式。比如 JPEG 为有损压缩格式,而 PNG、GIF 为无损压缩格式,另外 WebP 、JPEG 2000、JPEG XR 这样的格式可以根据需求选择有损压缩或者无损压缩模式。

要注意的是 PNG 这样的无损压缩格式仅仅是指图片编码、解码层面的无损,如果直接压缩图片内容,比如减少图像色彩数、减少动态范围后也能用 PNG 这样的无损格式对图像进行“有损压缩”,比如使用 pngquant 工具压缩 PNG。

 

尺寸与分辨率

图片的尺寸即使图像的大小,横向像素总数 x 纵向像素总数,这很好理解。不过分辨率就容易混淆了,因为分辨率的概念常常被混用和误用。

PhotoShop 中的图像分辨率

PhotoShop 中的图像分辨率

PhotoShop 选项中的图片的分辨率(Resolution) 指的是 PPI(pixels per inch)即一个英寸(或厘米)上有多少像素 。
通常这是只是与要打印的图片才相关的属性,因为它控制着一个图片的物理尺寸(在像素尺寸确定的情况下),越高的 PPI 意味着打印出的每英寸中像素密度越大,看起来精度更高,而同一图片 PPI 越大物理尺寸越小。

而在各种移动设备层次不穷的现在, PPI 或者 Android 中说 DPI 与图片属性中的 PPI 相似但不受图片属性中  PPI 的影响,具体请见 DP、DPI 与 PPI 一节

 

图片格式

PNG

PNG 由于其压缩效果较好并且是无损压缩的方式,还支持透明度通道, 是目前 UI 设计最常用的的格式了

  • 支持 24 位真彩色(最高 64 位色:16位/通道x4 包含Alpha 透明通道 )
  • 支持 Alpha 通道透明效果
  • 支持索引色板与索引色板透明
  • 无损压缩
  • 不支持色彩管理
 相比 GIF ,PNG 通常的压缩效果要更好,而相对于 JPEG ,PNG 无损压缩不会损失图像质量。不过由于 PNG 不支持色彩管理,用 PNG 来存储非标准色域(sRGB)的照片会有一些麻烦,显示时需要手动指定色彩空间。
PNG 有 5 种子类型:
  • PNG-64:16位/通道,带有透明度 Alpha 通道
  • PNG-48:16位/通道,不透明度 Alpha 通道
  • PNG-32:8位/通道,带有透明度 Alpha 通道
  • PNG-24:8位/通道,不带透明度 Alpha 通道
  • PNG-8:索引颜色, 最多 256 色调色板,可以选用透明色板或者 Alpha 通道。
这有个易混淆的地方,在一些软件中如 Fireworkd 会有 PNG-32 的选项,而在 PhotoShop 只有 PNG-24,实际上在 PhotoShop 中选择 PNG-24 再勾选“透明度”选项,导出的图片就是 PNG-32,不勾选“透明度”导出的图片就是 PNG-24,而 Fireworkd  等软件则用直接是否选择 PNG-32 来控制导出的图片是否带透明度通道。
 Fireworkd 中 PNG 的设置

Fireworkd 中 PNG 的设置

PhotoShop 中 PNG 的设置,没有 PNG-32

PhotoShop 中 PNG 的设置,没有 PNG-32

带 Alpha 通道的 PNG-8

 另外值得注意的是 PNG-8 通常是使用透明色板表示透明度的(也被称为索引色透明),和 GIF 的透明色板一样,只能表示完全透明或者完全不透明 2种状态,不能像有 256 种阶调的  Alpha 通道那样显示平滑的透明度效果 。
所以一般情况 UI 中要需要平滑的透明效果的图片都必须用  PNG-32 ,而实际上 PNG-8 也是可以使用 Alpha 通道来显示平滑的透明度的,只是 PhotoShop 并不支持,而 Fireworkd 是支持导出带 Alpha 通道的 PNG-8 的。
另外可以使用  pngquant  或它的 GUI 软件 PNGoo  来把 PNG-32 转换成带 Alpha 通道的 PNG-8,这可以在保持平滑透明度的同时利用 PNG-8 减少体积。另外使用 pngquant  的 PhotoShop 插件 SuperPNG 可以在 PhotoShop 中直接保存带 Alpha 通道的 PNG-8。

PNG 对比

使用 PNGoo 来把 PNG-32 转换成带 Alpha 通道的 PNG-8

使用 PNGoo 来把 PNG-32 转换成带 Alpha 通道的 PNG-8

色阶与抖动

在把图片转化为 PNG-8 和 GIF 格式的时候由于这些格式最低只能有 256 色,所以就要减少原图的色彩深度,图片中的颜色数量会减少,并且原来平滑的渐变就会出现色阶断层:

而通过合适的色彩深度减少算法和杂色算法可以获得更好的效果或者更小的图片体积

色彩深度减少算法:

  • 可感知通根据人对颜色视觉灵敏度来创建颜色表,通常视觉效果最好。
  • 可选择 :与“可感知”颜色表类似,但更倾向于保留更大范围颜色区域和保留 Web 安全颜色。“可选择” 是 PhototShop 的默认选项。
  • 随样性:通过从图像的主要色谱中提取色样来创建自定颜色表。例如,只包含绿色和蓝色的图像产生主要由绿色和蓝色构成的颜色表。
  • 受限 (Web) :使用 Windows 和 Mac OS 8 位(256 色)调板通用的标准 216 色颜色表。该选项确保当使用 8 位颜色显示图像时,不会对颜色应用浏览器仿色。(该调板也称为 Web 安全调板。) 使用 Web 调板可能会创建较大的文件,因此,只有当避免浏览器仿色是优先考虑的因素时,才建议使用该选项。
  •  Mac OS、Windows :使用系统默认的色板,通常可以获得更小的图片体积,尤其是在图片本身尺寸较小的情况下。

 

而对于色阶断层。通常用“抖动”也被称为“仿色”的方法让色阶断层边界上的像素互相扩散,让其视觉上看起来更加平滑。
仿色处理让画面更平滑的同时也会增大文件大小,为了获得最佳压缩比,通常使用可提供所需颜色细节的最低程度的仿色。若图像所包含的颜色主要是纯色块,则在不使用仿色时通常也能正常显示。包含连续色调(尤其是颜色渐变)的图像,仿色能有效防止出现色阶断层现象。

PhotoShop 的仿色算法:

  • 扩散:应用与“图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。
  • 图案:使用类似半调的方形图案模拟颜色表中没有的任何颜色。
  • 杂色:应用与“扩散”仿色方法相似的随机图案,但不在相邻像素间扩散图案。使用“杂色”仿色方法时不会出现接缝。

 

 图层样式仿色与模拟仿色:

说到仿色不过不是提到在 PhotoShop 中图层样式的中的渐变默认是不会开启仿色( CS6 版本之前甚至没有仿色选项)的,这让图层样式的渐变很容易产生色阶断层:
渐变仿色对比

渐变仿色对比,左边没有开启仿色,右边开启了仿色

而要避免产生色阶断层让渐变根据平滑就需要在“渐变叠加”选项卡中勾选“仿色”选项:

图层样式仿色设置

图层样式-渐变 仿色设置

而面对已有图片中的某些区域的色阶断层,可以使用 PhotoShop 中的 滤镜->滤镜库->笔画描边->喷溅” 来模拟仿色,使用喷溅后还可以使用模糊滤镜消除一些明显的斑点让画面更平滑:

对图像中色阶断层用滤镜模拟仿色

对图像中色阶断层用滤镜模拟仿色

滤镜->滤镜库->笔画描边->喷溅

滤镜->滤镜库->笔画描边->喷溅

PNG-8 压缩比逆转

 通常我们会认为使用 PNG-8 会比 PNG-32、PNG-24 体积更小,不过这在有些情况下并非如此,在画面是很简单的情况下(比如渐变),尤其是图片本身体积很小的情况:
PNG-24:472 字节

PNG-24:472 字节

PNG-8:633 字节

PNG-8:633 字节

PNG 压缩工具

虽然通常使用 PhotoShop 的“存储为 Web 格式”能获得优化体积的 PNG 图片,不过其压缩比并不算最高的,而且还不支持带 Alpha 通道的 PNG-8,所以有很多其他的工具(可以参考: 13 个免费的 PNG 图像的优化和压缩工具)能帮助我们获得压缩比更高的 PNG 图片。工具有很多种不过一般用下面几种最好的就够了:

Pngquant (有损压缩)
pngquant 是使用减少色彩和直接处理图片内容来减少 PNG 体积的工具,所以它的压缩是有损的,不过压缩率很高。 pngquant 是命令行程序,PNGoo 是它的图像界面版本,在线 PNG 压缩工具 TinyPNG 使用的就是 pngquant 。

SuperPNG 是使用 Pngquant 的 PhotoShop 插件,它能让 PhotoShop 保存文件窗口的文件列表增加一个 SuperPNG 类型,使用这个类型,就会保存经过 Pngquant 处理的 PNG 图片,

PhotoShop 增加 SuperPNG 类型

PhotoShop 增加 SuperPNG 类型

SuperPNG 保存选项

SuperPNG 保存选项

PNGOUT   (无损压缩)

PNGOUT 是各种无损压缩 PNG 工具中效果最好的之一,虽然压缩速度非常慢。PNGOUT_WIN 是其其图形界面工具,不过图形界面版本是收费软件。

Optipng (无损压缩)

Optipng 也是一个效果很好 PNG 无损压缩工具。OptiPNG-UI 是其图形界面工具。

DeflOpt (无损压缩)

DeflOpt 是一个优化压缩算法工具。

集成工具:

ScriptPNG 
ScriptPNG 是一个集成了各种压缩工具(pngout、pngquant、pngwolf、truepng、advdef、cryopng、deflopt、defluff)的脚本工具,用它的可以获得非常好压缩效果。

PNGgauntlet

PNGgauntlet 和 ScriptPNG 一样也是集成了多个压缩工具(pngout、optipng、deflopt),不过 PNGgauntlet 是有图形界面的。

RIOT – Radical Image Optimization Tool

RIOT 也是一款集成各种压缩算法的工具,不过它界面更加友好,可以及时预览。

 

JPEG

JPEG 是为摄影相片设计的格式,用在摄影相片中能比 PNG  或者 GIF 获得更小的图片体积,同时画面质量损失会在可接受范围内,而且还支持色彩管理。但是用在对像素精度要求高、通常有大量规则的色块的 UI 图片时 JPEG 就不如  PNG  好用了,有损压缩而且编码不可逆的 JPEG 无法保证图像质量。
  • 支持 24 位真彩色(最高 48 位色)
  • 不支持 Alpha 通道透明效果
  • 不支持索引色板
  • 有损压缩,编码不可逆
  • 支持色彩管理

重复保存劣化

多次重复编码后劣化的 JPEG 图片

多次重复编码后劣化的 JPEG 图片

由于 JPEG 的编码方式是不可逆的所以多次即使是打开图片(解码)后不改变图片内容且保持原来的压缩比再保存(编码),新的图片与原图也会有不同,而且会丢失一部分信息劣化,多次重新编码,图片质量会原来越差,出现明显的块状斑点。当然有些图片编辑器保存 JPEG 图片的时候检测到图片内容没改变就不会重新编码所以不会劣化。

JPEG 块状斑纹

JPEG 块状斑纹

这些明显的 JPEG 压缩的痕迹:块状斑纹,其实是一个个 JPEG 压缩的块(block)每个块都是 8×8 像素大小。

产生的原因是因为 JPEG 压缩的基本单位是 8×8 的块:每个块的压缩过程都是单独的。因为每个块都是单独计算,块与块之间就很容易看起来不连续,多次编码导致的劣化会让其更加明显。

所以尽量不要用 JPEG 保存工作用的图片,尽量在使用无损压缩的格式保存图片,在最终使用前转换成再转成 JPEG,尽量不要多次重复编辑 JPEG 图片。

 JPEG 分块压缩示意图

JPEG 分块压缩示意图

对齐压缩分块

由于 JPEG 有分块压缩这种特性,在制作 JPEG 格式图片时,应该用开启 8×8 网格参考线,把图形的边缘对齐 JPEG 每个块的边缘,尽量让每个块内的图像均匀,这能大大提升同等压缩比下图像质量:

没对齐 JPEG 压缩分块边缘

对齐 JPEG 压缩分块边缘

 

JPEG 压缩工具

mozjpeg
mozjpeg 是 mozilla 开发的 jpeg 压缩工具,是目前 jpeg 压缩工具中效果最好的之一,它的压缩效果惊人,Mozjpeg-GUI 是它的非官方图形界面版本,imageoptim.com/mozjpeg 是一个使用 mozjpeg  的在线工具。

 

 

GIF

GIF 同 JPEG 一样是个古老的格式了,作为静态图片, PNG-8 完全可以替代它,无论从压缩率还是图像质量,普通的 GIF 最多只支持最多 256 色,对画质表现限制很大。所以除了用作动画图片,一般不会使用 GIF。

  • 最多支持 256 色
  • 索引色板,只支持色板透明
  • 无损压缩
  • 不支持色彩管理

GIF 使用索引色板,最多 256 色,所以也会涉及到与 PNG-8 一样的 色阶与抖动,前面已经说明过了,具体参见之前的表述,GIF 与其相同。

超越 256 色的 GIF

虽然标准的 GIF 只能支持 256 种颜色,不过有一种方法可以突破这个限制。

由于 GIF 动画的每一帧都可以用独立的索引色板,而由于 GIF 的帧是可以覆盖显示的(为了让帧能只记录画面改动内容),所以如果每帧只显示图片一小部内容,就相当于一张 GIF 图片使用了的多个索引色板。

每帧只显示一部分内容

每帧只显示一部分内容

不过由于这种真彩色的 GIF 只适合显示静态图片,所以没什么实际作用。制作过程可以参考:http://notes.tweakblogs.net/blog/8712/high-color-gif-images.html

 

另一种让 GIF 动态图片显示超过 256 种颜色的方法是使用把一张完整的动画图片分割成多个小 GIF ,由于每个小 GIF 图像内容的颜色数量有限,所以不会有明显的色阶断层。而把这些小 GIF 图片组合起来就也相当于一张有了多个索引色板的 GIF。

如这个网页中的演示:http://styletin.com/TEMP/GIF_MIX.html(需要等待所有图片载入完成后再刷新才能正常显示,或者另存网页到本地观看),不过由于网页传输速度慢,多个小 GIF 图片很可能因为载入时间不同而不会同时开始播放,这种方法在网页上使用需要用 JS 控制所有 GIF 载入完成后同时播放,非常复杂,所以通常这种方法只用在一些客户端软件上。

把一张完整的动画图片切片

把一张完整的动画图片切片

APNG

APNG 是PNG 的动画版本,目的是取代只能显示 256 色且压缩效果平庸的 GIF,不过由于开发社区意见的分裂(PNG 标准委员会还有一个 PNG 动画标准: MNG)长期以来只有 Firefox 浏览器支持 APNG,不过目前苹果的 Safari (OS X 和 iOS)也已经支持了 APNG,预计未来 APNG 会变得更加流行。(支持 APNG 的浏览器列表

APNG 的压缩效果很好,同样的动画用 APNG 格式比 GIF 甚至 WebP 体积都要小很多(对比测试

APNG 工具

  • apngasm
    一个可以把多个 PNG 合成一个 APNG 动画的工具。
  • apng-anime-maker
    也是一个把多个 PNG 合成一个 APNG 动画的工具。
  • gif2apng
    GIF 图片转换为 APNG
  • apng2gif
    APNG 图片转换为 GIF

 

WebP

WebP 是谷歌推出的图片格式,同时支持有损压缩和无损压缩、静态图片、动态图片,目前只有 Chrome 和 Opera 浏览器支持(WebP 浏览器兼容列表),不过在 Android 上 WebP 使用的很广,各种图片浏览器对 WebP 的支持也很广泛。

WebP 的静态图无损压缩压缩比比 PNG 高。而对于有损压缩照片 WebP 与 JPEG 相比优势有一些微妙,很多情况下 WebP 的效果都比如用 mozjpeg 压缩的 JPEG(测试)。

WebP 工具

 

SVG

SVG 是目前最通用的矢量格式,其本质是一个 XML 文本文件,比如下面就是一个普通的 SVG 图片的代码:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>


虽然 SVG 是矢量文件不过它可以内嵌入 PNG 和 JPEG 位图,曾经是塞班系统中的主要图像格式。

SVG 还能够内嵌 SMIL 脚本实现 SVG 动画:

另外 SVG 可以支持 CSS,使用 CSS 的 SVG 可以根据页面的 CSS 改变外观。

SVGZ 是SVG 的压缩版本,是用 gzip 压缩的 SVG 文件。


 

显示效果与尺寸

像素对齐

对于 UI 设计来说对齐像素是高品质的基础,所谓像素对齐就是消除不必要的子像素,让直线如实的显示出直线,曲线如实的显示出曲线。

具体来说绘制中矢量形状的端点对齐像素网格的端点:

图片来源 :http://cdc.tencent.com/?p=5584

而很多情况下我们需要只做一种能在成本缩放时也能保持像素对齐的图片比如下面,我们需要制作一种 64 x 64 PX 的图片,而且还需要它能在缩放成 32 x 32 PX 时还能保持像素对齐,这时我们可以建立一个 32 x 32 的参考网格(每格 2 x 2 PX),在制作时遵循元素的形状尽量与网格对齐,这样缩放时就会保持像素对齐。

同理如果我们需要让缩放至 16 x 16 PX 保存像素对齐,就需要一个 16 x 16 的网格。

 64 x 64 PX 的图片与 32 x 32 的参考网格

64 x 64 PX 的图片与 32 x 32 的参考网格

DP 、 DPI 与 PPI

PPI (Pixels Per Inch)每英寸像素,前面已经说过了。DPI 则是 Dots Per Inch 每英寸点数,所谓点是原本是印刷的概念,不过 Android 也用 DPI 来描述的屏幕。

Android 说的 DP 是一个抽象的单位,简单来说类似于物理长度,同一 DP 尺寸的图片,无论在什么屏幕上都会以同样的尺寸显示,这意味这用 DP 单位定义元素尺寸能让元素在不同分辨率的设备中保存同样的大小,不会出现在高分辨率率屏幕下显示得很小的情况。

使用 DP 单位定义元素尺寸

使用 DP 单位定义元素尺寸

不使用 DP 单位直接用像素尺寸

不使用 DP 单位直接用像素尺寸

由于使用 DP 单位定义尺寸,在不同分辨率(DPI)的屏幕中的如果使用同一大小图片就会发生缩放,安卓以 160 DPI (mdpi)的设备为标准,如在 mdpi 下 为 32 x 32 DP 大小的图片实际像素尺寸为 32 x 32 PX,而在 xhdpi 屏幕下,同样是 32 x 32 DP 的图片,像素尺寸则会是 mdpi 屏幕下的 2 倍:64 x 64 PX。要得到完美的显示效果就需要 64 x 64 PX 的图片,否则的话  32 x 32 px 的图片就会被拉伸至 64 x 64 PX 显示。

同一 DP 尺寸的元素在各分辨率屏幕下的实际像素大小:

DP 尺寸 屏幕 倍数 像素尺寸
48 x 48 DP Ldpi (120 dpi) 0.75x 36×36
48 x 48 DP Mdpi(160 dpi) 1.0x 48×48
48 x 48 DP Hdpi(240 dpi) 1.5x 72×72
48 x 48 DP XHdpi(320 dpi) 2.0x 96×96
48 x 48 DP XXHdpi(480 dpi) 3.0x 180×180
48 x 48 DP XXXHdpi(640 dpi) 4.0x 192×192

这个特性这意味这为 Android 制作 UI 图片时如果要保证质量(图像精度和像素对齐)就需要为每个屏幕分辨制作图片,不过这样成本太大,一般选择一个最主流的 DPI 作为标准尺寸,设计时用网格参考线对齐元素确保成倍缩放时的尽量像素对齐。

而 iOS 中与 DP 对应的单位是 PT, iPhone 以初代 iPhone 320 x 480 PX 的屏幕 PT 为基准定义 @1X, @2X 即是像素尺寸是 @1X 下的一倍,如在 44 x 44 PT 的图片在 @1X 的屏幕下是 44 x 44 PX,而在 @2X 下即为 88 x 88 PX。

iPhone、iPad 各机型屏幕 PT 尺寸与倍数:

倍数 机型 PT 尺寸 像素尺寸
@1X iPhone 3Gs以下 320 x 480 PT 320 x 480 PX
@2X iPhone 4、4s 320  x 480 PT 640 x 960 PX
@2X iPhone 5、5s、5c 320 x 568 PT 640 x 1136 PX
@2X iPhone 6 375 x 667 PT 750 x 1334 PX
@3X iPhone 6 Plus 414 x 736 PT 1242 x 2208 PX
@1X iPad 2、mini 768 x 1024 PT 768 x 1024 PX
@2X iPad Retina 768 x 1024 PT 1536 x 2048 PX

对于为 iOS 制作 UI 图片,通常以 @2X 为标准设计。值的注意的是 iPhone 6 Plus 虽然屏幕实际像素尺寸是 1920 x 1080 PX,不过它在系统层面是 @3X(1242 x 2208 PX) 的屏幕,只需要提供 @3X 的图片即可。

 

这些网站很有参考价值,列举了各种设备的尺寸:

Android & iOS设计尺寸规范

Android 图片设计规范

 

 

技巧

去除图片 XMP 和 EXIF 信息减小体积

图片文件中除了图片内容很多时候还会有 EXIF 和 XMP 信息,对于往往单个图片很小的 UI 图片来说,这是个不小的无用信息,而且有些时候这些信息可能大的吓人:

这张本应只有 75 KB 的图片被 XMP 信息撑到了1.8 MB

要去除这些信息你可以在 PhotoShop 的 “文件简介”功能中删除它们,或者用“存储为 Web 格式”时“元数据”一项设置为无。

用 PhotoShop 的“文件简介”功能查看或删除图片的附加信息

用 PhotoShop 的“文件简介”功能查看或删除图片的附加信息

除了使用PhotoShop 还有类似  AutoJpegTrunk 这样的软件能批量去除图片的  EXIF 信息。

 

图片颜色对图片体积的影响

不同颜色的图片(压缩过的如 PNG、JPEG 等,不包括直接存储的 BMP)体积并不一样,有些色调的图片要比另一些内容一样只是颜色不同的图片体积更大。

这可以用文本来类比,我们知道文本中中文所占空间要比字母、数字大,因为字母用 1 个字节表示就可以了而中文要用 2 个字节,有些少见的 Unicode 字符甚至要用 3 个字节字节表示。这是因为字母在编码上排在在前面,而中文排在后面,用的数字更大要更多的空间存储。
颜色也是一样的,24 位的颜色有 256*256*256 = 16777216 种,跟文本一样编码后排在低位的色彩:256 之前的色彩可以用一个字节表示,257~65536 可以用 2 个字节表示,而再之后的色彩就必须用 3 个字节表示(这些都是对于压缩来说的)。有些色彩就是会比另一些存储下来占用空间大,而我们用都 RGB 作为基础标准所以,红绿蓝色调的图片占用空间要小,而紫色、青色、洋红这样的色调的图片体积会更大。

色相对图片体积的影响

2.19 MB - 红色调 - (255,0,0)

2.19 MB – 红色调 – (255,0,0) 点击查看原图

3.09 MB - 紫色调 (184,35,105)

3.09 MB – 紫色调 (184,35,105) 点击查看原图

由于 RGB 的编码方式,红、绿、蓝三原色色调的图片体积会更小一些,如上面所示红色调只有 2.19 MB 紫色调却有 3.09 MB。这意味着如果是在对图片大小限制紧张的情况下使用三原色色调能减少图片体体积。

饱和度对图片体积的影响

原本 3.09 MB 的紫色调图降低到 0 饱和度后仅剩 1.8 MB

原本 3.09 MB 的紫色调图降低到 0 饱和度后仅剩 1.8 MB 点击查看原图

饱和度对图片体积也有影响。饱和度越低,色彩 RGB 三值越接近,也就是说值的变化的范围越小,所含信息越少,可压缩空间就越大。同样内容,饱和度越低体积越小。

 

亮度度对图片体积的影响

原本 3.09 MB 的紫色调图降低亮度以后只剩下 2 MB

原本 3.09 MB 的紫色调图降低亮度以后只剩下 2 MB 点击查看原图

本来一张图片色彩取值范围是 0~255,(RGB:255,255,255 就是最亮的白色),亮度调低了,最大值就减小了,可能取值范围就变成 0~125 了,信息就被削减了,可压缩空间也就增加了。同样内容,亮度越低体积越小。

使用数字水印保护版权

数字水印与一般图片上的可视的水印不同,它通常是不可见的,在图片上写入数字水印可以在某些情况下确认图片的来源和是否被篡改。

比如,给不同人发仅供内部参考的图片,给不同的人的图片写入不同的不可见数字水印,当内部图片流出的话,就能通过检查数字水印确定是谁外流了内部图片。

不仅如此,通过这种隐写技术还可以使用图片存储普通文件,著名游戏孢子就是通过 PNG 图片存储 3D 模型的。

可以在图片中隐写数字水印的工具有很多,这里推荐 2 个:

OpenPuff

全功能的隐写工具,不仅可以在图片中隐写数据还可以在音频和视频中隐写数据,甚至加密码。

  • 图片支持 :BMP, JPG, PCX, PNG, TGA
  • 音频支持 :AIFF, MP3, NEXT/SUN, WAV
  • 视频支持 :3GP, MP4, MPG, VOB
  • Flash-Adobe 支持 :FLV, SWF, PDF

 

imageIN · 图影

本人开发的图片隐写工具,相比其他图片隐写工具,imageIN 有着更加友好直观的用户界面,使用起来更加简单。imageIN 支持在 PNG 格式图片中写入文本、频域水印、文件。

提高放大图片的质量

把一张拉伸放大图片必然是会让图像质量下降的,虽然 PhotoShop 有多种缩放大小的插值算法供选择,不过能达到的效果有限:

  • 邻近 :一种速度快但精度低的图像像素模拟方法。该方法用于包含未消除锯齿边缘的插图,以保留硬边缘并生成较小的文件。但是,该方法可能产生锯齿状效果,在对图像进行扭曲或缩放时或在某个选区上执行多次操作时,这种效果会变得非常明显。
  • 两次线性:一种通过平均周围像素颜色值来添加像素的方法。该方法可生成中等品质的图像。
  • 两次立方:一种将周围像素值分析作为依据的方法,速度较慢,但精度较高。“两次立方”使用更复杂的计算,产生的色调渐变比“邻近”或“两次线性”更为平滑。
  • 两次立方(较平滑):一种基于两次立方插值且旨在产生更平滑效果的有效图像放大方法。
  • 两次立方(较锐利):一种基于两次立方插值且具有增强锐化效果的有效图像减小方法。此方法在重新取样后的图像中保留细节。如果使用“两次立方(较锐利)”会使图像中某些区域的锐化程度过高,请尝试使用“两次立方”。

通过一些工具能够用特殊的算法让放大的图片尽可能的看起来更好:

waifu2x

waifu2x 是一个专长放大二次元图片(或者绘画、插画)的工具

左边是普通放大,右边是 wifu2x 的放大效果

可用这个在线演示网站使用 wifu2x  ,也可以下载 Windows 下使用的工具

 

PhotoZoom Pro

PhotoZoom Pro 是一款对摄影照片放大效果好的工具,不过 PhotoZoom Pro 是收费软件。

 

SmillaEnlarger

SmillaEnlarger 是另一款适用于摄影照片的放大工具,它是免费开源的。

 


 

 

 

你可能还喜欢这些:

1条回复

  1. 2015年8月22日

    […] ☑ 图片 […]

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*