前言
“切图工”是对前端工程师的传统自嘲。随着前端领域的逐渐拓宽，也许对于现在的前端同学来说，“切图”离我们越来越远。但是正如有的同学所说，“切图”也是前端工程师可以掌握，甚至说需要掌握的技能之一。
需要掌握？
之前遇到过“切图”工作分工不明确的问题，其实在历史上的一段时期，“切图”工作确实主要是由前端完成的（甚至存在一种叫“页面构建师”的职位）。
那么为什么前端工程师要完成“切图”工作呢：
- 是切图产物的直接使用者，自己切图比较符合自己预期；
- 比较了解切图产物的应用，更方便做如优化等事情；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 安全色（防止仿色）。
其他设置
交错
渐进加载：文件下载时，先显示图像的低分辨率版本。会增加文件大小。
大小
- 缩放插值算法：临近 & 其他插值算法
图层导出
用来替换上述方法的，新的导出方法。
