前言
“切圖工”是對前端工程師的傳統(tǒng)自嘲。隨著前端領(lǐng)域的逐漸拓寬，也許對于現(xiàn)在的前端同學(xué)來說，“切圖”離我們越來越遠。但是正如有的同學(xué)所說，“切圖”也是前端工程師可以掌握，甚至說需要掌握的技能之一。
需要掌握？
之前遇到過“切圖”工作分工不明確的問題，其實在歷史上的一段時期，“切圖”工作確實主要是由前端完成的（甚至存在一種叫“頁面構(gòu)建師”的職位）。
那么為什么前端工程師要完成“切圖”工作呢：
- 是切圖產(chǎn)物的直接使用者，自己切圖比較符合自己預(yù)期；
- 比較了解切圖產(chǎn)物的應(yīng)用，更方便做如優(yōu)化等事情；a
- 可以根據(jù)情況自行調(diào)整 UI 圖，以方便開發(fā)；
而現(xiàn)在，隨著切圖工具的升級迭代，如 sketch、zeplin、藍湖等工具的興起，產(chǎn)生切圖的工作量逐漸被省略。而 UI 通常直接使用這些工具，也就是說，現(xiàn)在的切圖，通常由 UI 生成。但正如之前所說，由于各種原因，前端工程師仍然應(yīng)該對“切圖”相關(guān)的知識有所了解，也應(yīng)當有能力承擔“切圖”的工作。
何為“切”
“切圖”的“切”，指的是 PS 中的切片工具（或同類工具）?？梢酝ㄟ^將頁面劃分為各個區(qū)塊，快速生成結(jié)果。（包括圖片，甚至能直接生成網(wǎng)頁。）
- 用戶切片、所有切片；
- 切片選項：名稱、URL、目標、信息文本、alt、……；
切片導(dǎo)出
配合“切片”使用的： 存儲為 Web 所用格式。
格式相關(guān)設(shè)置：
預(yù)設(shè)
- GIF 顏色查找表大?。伾疃龋?、仿色算法；
- JPEG 各種品質(zhì)；
- PNG 位深（顏色深度）、仿色算法；
格式
- GIF：支持動畫、支持透明度（1 bit）。位深有限（8 bits） -> 最高256色
- JPEG：壓縮比例高，支持廣泛。有損壓縮。
- PNG-8：支持透明度，無損壓縮。位深有限（8 bits） -> 最高 256 色
- PNG-24：支持透明度（8 bits），無損壓縮，位深夠大（24 bits）
- WBMP：用于 WAP 手機的 1位 單色圖像
顏色相關(guān)設(shè)置
顏色深度 & 顏色數(shù)量
顏色深度，相當于“每一個顏色，可用多少位二進制表示”。顯然，此位深越大，可表示的顏色數(shù)量就越多。
- 1位：2色；
- 8位：256色 —— Web 安全色 & 顏色查找表；
- // 16位：6萬色；65535
- // 18位：26萬色；
- 24位：1600萬色（True Color，真彩色）；
降低顏色深度算法
當使用1位、8位等顏色深度較小的格式時，需要將色彩較多的圖像的顏色數(shù)量，減少到對應(yīng)格式足夠支持的數(shù)量。這種“如何把圖像顏色數(shù)量減少”的算法，稱為“降低顏色深度算法”。
CLUT，顏色查找表
- 可感知：優(yōu)先選擇人眼感知比較靈敏的顏色
- 可選擇：與“可感知”類似，支持的顏色范圍更大，可保留 Web 顏色
- 隨樣性：從圖像主要色譜中提取出的色樣
- 受限：使用標準 Web 顏色表
- 自定：使用用戶創(chuàng)建或修改的顏色表
仿色算法
當出現(xiàn)“顏色深度降低”的情況時，可以用仿色算法，通過有限的顏色“仿造”出更多顏色的感覺。
- 擴散：在相鄰像素間擴散
- 圖案：使用類似“半調(diào)”的方形圖案
- 雜色：與“擴散”相似的隨機圖案
透明度 & 透明度仿色 & 雜邊
對于 PNG-24（PNG-32）：PNG-24 的顏色位深為 24 bits。（RGB 通道，8 bits + 8bits + 8bits），另外使用 8 bits alpha 通道實現(xiàn)透明度。
對于 8 bits CLUT（如 PNG-8，GIF）：顏色表中預(yù)留一個顏色為全透明（如 255顏色 + 1透明）。半透明的部分，可用仿色模仿透明效果。
對于半透明部分的顏色，可通過“雜邊”處理：
- 無透明度時，雜邊顏色為透明區(qū)域顏色；
- 有透明度時，雜邊顏色與半透明區(qū)域混合；
Web 靠色
控制是否將現(xiàn)有顏色表中的顏色，轉(zhuǎn)化為 Web 安全色（防止仿色）。
其他設(shè)置
交錯
漸進加載：文件下載時，先顯示圖像的低分辨率版本。會增加文件大小。
大小
- 縮放插值算法：臨近 & 其他插值算法
圖層導(dǎo)出
用來替換上述方法的，新的導(dǎo)出方法。
