前言
“切圖工”是對前端工程師的傳統(tǒng)自嘲觅赊。隨著前端領(lǐng)域的逐漸拓寬龙助，也許對于現(xiàn)在的前端同學(xué)來說蔗坯，“切圖”離我們越來越遠(yuǎn)康震。但是正如有的同學(xué)所說，“切圖”也是前端工程師可以掌握宾濒，甚至說需要掌握的技能之一腿短。
需要掌握？
之前遇到過“切圖”工作分工不明確的問題绘梦，其實在歷史上的一段時期橘忱，“切圖”工作確實主要是由前端完成的（甚至存在一種叫“頁面構(gòu)建師”的職位）。
那么為什么前端工程師要完成“切圖”工作呢：
- 是切圖產(chǎn)物的直接使用者卸奉，自己切圖比較符合自己預(yù)期钝诚；
- 比較了解切圖產(chǎn)物的應(yīng)用，更方便做如優(yōu)化等事情榄棵；a
- 可以根據(jù)情況自行調(diào)整 UI 圖凝颇，以方便開發(fā)；
而現(xiàn)在疹鳄，隨著切圖工具的升級迭代祈噪，如 sketch、zeplin尚辑、藍(lán)湖等工具的興起辑鲤，產(chǎn)生切圖的工作量逐漸被省略。而 UI 通常直接使用這些工具杠茬，也就是說月褥，現(xiàn)在的切圖，通常由 UI 生成瓢喉。但正如之前所說宁赤，由于各種原因，前端工程師仍然應(yīng)該對“切圖”相關(guān)的知識有所了解栓票，也應(yīng)當(dāng)有能力承擔(dān)“切圖”的工作决左。
何為“切”
“切圖”的“切”愕够，指的是 PS 中的切片工具（或同類工具）》鹈停可以通過將頁面劃分為各個區(qū)塊惑芭，快速生成結(jié)果。（包括圖片继找，甚至能直接生成網(wǎng)頁遂跟。）
- 用戶切片、所有切片婴渡；
- 切片選項：名稱幻锁、URL、目標(biāo)边臼、信息文本哄尔、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ù)量
顏色深度冠摄，相當(dāng)于“每一個顏色糯崎，可用多少位二進制表示”。顯然河泳，此位深越大沃呢，可表示的顏色數(shù)量就越多。
- 1位：2色拆挥；
- 8位：256色 —— Web 安全色 & 顏色查找表薄霜；
- // 16位：6萬色；65535
- // 18位：26萬色；
- 24位：1600萬色（True Color惰瓜，真彩色）否副；
降低顏色深度算法
當(dāng)使用1位、8位等顏色深度較小的格式時鸵熟，需要將色彩較多的圖像的顏色數(shù)量副编，減少到對應(yīng)格式足夠支持的數(shù)量。這種“如何把圖像顏色數(shù)量減少”的算法流强，稱為“降低顏色深度算法”痹届。
CLUT，顏色查找表
- 可感知：優(yōu)先選擇人眼感知比較靈敏的顏色
- 可選擇：與“可感知”類似打月，支持的顏色范圍更大队腐，可保留 Web 顏色
- 隨樣性：從圖像主要色譜中提取出的色樣
- 受限：使用標(biāo)準(zhǔn) Web 顏色表
- 自定：使用用戶創(chuàng)建或修改的顏色表
仿色算法
當(dā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)出方法默勾。
