前言
隨著web的發展，網站資源的流量也變得越來越大。據統計，60% 的網站流量均來自網站圖片，可見對圖片合理優化可以大幅影響網站流量，減小頻寬消耗和伺服器壓力。
有時候你花大力氣去配置 webpack 使打包體積減少，不如好好優化幾張圖片，這篇文章就是讓你明白如何選擇正確的圖片，並且讓你明白這麼多圖片格式，在什麼場景下使用什麼格式，如果想看答案，那麼直接滑到文末看圖即可。
我的更多文章可以看 GitHub部落格,
基本概念
在進入正題之前，先聊聊一些圖片相關的基本概念。
一張照片（點陣圖）不斷放大之後，會看到一個個小格子，這些小格子，叫畫素。
一個格子（畫素），在計算機中，用二進位制來表示，使用的二進位制位數越多，畫素的色彩就越豐富。
舉個?，如果一個畫素用一位二進位制數表示，能有多少種顏色呢？
兩種，一個二進位制位，要不放 0（表示黑色），要不放 1（表示白色）
下圖展示了一個畫素二進位制的位數最多可以展示多少種顏色。
在對圖片有了基本的瞭解之後，接下來對圖片進行分下類，有利於理解各種格式圖片的特點。
根據圖的型別分類
- 點陣圖(點陣圖)
- 向量圖
點陣圖(點陣圖)
點陣圖，也叫做點陣圖，畫素圖。構成點陣圖的最小單位是畫素，點陣圖就是由畫素陣列的排列來實現其顯示效果的，每個畫素有自己的顏色資訊，在對點陣圖影像進行編輯操作的時候，可操作的物件是每個畫素，我們可以改變影像的色相、飽和度、透明度，從而改變影像的顯示效果。
前面介紹中的那種不斷放大會有小格子的圖就是屬於點陣圖。
常見的比如：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-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 所有的版本都是不支援的，而且在 ios 上所有的瀏覽器都是不支援的(這是硬傷)， 火狐也是最新的幾個版本才開始支援，年輕有年輕的代價。
此外，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 的學習成本比較高，因為它是可程式設計的。
適用場景
1、高保真度複雜向量文件已是並將繼續是 SVG 的最佳點。它非常詳細，適用於檢視和列印，可以是獨立的，也可以嵌入到網頁中 2、在WEB專案中的平面圖繪製，如需要繪製線，多邊形，圖片等。 3、資料視覺化。
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和 IOS 裝置 ) | 由壓縮率決定 | 複雜顏色及形狀，瀏覽器平臺可預知 |
| 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分量分別進行變換，後者是把整個畫素當作查詢表的索引值進行彩色變換。
參考連結
最後歡迎大家關注我的公眾號-「前端桃園」，我是桃翁。