前言
隨着web的發展，網站資源的流量也變得愈來愈大。據統計，60% 的網站流量均來自網站圖片，可見對圖片合理優化能夠大幅影響網站流量，減少帶寬消耗和服務器壓力。php
有時候你花大力氣去配置 webpack 使打包體積減小，不如好好優化幾張圖片，這篇文章就是讓你明白如何選擇正確的圖片，而且讓你明白這麼多圖片格式，在什麼場景下使用什麼格式，若是想看答案，那麼直接滑到文末看圖便可。html
個人更多文章能夠看 GitHub博客,前端
基本概念
在進入正題以前，先聊聊一些圖片相關的基本概念。webpack
一張照片（位圖）不斷放大以後，會看到一個個小格子，這些小格子，叫像素。git
一個格子（像素），在計算機中，用二進制來表示，使用的二進制位數越多，像素的色彩就越豐富。程序員
舉個🌰，若是一個像素用一位二進制數表示，能有多少種顏色呢？github
兩種，一個二進制位，要不放 0（表示黑色），要不放 1（表示白色）
下圖展現了一個像素二進制的位數最多能夠展現多少種顏色。web
在對圖片有了基本的瞭解以後，接下來對圖片進行分下類，有利於理解各類格式圖片的特色。算法
根據圖的類型分類
- 點陣圖(位圖)
- 矢量圖
位圖(點陣圖)
位圖，也叫作點陣圖，像素圖。構成點陣圖的最小單位是像素，位圖就是由像素陣列的排列來實現其顯示效果的，每一個像素有本身的顏色信息，在對位圖圖像進行編輯操做的時候，可操做的對象是每一個像素，咱們能夠改變圖像的色相、飽和度、透明度，從而改變圖像的顯示效果。編程
前面介紹中的那種不斷放大會有小格子的圖就是屬於位圖。
常見的好比：jpg、png、webp等，咱們平時遇到的大多數都是位圖。
矢量圖
矢量圖，也叫作向量圖。矢量圖並不紀錄畫面上每一點的信息，而是紀錄了元素形狀及顏色的算法，當你打開一幅矢量圖的時候，軟件對圖形對應的函數進行運算，將運算結果圖形的形狀和顏色顯示給你看。
不管顯示畫面是大仍是小，畫面上的對象對應的算法是不變的，因此，即便對畫面進行倍數至關大的縮放，其顯示效果仍然相同(不失真)。
常見的就是 svg 格式的。
根據壓縮分類
- 無壓縮。
- 無損壓縮。
- 有損壓縮。
無壓縮
無壓縮的圖片格式不對圖片數據進行壓縮處理，能準確地呈現原圖片。BMP 格式就是其中之一。
有損壓縮
指在壓縮文件大小的過程當中，損失了一部分圖片的信息，也即下降了圖片的質量，而且這種損失是不可逆的，咱們不可能從有一個有損壓縮過的圖片中恢復出原來的圖片。
常見的有損壓縮手段，是按照必定的算法將臨近的像素點進行合併。壓縮算法不會對圖片全部的數據進行編碼壓縮，而是在壓縮的時候，去除了人眼沒法識別的圖片細節。所以有損壓縮能夠在同等圖片質量的狀況下大幅下降圖片的尺寸。其中的表明是 jpg。
無損壓縮
在壓縮圖片的過程當中，圖片的質量沒有任何損耗。咱們任什麼時候候均可以從無損壓縮過的圖片中恢復出原來的信息。
壓縮算法對圖片的全部的數據進行編碼壓縮，能在保證圖片的質量的同時下降圖片的尺寸。
png 是其中的表明。
小結
- 使用有損壓縮處理圖像，是去除某些像素數據，沒法找回原圖。
- 使用無損處理圖像，是對像素數據進行壓縮，能夠找回原圖。
常見的圖片格式解析
GIF
關鍵詞：無損壓縮、索引色、透明、動畫
GIF(Graphics Interchange Format) 的原義是「圖像互換格式」，是一種基於 LZW 算法連續色調的無損的基於索引色的壓縮格式。其壓縮率通常在 50% 左右，它不屬於任何應用程序因此幾乎全部相關軟件都支持它，公共領域有大量的軟件在使用 GIF 圖像文件。
GIF 是一種無損壓縮，因此它只是對像素數據進行壓縮，其實 LZW 算法只是一個壓縮數據的算法，若是你懂哈夫曼算法的話，可能就比較好理解壓縮數據是怎麼回事兒了。
GIF 的特性是幀動畫。
相比古老的bmp格式，尺寸較小，並且支持透明(不支持半透明，由於不支持 Alpha 透明通道 )和動畫。
優點
- 優秀的壓縮算法使其在必定程度上保證圖像質量的同時將體積變得很小。
- 可插入多幀，從而實現動畫效果。
- 可設置透明色以產生對象浮現於背景之上的效果。
缺點
因爲採用了 8 位壓縮，最多隻能處理 256 種顏色，故不宜應用於真彩色(文末的附錄有解釋)圖片。
適合場景
色彩簡單的 logo、icon、線框圖、文字輸出等
JPG/JPEG
關鍵詞：有損壓縮、直接色、適合大圖、體積小
JPEG 格式是最多見的一種圖像格式，文件後輟名爲「.JPEG」或「.jpg」，JPEG 能夠說是人們最熟悉的圖檔格式，相信在數字相機普及的如今，幾乎每臺數字相機、照相手機均可以（甚至只能）輸出 JPEG 格式的圖檔。
JPEG 是一種很典型的使用有損壓縮圖像格式，也就是說使用者每次進行 JPEG 的存檔動做後，圖檔的一些內容細節都會遭到永久性的破壞，尤爲是使用太高的壓縮比例，將使最終解壓縮後恢復的圖像質量明顯下降，若是追求高品質圖像，不宜採用太高壓縮比例。
JPEG 圖片格式的設計目標，是在不影響人類可分辨的圖片質量的前提下，儘量的壓縮文件大小。
Baseline JPEG 和 Progressive JPEG
JPEG 有兩種保存方式：Baseline JPEG（標準型）、Progressive JPEG（漸進式）。兩種格式有相同尺寸以及圖像數據，他們的擴展名也是相同的，惟一的區別是兩者顯示的方式不一樣。
Baseline JPEG
Baseline JPEG 文件存儲方式是按從上到下的掃描方式，把每一行順序的保存在 JPEG 文件中。打開這個文件顯示它的內容時，數據將按照存儲時的順序從上到下一行一行的被顯示出來，直到全部的數據都被讀完，就完成了整張圖片的顯示。若是文件較大或者網絡下載速度較慢，那麼就會看到圖片被一行行加載的效果，這種格式的JPEG沒有什麼優勢，所以，通常都推薦使用Progressive JPEG。
Progressive JPEG
和 Baseline 一遍掃描不一樣，Progressive JPEG 文件包含屢次掃描，這些掃描順尋的存儲在 JPEG 文件中。打開文件過程當中，會先顯示整個圖片的模糊輪廓，隨着掃描次數的增長，圖片變得愈來愈清晰。這種格式的主要優勢是在網絡較慢的狀況下，能夠看到圖片的輪廓知道正在加載的圖片大概是什麼。在一些網站打開較大圖片時，你就會注意到這種技術。
漸進式圖片帶來的好處是可讓用戶在沒有下載完圖片就能夠看到最終圖像的大體輪廓，必定程度上能夠提高用戶體驗（瀑布留的網站建議仍是使用標準型的）。
更多關於 Baseline JPEG 和 Progressive JPEG 請看這篇文章：使用漸進式JPEG來提高用戶體驗。
優勢
- 能夠支持 24bit 真彩色，廣泛應用於須要連續色調的圖像如色彩豐富的圖片、照片等；
- 可利用可變的壓縮比以控制文件大小；
- 支持交錯（對於漸近式 JPEG 文件）；
缺點
- JPEG 不適合用來存儲企業 Logo、線框類的圖。由於有損壓縮會致使圖片模糊，而直接色的選用，又會致使圖片文件較GIF更大。
- 有損耗壓縮會使原始圖片數據質量降低。
- JPEG 圖像不支持透明度處理，透明圖片須要召喚 PNG 來呈現。
適合場景
JPG 適用於呈現色彩豐富的圖片，在咱們平常開發中，JPG 圖片常常做爲大的背景圖、輪播圖或 Banner 圖出現。
GIF vs JPEG
因爲 GIF 與 JPEG 有着如此不一樣的特性，所以咱們能夠很輕易的選擇什麼時候該用哪種格式來輸出咱們須要的圖檔：當圖片擁有豐富的色彩時，而且沒有明顯銳利反差的邊緣線條時，選擇 JPEG 能夠獲得最好的輸出結果，照片就是最好的例子；當圖片是擁有明確邊緣的線條圖、沒有使用太多色彩、甚至可能須要透明背景時，GIF 是很好的選擇，檔案小、畫質又精美。
PNG
關鍵詞：無損壓縮、索引色、支持透明、體積大
便攜式網絡圖形（簡稱 PNG，英語全稱：Portable Network Graphics）。PNG 可以提供長度比 GIF 小30%的無損壓縮圖像文件。它同時提供 24 位和 32 位真彩色圖像支持以及其餘諸多技術性支持。因爲PNG 優秀的特色，PNG 格式圖片能夠稱爲「網頁設計專用格式」。PNG 最初的開發目的是爲了做爲 GIF 的替代方案的，做爲作新開發的影像傳輸文件格式，PNG 一樣使用了無損壓縮格式，事實上 PNG 的開發就是由於 GIF 所使用的無損壓縮格式專利問題而誕生的。
PNG 有三種形式，下面分別介紹一下他們的區別。
PNG-8
PNG-8 是 PNG 的索引色版本。PNG-8 是無損的、使用索引色的、點陣圖。
PNG-8 是很是好的 GIF 替代者，在可能的狀況下，應該儘量的使用 PNG-8 而不是 GIF，由於在相同的圖片效果下，PNG-8 具備更小的文件體積。除此以外，PNG-8 還支持透明度的調節，而 GIF 並不支持。 如今，除非須要動畫的支持，不然咱們沒有理由使用 GIF 而不是 PNG-8。
PNG-24
PNG-24 是 PNG 的直接色版本。PNG-24 是無損的、使用直接色的、點陣圖。
無損的、使用直接色的點陣圖，聽起來很是像 BMP，是的，從顯示效果上來看，PNG-24 跟 BMP 沒有不一樣。PNG-24 的優勢在於，它壓縮了圖片的數據，使得一樣效果的圖片，PNG-24 格式的文件大小要比 BMP 小得多。固然，PNG24 的圖片仍是要比 JPEG、GIF、PNG-8 大得多。
雖然 PNG-24 的一個很大的目標，是替換 JPEG 的使用。但通常而言，PNG-24 的文件大小是 JPEG 的五倍之多，而顯示效果則一般只能得到一點點提高。因此，只有在你不在意圖片的文件體積，而想要最好的顯示效果時，才應該使用 PNG-24 格式。
另外，PNG-24 跟 PNG-8 同樣，是支持圖片透明度的。
理論上來講，當你追求最佳的顯示效果、而且不在乎文件體積大小時，是推薦使用 PNG-24 的。
實踐當中，爲了規避體積的問題，咱們通常不用PNG去處理較複雜的圖像。當咱們遇到適合 PNG 的場景時，也會優先選擇更爲小巧的 PNG-8。
PNG-32
PNG-32 跟 PNG-24 的區別就是多了一個 Alpha 通道，用來支持半透明，其餘的跟 PNG-24 基本同樣。
優勢：
- 支持高級別無損耗壓縮；
- 支持 alpha 通道透明度；
- 支持 256 色調色板技術以產生小體積文件
- 最高支持 24 位真彩色圖像以及 8 位灰度圖像。
- 支持圖像亮度的 Gamma 校準信息。
- 支持存儲附加文本信息，以保留圖像名稱、做者、著做權、創做時間、註釋等信息。
- 漸近顯示和流式讀寫，適合在網絡傳輸中快速顯示預覽效果後再展現全貌。
缺點
- 較舊的瀏覽器 IE6- 和程序可能不支持 PNG 文件；
- 與 JPEG 的有損耗壓縮相比，PNG 提供的壓縮量較少；
- 與 GIF 格式相比，對多圖像文件或動畫文件不提供任何支持。
適合場景
呈現小的 Logo、顏色簡單且對比強烈的圖片或背景等。
關於 PNG 的小知識點
PNG 分爲兩種，一種是 Index，一種是 RGB。Index 記錄同一種顏色的值和出現的位置（簡單地說，好比一個 2px*2px 的超級小圖，從左往右從上往下依次的顏色是紅，白，白，紅，那麼記錄的方法就是「紅-1,4；白-2,3」）；而 RGB 圖則把全部像素的色值依次記錄下來（即「紅，白，白紅」）。對於相同的圖片，Index 格式的尺寸老是小於 RGB。
其中 PNG-8 就是 Index，稱做爲索引色，而 PNG-24 和 PNG-32 是 RGB 形式，也可稱做爲直接色。
由於 PNG 是無損壓縮，保留了圖片須要的全部信息，因此索引色是能夠轉化爲直接色的。
WebP
關鍵詞：年輕、有損、無損、兼容性
WebP 是谷歌開發的一種新圖片格式，WebP 是同時支持有損和無損壓縮的、使用直接色的、點陣圖。
從名字就能夠看出來它是爲 Web 而生的，什麼叫爲 Web 而生呢？就是說相同質量的圖片，WebP 具備更小的文件體積。如今網站上充滿了大量的圖片，若是可以下降每個圖片的文件大小，那麼將大大減小瀏覽器和服務器之間的數據傳輸量，進而下降訪問延遲，提高訪問體驗。
- 在無損壓縮的狀況下，相同質量的 WebP 圖片，文件大小要比 PNG 小26%；
- 在有損壓縮的狀況下，具備相同圖片精度的 WebP 圖片，文件大小要比 JPEG 小 25%~34%；
- WebP 圖片格式支持圖片透明度，一個無損壓縮的 WebP 圖片，若是要支持透明度只須要 22% 的格外文件大小。
能夠看到 WebP 集多種圖片文件格式的優勢於一身，因此在圖片的質量和性能上，WebP 無疑是贏家。
不過 WebP 有有一個缺點，致使還不能大規模使用，那就是兼容性。
這是我 2019 年 5 月截的圖，能夠看到 IE 和 Safari 全部的版本都是不支持的(這是硬傷)， 火狐也是最新的幾個版本纔開始支持，年輕有年輕的代價。
此外，WebP 與 JPG 相比較，編碼速度慢 10 倍，解碼速度慢 1.5 倍，而絕大部分的網絡應用中，圖片都是靜態文件，因此對於用戶使用只須要關心解碼速度便可。但實際上，WebP 雖然會增長額外的解碼時間，可是因爲減小了文件體積，縮短了加載的時間，實際上文件的渲染速度反而變快了。
使用場景
WebP 集多種圖片文件格式的優勢於一身，因此基本上適合各類場景，可是因爲兼容性很差，因此咱們若是大規模的適用 WebP，必定要在 Safari 和 IE 裏面施行降級。
這是淘寶商品圖片是我在 Chrome 打開的例子，能夠看到圖片的後綴是 .jpg_.webp，若是這張圖片在 Safari 打開後綴就變爲了 .jpg，這是一種降級方案，其餘的方案請讀者自行研究，不在本文討論中。
APNG
APNG（Animated Portable Network Graphics）顧名思義是基於 PNG 格式擴展的一種動畫格式，增長了對動畫圖像的支持，同時加入了 24 位圖像和 8 位 Alpha 透明度的支持，這意味着動畫將擁有更好的質量，其誕生的目的是爲了替代老舊的 GIF 格式，但它目前並無得到 PNG 組織官方的承認。
APNG 第1幀爲標準 PNG 圖像，剩餘的動畫和幀速等數據放在 PNG 擴展數據塊，所以只支持原版 PNG 的軟件會正確顯示第 1 幀。
在兼容性方面絕大部分瀏覽器都仍是支持的，若是之前是由於動畫的緣由用 GIF 的，如今用 APNG 是一個不錯的選擇，其餘的特性是跟 PNG 樣的，由於 APNG 只是一個 PNG 的擴展。
更多 APNG 相關的能夠看 APNG 那些事
SVG
關鍵詞：無損、矢量圖、體積小、不失真、兼容性好
可縮放矢量圖形 英文 Scalable Vector Graphics(SVG)，是無損的、矢量圖。
SVG是一種用 XML 定義的語言，用來描述二維矢量及矢量/柵格圖形。SVG提供了3種類型的圖形對象：矢量圖形（vectorgraphicshape例如：由直線和曲線組成的路徑）、圖象(image)、文本(text)。圖形對象還可進行分組、添加樣式、變換、組合等操做，特徵集包括嵌套變換（nestedtransformations）、剪切路徑（clippingpaths）、alpha 蒙板（alphamasks）、濾鏡效果（filtereffects）、模板對象（templateobjects）和其它擴展（extensibility）。
SVG 跟上面這些圖片格式最大的不一樣，是 SVG 是矢量圖。這意味着 SVG 圖片由直線和曲線以及繪製它們的方法組成。當你放大一個 SVG 圖片的時候，你看到的仍是線和曲線，而不會出現像素點。這意味着 SVG 圖片在放大時，不會失真，因此它很是適合用來繪製企業 Logo、Icon 等。
優勢：
- SVG 可被很是多的工具讀取和修改（好比記事本）。
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
- SVG 是可伸縮的。
- SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）。
- SVG 能夠與 JavaScript 技術一塊兒運行
- SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內容的前提下能夠實現位圖格式中相似文字陰影的效果。
- SVG圖形格式能夠用來動態生成圖形。例如，可用 SVG 動態生成具備交互功能的地圖，嵌入網頁中，並顯示給終端用戶。
缺點：
- 渲染成本比較高，對於性能有影響。
- SVG 的學習成本比較高，由於它是可編程的。
適用場景
一、高保真度複雜矢量文檔已經是並將繼續是 SVG 的最佳點。它很是詳細，適用於查看和打印，能夠是獨立的，也能夠嵌入到網頁中
二、在WEB項目中的平面圖繪製，如須要繪製線，多邊形，圖片等。
三、數據可視化。
SVG 只是 Web 開發經常使用的一種矢量圖，其實矢量圖常見還有幾種格式：BW 格式、AI 格式、CDR 格式、ICO 格式。
總結
本文詳細的介紹了常見的圖片格式：GIF、JPEG、PNG、WebP、APNG、SVG，介紹了他們是什麼，有什麼用，優勢和缺點，以及使用場景。因爲圖片相關的知識確實太多了，我只是把一些我以爲必要的寫出來，下面在網上找到了一個選擇圖片過程的表格和圖，下次不知道選擇什麼圖片格式，直接看圖就行。
其中 APNG 和 WebP 格式出現的較晚，還沒有被 Web 標準所採納，只有在特定平臺或瀏覽器環境能夠預知的狀況下加以採用。圖片格式選擇過程以下：
| 圖片格式 | 支持透明 | 動畫支持 | 壓縮方式 | 瀏覽器支持 | 相對原圖大小 | 適應場景 |
|---|---|---|---|---|---|---|
| baseline-jpeg | 不支持 | 不支持 | 有損 | 全部 | 由畫質決定 | 全部通用場景 |
| progressive-jpeg | 不支持 | 不支持 | 有損 | 全部 | 由畫質決定 | 全部通用場景, 漸進式加載 |
| gif | 支持 | 支持 | 無損 | 全部 | 由幀數和每幀圖片大小決定 | 簡單顏色，動畫 |
| png | 支持 | 不支持 | 無損 | 全部 | 由png色值位數決定 | 須要透明時 |
| webp | 支持 | 不支持 | 有損和無損 | 全部(除IE和Safari) | 由壓縮率決定 | 複雜顏色及形狀，瀏覽器平臺可預知 |
| apng | 支持 | 支持 | 無損 | 全部(除IE 和Opera) | 由每幀圖片決定 | 須要半透明效果的動畫 |
| svg | 支持 | 支持 | 無損 | 全部(IE8以上) | 由內容和特效複雜度決定 | 簡單圖形，須要良好的放縮體驗，須要動態控制圖片特效 |
附加內容
如下內容大多來自於網絡，因爲我在寫這篇文章的過程當中看到了這些，我以爲有必要了解一下，因此我將這些貼出來，跟文章內容關係不大，能夠不看。
位圖圖像屬性
索引顏色/顏色表
位圖經常使用的一種壓縮方法。從位圖圖片中選擇最有表明性的若干種顏色（一般不超過256種）編製成顏色表，而後將圖片中原有顏色用顏色表的索引來表示。這樣原圖片能夠被大幅度有損壓縮。適合於壓縮網頁圖形等顏色數較少的圖形，不適合壓縮照片等色彩豐富的圖形。
Alpha通道
在原有的圖片編碼方法基礎上，增長像素的透明度信息。圖形處理中，一般把 RGB 三種顏色信息稱爲紅通道、綠通道和藍通道，相應的把透明度稱爲 Alpha 通道。多數使用顏色表的位圖格式都支持 Alpha 通道。
色彩深度
色彩深度又叫色彩位數，即位圖中要用多少個二進制位來表示每一個點的顏色，是分辨率的一個重要指標。經常使用有1位（單色），2位（4色，CGA），4位（16色，VGA），8位（256色），16位（加強色），24位（真彩色）和32位等。色深16位以上的位圖還能夠根據其中分別表示RGB三原色或CMYK四原色（有的還包括Alpha通道）的位數進一步分類，如16位位圖圖片還可分爲R5G6B5，R5G5B5X1（有1位不攜帶信息），R5G5B5A1，R4G4B4A4等等。
- 8位色，所謂8位色並非圖像只有8種顏色，而是2^8，即256種顏色，8位圖指的是用8個bits來表示顏色；
- 16位色，2^16，從人眼的感受來講，16位色基本能夠知足視覺須要了；
- 24位色，又稱爲「真彩色」。大概有1600萬之多，這個數字幾乎是人類視覺可分辨顏色的極限；
- 32位色，並不是 2^32, 其實也是 2^24 種顏色，不過它增長了2^8 階顏色的灰度，也就是8位透明度，所以規定它爲32位色。
在製做網站頁面圖片的時候，設計者通常選擇 24 位圖像。32 位圖像雖然質量更好，但同時也帶來更大的圖像體積（事實上，通常肉眼也很難分辨 24 位圖和 32 位圖的區別）。此外將原始位圖放大與縮小都會使圖像效果失真，這是由於它們減少了圖像中有效像素的數量或密度的緣故，因此在製做過程當中應儘可能避免圖片被編輯的次數。
真彩色與僞彩色、直接色
描述一幅圖像須要使用圖像的屬性。圖像的屬性包含分辨率、像素深度、真/僞彩色、圖像的表示法和種類等。本節介紹前面三個特性。
搞清真彩色、僞彩色與直接色的含義，對於編寫圖像顯示程序、理解圖像文件的存儲格式有直接的指導意義，也不會對出現諸如這樣的現象感到困惑：原本是用真彩色表示的圖像，但在VGA顯示器上顯示的圖像顏色卻不是原來圖像的顏色。
我這裏就不以圖形學的方式介紹各類花裏胡哨的概念，我就用最簡單的，做爲一個程序員的角度來理解就好了。
真彩色
真彩色圖像是一種用三個或更多字節描述像素的計算機圖像存儲方式。
通常來講，前三個通道都會各用一個字節表示，如紅綠藍（RGB）或者藍綠紅（BGR）。若是存在第四個字節，則表示該圖像採用了 Alpha 通道。然而，實際系統每每用多於 8 位（即1字節）表達一個通道，如一個 48 位的掃描儀等。這樣的系統都統稱爲真彩色系統。
僞彩色
對於僞彩色圖像其實能夠理解爲索引圖像，他的每一個像素值存儲的不是直接的基色強度，而是存儲的索引。就跟 js 裏面的引用變量同樣，變量只是個地址，變量所指向的值纔是真正的值。
對於僞彩色圖像會有一個顏色表，是一個[3，255] 的數組，分別對應 0~255 個灰度值的RGB值，對照原理以下：
能夠看到上圖，像素值存儲的只是索引號 128，根據索引找到的 RGB 值纔是真正的基色強度。
直接色
直接色又稱假彩色。它和僞彩色的區別就是，前者的每一個基色強度都要經過索引找到真正的基色強度。
小結
直接色系統產生顏色與真彩色系統相比，相同之處是都採用R，G，B份量決定基色強度，不一樣之處是前者的基色強度直接用R，G，B決定，然後者的基色強度由R，G，B經變換後決定。於是這兩種系統產生的顏色就有差異。試驗結果代表，使用直接色在顯示器上顯示的彩色圖像看起來真實、很天然。
直接色系統與僞彩色系統相比，相同之處是都採用查找表，不一樣之處是前者對 R，G，B份量分別進行變換，後者是把整個像素看成查找表的索引值進行彩色變換。
參考連接
最後歡迎你們關注個人公衆號-「前端桃園」，我是桃翁。