“切图工”的自我修养

前言

“切图工”是对前端工程师的传统自嘲。随着前端领域的逐渐拓宽，也许对于现在的前端同学来说，“切图”离我们越来越远。但是正如有的同学所说，“切图”也是前端工程师可以掌握，甚至说需要掌握的技能之一。

需要掌握？

之前遇到过“切图”工作分工不明确的问题，其实在历史上的一段时期，“切图”工作确实主要是由前端完成的（甚至存在一种叫“页面构建师”的职位）。

那么为什么前端工程师要完成“切图”工作呢：

是切图产物的直接使用者，自己切图比较符合自己预期；
比较了解切图产物的应用，更方便做如优化等事情；a
可以根据情况自行调整 UI 图，以方便开发；

而现在，随着切图工具的升级迭代，如 sketch、zeplin、蓝湖等工具的兴起，产生切图的工作量逐渐被省略。而 UI 通常直接使用这些工具，也就是说，现在的切图，通常由 UI 生成。但正如之前所说，由于各种原因，前端工程师仍然应该对“切图”相关的知识有所了解，也应当有能力承担“切图”的工作。

何为“切”

“切图”的“切”，指的是 PS 中的切片工具（或同类工具）。可以通过将页面划分为各个区块，快速生成结果。（包括图片，甚至能直接生成网页。）

用户切片、所有切片；
切片选项：名称、URL、目标、信息文本、alt、……；

切片导出

配合“切片”使用的： 存储为 Web 所用格式。

格式相关设置：

预设

GIF 颜色查找表大小（颜色深度）、仿色算法；
JPEG 各种品质；
PNG 位深（颜色深度）、仿色算法；

格式

GIF：支持动画、支持透明度（1 bit）。位深有限（8 bits） -> 最高256色
JPEG：压缩比例高，支持广泛。有损压缩。
PNG-8：支持透明度，无损压缩。位深有限（8 bits） -> 最高 256 色
PNG-24：支持透明度（8 bits），无损压缩，位深够大（24 bits）
WBMP：用于 WAP 手机的 1位单色图像

颜色相关设置

颜色深度 & 颜色数量

颜色深度，相当于“每一个颜色，可用多少位二进制表示”。显然，此位深越大，可表示的颜色数量就越多。

1位：2色；
8位：256色 —— Web 安全色 & 颜色查找表；
// 16位：6万色；65535
// 18位：26万色；
24位：1600万色（True Color，真彩色）；

降低颜色深度算法

当使用1位、8位等颜色深度较小的格式时，需要将色彩较多的图像的颜色数量，减少到对应格式足够支持的数量。这种“如何把图像颜色数量减少”的算法，称为“降低颜色深度算法”。

CLUT，颜色查找表

可感知：优先选择人眼感知比较灵敏的颜色
可选择：与“可感知”类似，支持的颜色范围更大，可保留 Web 颜色
随样性：从图像主要色谱中提取出的色样
受限：使用标准 Web 颜色表
自定：使用用户创建或修改的颜色表

仿色算法

当出现“颜色深度降低”的情况时，可以用仿色算法，通过有限的颜色“仿造”出更多颜色的感觉。

扩散：在相邻像素间扩散
图案：使用类似“半调”的方形图案
杂色：与“扩散”相似的随机图案

透明度 & 透明度仿色 & 杂边

对于 PNG-24（PNG-32）：PNG-24 的颜色位深为 24 bits。（RGB 通道，8 bits + 8bits + 8bits），另外使用 8 bits alpha 通道实现透明度。

对于 8 bits CLUT（如 PNG-8，GIF）：颜色表中预留一个颜色为全透明（如 255颜色 + 1透明）。半透明的部分，可用仿色模仿透明效果。

对于半透明部分的颜色，可通过“杂边”处理：

无透明度时，杂边颜色为透明区域颜色；
有透明度时，杂边颜色与半透明区域混合；

Web 靠色

控制是否将现有颜色表中的颜色，转化为 Web 安全色（防止仿色）。

其他设置

交错

渐进加载：文件下载时，先显示图像的低分辨率版本。会增加文件大小。