建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
前言
隨著web的發(fā)展，網(wǎng)站資源的流量也變得越來(lái)越大。據(jù)統(tǒng)計(jì)，60% 的網(wǎng)站流量均來(lái)自網(wǎng)站圖片，可見(jiàn)對(duì)圖片合理優(yōu)化可以大幅影響網(wǎng)站流量，減小帶寬消耗和服務(wù)器壓力。
有時(shí)候你花大力氣去配置 webpack 使打包體積減少，不如好好優(yōu)化幾張圖片，這篇文章就是讓你明白如何選擇正確的圖片，并且讓你明白這么多圖片格式，在什么場(chǎng)景下使用什么格式，如果想看答案，那么直接滑到文末看圖即可。
我的更多文章可以看 GitHub博客,
基本概念
在進(jìn)入正題之前，先聊聊一些圖片相關(guān)的基本概念。
一張照片(位圖)不斷放大之后，會(huì)看到一個(gè)個(gè)小格子，這些小格子，叫像素。
一個(gè)格子(像素)，在計(jì)算機(jī)中，用二進(jìn)制來(lái)表示，使用的二進(jìn)制位數(shù)越多，像素的色彩就越豐富。
舉個(gè)，如果一個(gè)像素用一位二進(jìn)制數(shù)表示，能有多少種顏色呢?
兩種，一個(gè)二進(jìn)制位，要不放 0(表示黑色)，要不放 1(表示白色)
下圖展示了一個(gè)像素二進(jìn)制的位數(shù)最多可以展示多少種顏色。
在對(duì)圖片有了基本的了解之后，接下來(lái)對(duì)圖片進(jìn)行分下類(lèi)，有利于理解各種格式圖片的特點(diǎn)。
根據(jù)圖的類(lèi)型分類(lèi)
- 點(diǎn)陣圖(位圖)
- 矢量圖
位圖(點(diǎn)陣圖)
位圖，也叫做點(diǎn)陣圖，像素圖。構(gòu)成點(diǎn)陣圖的最小單位是像素，位圖就是由像素陣列的排列來(lái)實(shí)現(xiàn)其顯示效果的，每個(gè)像素有自己的顏色信息，在對(duì)位圖圖像進(jìn)行編輯操作的時(shí)候，可操作的對(duì)象是每個(gè)像素，我們可以改變圖像的色相、飽和度、透明度，從而改變圖像的顯示效果。
前面介紹中的那種不斷放大會(huì)有小格子的圖就是屬于位圖。
常見(jiàn)的比如：jpg、png、webp等，我們平時(shí)遇到的大多數(shù)都是位圖。
矢量圖
矢量圖，也叫做向量圖。矢量圖并不紀(jì)錄畫(huà)面上每一點(diǎn)的信息，而是紀(jì)錄了元素形狀及顏色的算法，當(dāng)你打開(kāi)一幅矢量圖的時(shí)候，軟件對(duì)圖形對(duì)應(yīng)的函數(shù)進(jìn)行運(yùn)算，將運(yùn)算結(jié)果圖形的形狀和顏色顯示給你看。
無(wú)論顯示畫(huà)面是大還是小，畫(huà)面上的對(duì)象對(duì)應(yīng)的算法是不變的，所以，即使對(duì)畫(huà)面進(jìn)行倍數(shù)相當(dāng)大的縮放，其顯示效果仍然相同(不失真)。
常見(jiàn)的就是 svg 格式的。
根據(jù)壓縮分類(lèi)
- 無(wú)壓縮。
- 無(wú)損壓縮。
- 有損壓縮。
無(wú)壓縮
無(wú)壓縮的圖片格式不對(duì)圖片數(shù)據(jù)進(jìn)行壓縮處理，能準(zhǔn)確地呈現(xiàn)原圖片。BMP 格式就是其中之一。
有損壓縮
指在壓縮文件大小的過(guò)程中，損失了一部分圖片的信息，也即降低了圖片的質(zhì)量，并且這種損失是不可逆的，我們不可能從有一個(gè)有損壓縮過(guò)的圖片中恢復(fù)出原來(lái)的圖片。
常見(jiàn)的有損壓縮手段，是按照一定的算法將臨近的像素點(diǎn)進(jìn)行合并。壓縮算法不會(huì)對(duì)圖片所有的數(shù)據(jù)進(jìn)行編碼壓縮，而是在壓縮的時(shí)候，去除了人眼無(wú)法識(shí)別的圖片細(xì)節(jié)。因此有損壓縮可以在同等圖片質(zhì)量的情況下大幅降低圖片的尺寸。其中的代表是 jpg。
無(wú)損壓縮
在壓縮圖片的過(guò)程中，圖片的質(zhì)量沒(méi)有任何損耗。我們?nèi)魏螘r(shí)候都可以從無(wú)損壓縮過(guò)的圖片中恢復(fù)出原來(lái)的信息。
壓縮算法對(duì)圖片的所有的數(shù)據(jù)進(jìn)行編碼壓縮，能在保證圖片的質(zhì)量的同時(shí)降低圖片的尺寸。
png 是其中的代表。
小結(jié)
- 使用有損壓縮處理圖像，是去除某些像素?cái)?shù)據(jù)，無(wú)法找回原圖。
- 使用無(wú)損處理圖像，是對(duì)像素?cái)?shù)據(jù)進(jìn)行壓縮，可以找回原圖。
常見(jiàn)的圖片格式解析
GIF
關(guān)鍵詞：無(wú)損壓縮、索引色、透明、動(dòng)畫(huà)
GIF(Graphics Interchange Format) 的原義是“圖像互換格式”，是一種基于 LZW 算法連續(xù)色調(diào)的無(wú)損的基于索引色的壓縮格式。其壓縮率一般在 50% 左右，它不屬于任何應(yīng)用程序所以幾乎所有相關(guān)軟件都支持它，公共領(lǐng)域有大量的軟件在使用 GIF 圖像文件。
GIF 是一種無(wú)損壓縮，所以它只是對(duì)像素?cái)?shù)據(jù)進(jìn)行壓縮，其實(shí) LZW 算法只是一個(gè)壓縮數(shù)據(jù)的算法，如果你懂哈夫曼算法的話(huà)，可能就比較好理解壓縮數(shù)據(jù)是怎么回事兒了。
GIF 的特性是幀動(dòng)畫(huà)。
相比古老的bmp格式，尺寸較小，而且支持透明(不支持半透明，因?yàn)椴恢С?Alpha 透明通道 )和動(dòng)畫(huà)。
優(yōu)勢(shì)
- 優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時(shí)將體積變得很小。
- 可插入多幀，從而實(shí)現(xiàn)動(dòng)畫(huà)效果。
- 可設(shè)置透明色以產(chǎn)生對(duì)象浮現(xiàn)于背景之上的效果。
缺點(diǎn)
- 由于采用了 8 位壓縮，最多只能處理 256 種顏色，故不宜應(yīng)用于真彩色(文末的附錄有解釋)圖片。
適合場(chǎng)景
色彩簡(jiǎn)單的 logo、icon、線(xiàn)框圖、文字輸出等
JPG/JPEG
關(guān)鍵詞：有損壓縮、直接色、適合大圖、體積小
JPEG 格式是最常見(jiàn)的一種圖像格式，文件后輟名為“.JPEG”或“.jpg”，JPEG 可以說(shuō)是人們最熟悉的圖檔格式，相信在數(shù)字相機(jī)普及的現(xiàn)在，幾乎每臺(tái)數(shù)字相機(jī)、照相手機(jī)都可以(甚至只能)輸出 JPEG 格式的圖檔。
JPEG 是一種很典型的使用有損壓縮圖像格式，也就是說(shuō)使用者每次進(jìn)行 JPEG 的存檔動(dòng)作后，圖檔的一些內(nèi)容細(xì)節(jié)都會(huì)遭破壞，尤其是使用過(guò)高的壓縮比例，將使最終解壓縮后恢復(fù)的圖像質(zhì)量明顯降低，如果追求高品質(zhì)圖像，不宜采用過(guò)高壓縮比例。
JPEG 圖片格式的設(shè)計(jì)目標(biāo)，是在不影響人類(lèi)可分辨的圖片質(zhì)量的前提下，盡可能的壓縮文件大小。
Baseline JPEG 和 Progressive JPEG
JPEG 有兩種保存方式：Baseline JPEG(標(biāo)準(zhǔn)型)、Progressive JPEG(漸進(jìn)式)。兩種格式有相同尺寸以及圖像數(shù)據(jù)，他們的擴(kuò)展名也是相同的，區(qū)別是二者顯示的方式不同。
Baseline JPEG
Baseline JPEG 文件存儲(chǔ)方式是按從上到下的掃描方式，把每一行順序的保存在 JPEG 文件中。打開(kāi)這個(gè)文件顯示它的內(nèi)容時(shí)，數(shù)據(jù)將按照存儲(chǔ)時(shí)的順序從上到下一行一行的被顯示出來(lái)，直到所有的數(shù)據(jù)都被讀完，就完成了整張圖片的顯示。如果文件較大或者網(wǎng)絡(luò)下載速度較慢，那么就會(huì)看到圖片被一行行加載的效果，這種格式的JPEG沒(méi)有什么優(yōu)點(diǎn)，因此，一般都推薦使用Progressive JPEG。
Progressive JPEG
和 Baseline 一遍掃描不同，Progressive JPEG 文件包含多次掃描，這些掃描順尋的存儲(chǔ)在 JPEG 文件中。打開(kāi)文件過(guò)程中，會(huì)先顯示整個(gè)圖片的模糊輪廓，隨著掃描次數(shù)的增加，圖片變得越來(lái)越清晰。這種格式的主要優(yōu)點(diǎn)是在網(wǎng)絡(luò)較慢的情況下，可以看到圖片的輪廓知道正在加載的圖片大概是什么。在一些網(wǎng)站打開(kāi)較大圖片時(shí)，你就會(huì)注意到這種技術(shù)。
漸進(jìn)式圖片帶來(lái)的好處是可以讓用戶(hù)在沒(méi)有下載完圖片就可以看到最終圖像的大致輪廓，一定程度上可以提升用戶(hù)體驗(yàn)(瀑布留的網(wǎng)站建議還是使用標(biāo)準(zhǔn)型的)。
更多關(guān)于 Baseline JPEG 和 Progressive JPEG 請(qǐng)看這篇文章：使用漸進(jìn)式JPEG來(lái)提升用戶(hù)體驗(yàn)。
優(yōu)點(diǎn)
- 可以支持 24bit 真彩色，普遍應(yīng)用于需要連續(xù)色調(diào)的圖像如色彩豐富的圖片、照片等;
- 可利用可變的壓縮比以控制文件大小;
- 支持交錯(cuò)(對(duì)于漸近式 JPEG 文件);
缺點(diǎn)
- JPEG 不適合用來(lái)存儲(chǔ)企業(yè) Logo、線(xiàn)框類(lèi)的圖。因?yàn)橛袚p壓縮會(huì)導(dǎo)致圖片模糊，而直接色的選用，又會(huì)導(dǎo)致圖片文件較GIF更大。
- 有損耗壓縮會(huì)使原始圖片數(shù)據(jù)質(zhì)量下降。
- JPEG 圖像不支持透明度處理，透明圖片需要召喚 PNG 來(lái)呈現(xiàn)。
適合場(chǎng)景
JPG 適用于呈現(xiàn)色彩豐富的圖片，在我們?nèi)粘ｉ_(kāi)發(fā)中，JPG 圖片經(jīng)常作為大的背景圖、輪播圖或 Banner 圖出現(xiàn)。
GIF vs JPEG
由于 GIF 與 JPEG 有著如此不同的特性，因此我們可以很輕易的選擇何時(shí)該用哪一種格式來(lái)輸出我們需要的圖檔：當(dāng)圖片擁有豐富的色彩時(shí)，并且沒(méi)有明顯銳利反差的邊緣線(xiàn)條時(shí)，選擇 JPEG 可以得到不錯(cuò)的輸出結(jié)果，照片就是例子;當(dāng)圖片是擁有明確邊緣的線(xiàn)條圖、沒(méi)有使用太多色彩、甚至可能需要透明背景時(shí)，GIF 是很好的選擇，檔案小、畫(huà)質(zhì)又精美。
PNG
關(guān)鍵詞：無(wú)損壓縮、索引色、支持透明、體積大
便攜式網(wǎng)絡(luò)圖形(簡(jiǎn)稱(chēng) PNG，英語(yǔ)全稱(chēng)：Portable Network Graphics)。PNG 能夠提供長(zhǎng)度比 GIF 小30%的無(wú)損壓縮圖像文件。它同時(shí)提供 24 位和 32 位圖像支持以及其他諸多技術(shù)性支持。由于PNG 優(yōu)秀的特點(diǎn)，PNG 格式圖片可以稱(chēng)為“網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)用格式”。PNG 最初的開(kāi)發(fā)目的是為了作為 GIF 的替代方案的，作為做新開(kāi)發(fā)的影像傳輸文件格式，PNG 同樣使用了無(wú)損壓縮格式，事實(shí)上 PNG 的開(kāi)發(fā)就是因?yàn)?GIF 所使用的無(wú)損壓縮格式專(zhuān)利問(wèn)題而誕生的。
PNG 有三種形式，下面分別介紹一下他們的區(qū)別。
PNG-8
PNG-8 是 PNG 的索引色版本。PNG-8 是無(wú)損的、使用索引色的、點(diǎn)陣圖。
PNG-8 是非常好的 GIF 替代者，在可能的情況下，應(yīng)該盡可能的使用 PNG-8 而不是 GIF，因?yàn)樵谙嗤膱D片效果下，PNG-8 具有更小的文件體積。除此之外，PNG-8 還支持透明度的調(diào)節(jié)，而 GIF 并不支持。 現(xiàn)在，除非需要?jiǎng)赢?huà)的支持，否則我們沒(méi)有理由使用 GIF 而不是 PNG-8。
PNG-24
PNG-24 是 PNG 的直接色版本。PNG-24 是無(wú)損的、使用直接色的、點(diǎn)陣圖。
無(wú)損的、使用直接色的點(diǎn)陣圖，聽(tīng)起來(lái)非常像 BMP，是的，從顯示效果上來(lái)看，PNG-24 跟 BMP 沒(méi)有不同。PNG-24 的優(yōu)點(diǎn)在于，它壓縮了圖片的數(shù)據(jù)，使得同樣效果的圖片，PNG-24 格式的文件大小要比 BMP 小得多。當(dāng)然，PNG24 的圖片還是要比 JPEG、GIF、PNG-8 大得多。
雖然 PNG-24 的一個(gè)很大的目標(biāo)，是替換 JPEG 的使用。但一般而言，PNG-24 的文件大小是 JPEG 的五倍之多，而顯示效果則通常只能獲得一點(diǎn)點(diǎn)提升。所以，只有在你不在乎圖片的文件體積，而想好的顯示效果時(shí)，才應(yīng)該使用 PNG-24 格式。
另外，PNG-24 跟 PNG-8 一樣，是支持圖片透明度的。
理論上來(lái)說(shuō)，當(dāng)你追好的顯示效果、并且不在意文件體積大小時(shí)，是推薦使用 PNG-24 的。
實(shí)踐當(dāng)中，為了規(guī)避體積的問(wèn)題，我們一般不用PNG去處理較復(fù)雜的圖像。當(dāng)我們遇到適合 PNG 的場(chǎng)景時(shí)，也會(huì)優(yōu)先選擇更為小巧的 PNG-8。
PNG-32
PNG-32 跟 PNG-24 的區(qū)別就是多了一個(gè) Alpha 通道，用來(lái)支持半透明，其他的跟 PNG-24 基本一樣。
優(yōu)點(diǎn)：
- 支持高級(jí)別無(wú)損耗壓縮;
- 支持 alpha 通道透明度;
- 支持 256 色調(diào)色板技術(shù)以產(chǎn)生小體積文件
- 支持 24 位以及 8 位灰度圖像。
- 支持圖像亮度的 Gamma 校準(zhǔn)信息。
- 支持存儲(chǔ)附加文本信息，以保留圖像名稱(chēng)、作者、著作權(quán)、創(chuàng)作時(shí)間、注釋等信息。
- 漸近顯示和流式讀寫(xiě)，適合在網(wǎng)絡(luò)傳輸中快速顯示預(yù)覽效果后再展示全貌。
缺點(diǎn)
- 較舊的瀏覽器 IE6- 和程序可能不支持 PNG 文件;
- 與 JPEG 的有損耗壓縮相比，PNG 提供的壓縮量較少;
- 與 GIF 格式相比，對(duì)多圖像文件或動(dòng)畫(huà)文件不提供任何支持。
適合場(chǎng)景
呈現(xiàn)小的 Logo、顏色簡(jiǎn)單且對(duì)比強(qiáng)烈的圖片或背景等。
關(guān)于 PNG 的小知識(shí)點(diǎn)
PNG 分為兩種，一種是 Index，一種是 RGB。Index 記錄同一種顏色的值和出現(xiàn)的位置(簡(jiǎn)單地說(shuō)，比如一個(gè) 2px*2px 的超級(jí)小圖，從左往右從上往下依次的顏色是紅，白，白，紅，那么記錄的方法就是“紅-1,4;白-2,3”);而 RGB 圖則把所有像素的色值依次記錄下來(lái)(即“紅，白，白紅”)。對(duì)于相同的圖片，Index 格式的尺寸總是小于 RGB。
其中 PNG-8 就是 Index，稱(chēng)作為索引色，而 PNG-24 和 PNG-32 是 RGB 形式，也可稱(chēng)作為直接色。
因?yàn)?PNG 是無(wú)損壓縮，保留了圖片需要的所有信息，所以索引色是可以轉(zhuǎn)化為直接色的。
WebP
關(guān)鍵詞：年輕、有損、無(wú)損、兼容性
WebP 是谷歌開(kāi)發(fā)的一種新圖片格式，WebP 是同時(shí)支持有損和無(wú)損壓縮的、使用直接色的、點(diǎn)陣圖。
從名字就可以看出來(lái)它是為 Web 而生的，什么叫為 Web 而生呢?就是說(shuō)相同質(zhì)量的圖片，WebP 具有更小的文件體積?，F(xiàn)在網(wǎng)站上充滿(mǎn)了大量的圖片，如果能夠降低每一個(gè)圖片的文件大小，那么將大大減少瀏覽器和服務(wù)器之間的數(shù)據(jù)傳輸量，進(jìn)而降低訪問(wèn)延遲，提升訪問(wèn)體驗(yàn)。
- 在無(wú)損壓縮的情況下，相同質(zhì)量的 WebP 圖片，文件大小要比 PNG 小26%;
- 在有損壓縮的情況下，具有相同圖片精度的 WebP 圖片，文件大小要比 JPEG 小 25%~34%;
- WebP 圖片格式支持圖片透明度，一個(gè)無(wú)損壓縮的 WebP 圖片，如果要支持透明度只需要 22% 的格外文件大小。
可以看到 WebP 集多種圖片文件格式的優(yōu)點(diǎn)于一身，所以在圖片的質(zhì)量和性能上，WebP 無(wú)疑是贏家。
不過(guò) WebP 有有一個(gè)缺點(diǎn)，導(dǎo)致還不能大規(guī)模使用，那就是兼容性。
這是我 2019 年 5 月截的圖，可以看到 IE 和 Safari 所有的版本都是不支持的(這是硬傷)， 火狐也從近期幾個(gè)版本才開(kāi)始支持，年輕有年輕的代價(jià)。
此外，WebP 與 JPG 相比較，編碼速度慢 10 倍，解碼速度慢 1.5 倍，而絕大部分的網(wǎng)絡(luò)應(yīng)用中，圖片都是靜態(tài)文件，所以對(duì)于用戶(hù)使用只需要關(guān)心解碼速度即可。但實(shí)際上，WebP 雖然會(huì)增加額外的解碼時(shí)間，但是由于減少了文件體積，縮短了加載的時(shí)間，實(shí)際上文件的渲染速度反而變快了。
使用場(chǎng)景
WebP 集多種圖片文件格式的優(yōu)點(diǎn)于一身，所以基本上適合各種場(chǎng)景，但是由于兼容性不好，所以我們?nèi)绻笠?guī)模的適用 WebP，一定要在 Safari 和 IE 里面施行降級(jí)。
這是淘寶商品圖片是我在 Chrome 打開(kāi)的例子，可以看到圖片的后綴是 .jpg_.webp，如果這張圖片在 Safari 打開(kāi)后綴就變?yōu)榱?.jpg，這是一種降級(jí)方案，其他的方案請(qǐng)讀者自行研究，不在本文討論中。
APNG
APNG(Animated Portable Network Graphics)顧名思義是基于 PNG 格式擴(kuò)展的一種動(dòng)畫(huà)格式，增加了對(duì)動(dòng)畫(huà)圖像的支持，同時(shí)加入了 24 位圖像和 8 位 Alpha 透明度的支持，這意味著動(dòng)畫(huà)將擁有更好的質(zhì)量，其誕生的目的是為了替代老舊的 GIF 格式，但它目前并沒(méi)有獲得 PNG 組織官方的認(rèn)可。
APNG 第1幀為標(biāo)準(zhǔn) PNG 圖像，剩余的動(dòng)畫(huà)和幀速等數(shù)據(jù)放在 PNG 擴(kuò)展數(shù)據(jù)塊，因此只支持原版 PNG 的軟件會(huì)正確顯示第 1 幀。
在兼容性方面絕大部分瀏覽器都還是支持的，如果以前是因?yàn)閯?dòng)畫(huà)的原因用 GIF 的，現(xiàn)在用 APNG 是一個(gè)不錯(cuò)的選擇，其他的特性是跟 PNG 樣的，因?yàn)?APNG 只是一個(gè) PNG 的擴(kuò)展。
更多 APNG 相關(guān)的可以看 APNG 那些事
SVG
關(guān)鍵詞：無(wú)損、矢量圖、體積小、不失真、兼容性好
可縮放矢量圖形 英文 Scalable Vector Graphics(SVG)，是無(wú)損的、矢量圖。
SVG是一種用 XML 定義的語(yǔ)言，用來(lái)描述二維矢量及矢量/柵格圖形。SVG提供了3種類(lèi)型的圖形對(duì)象：矢量圖形(vectorgraphicshape例如：由直線(xiàn)和曲線(xiàn)組成的路徑)、圖象(image)、文本(text)。圖形對(duì)象還可進(jìn)行分組、添加樣式、變換、組合等操作，特征集包括嵌套變換(nestedtransformations)、剪切路徑(clippingpaths)、alpha 蒙板(alphamasks)、濾鏡效果(filtereffects)、模板對(duì)象(templateobjects)和其它擴(kuò)展(extensibility)。
SVG 跟上面這些圖片格式不同，是 SVG 是矢量圖。這意味著 SVG 圖片由直線(xiàn)和曲線(xiàn)以及繪制它們的方法組成。當(dāng)你放大一個(gè) SVG 圖片的時(shí)候，你看到的還是線(xiàn)和曲線(xiàn)，而不會(huì)出現(xiàn)像素點(diǎn)。這意味著 SVG 圖片在放大時(shí)，不會(huì)失真，所以它非常適合用來(lái)繪制企業(yè) Logo、Icon 等。
優(yōu)點(diǎn)：
- SVG 可被非常多的工具讀取和修改(比如記事本)。
- SVG 與 JPEG 和 GIF 圖像比起來(lái)，尺寸更小，且可壓縮性更強(qiáng)。
- SVG 是可伸縮的。
- SVG 圖像中的文本是可選的，同時(shí)也是可搜索的(很適合制作地圖)。
- SVG 可以與 JavaScript 技術(shù)一起運(yùn)行
- SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內(nèi)容的前提下可以實(shí)現(xiàn)位圖格式中類(lèi)似文字陰影的效果。
- SVG圖形格式可以用來(lái)動(dòng)態(tài)生成圖形。例如，可用 SVG 動(dòng)態(tài)生成具有交互功能的地圖，嵌入網(wǎng)頁(yè)中，并顯示給終端用戶(hù)。
缺點(diǎn)：
- 渲染成本比較高，對(duì)于性能有影響。
- SVG 的學(xué)習(xí)成本比較高，因?yàn)樗强删幊痰摹?/li>
適用場(chǎng)景
1、高保真度復(fù)雜矢量文檔是并將繼續(xù)是 SVG 點(diǎn)。它非常詳細(xì)，適用于查看和打印，可以是獨(dú)立的，也可以嵌入到網(wǎng)頁(yè)中
2、在WEB項(xiàng)目中的平面圖繪制，如需要繪制線(xiàn)，多邊形，圖片等。
3、數(shù)據(jù)可視化。
SVG 只是 Web 開(kāi)發(fā)常用的一種矢量圖，其實(shí)矢量圖常見(jiàn)還有幾種格式：BW 格式、AI 格式、CDR 格式、ICO 格式。
總結(jié)
本文詳細(xì)的介紹了常見(jiàn)的圖片格式：GIF、JPEG、PNG、WebP、APNG、SVG，介紹了他們是什么，有什么用，優(yōu)點(diǎn)和缺點(diǎn)，以及使用場(chǎng)景。由于圖片相關(guān)的知識(shí)確實(shí)太多了，我只是把一些我覺(jué)得必要的寫(xiě)出來(lái)，下面在網(wǎng)上找到了一個(gè)選擇圖片過(guò)程的表格和圖，下次不知道選擇什么圖片格式，直接看圖就行。
其中 APNG 和 WebP 格式出現(xiàn)的較晚，尚未被 Web 標(biāo)準(zhǔn)所采納，只有在特定平臺(tái)或?yàn)g覽器環(huán)境可以預(yù)知的情況下加以采用。圖片格式選擇過(guò)程如下：
| 圖片格式 | 支持透明 | 動(dòng)畫(huà)支持 | 壓縮方式 | 瀏覽器支持 | 相對(duì)原圖大小 | 適應(yīng)場(chǎng)景 |
|---|---|---|---|---|---|---|
| baseline-jpeg | 不支持 | 不支持 | 有損 | 所有 | 由畫(huà)質(zhì)決定 | 所有通用場(chǎng)景 |
| progressive-jpeg | 不支持 | 不支持 | 有損 | 所有 | 由畫(huà)質(zhì)決定 | 所有通用場(chǎng)景, 漸進(jìn)式加載 |
| gif | 支持 | 支持 | 無(wú)損 | 所有 | 由幀數(shù)和每幀圖片大小決定 | 簡(jiǎn)單顏色，動(dòng)畫(huà) |
| png | 支持 | 不支持 | 無(wú)損 | 所有 | 由png色值位數(shù)決定 | 需要透明時(shí) |
| webp | 支持 | 不支持 | 有損和無(wú)損 | 所有(除IE和Safari) | 由壓縮率決定 | 復(fù)雜顏色及形狀，瀏覽器平臺(tái)可預(yù)知 |
| apng | 支持 | 支持 | 無(wú)損 | 所有(除IE 和Opera) | 由每幀圖片決定 | 需要半透明效果的動(dòng)畫(huà) |
| svg | 支持 | 支持 | 無(wú)損 | 所有(IE8以上) | 由內(nèi)容和特效復(fù)雜度決定 | 簡(jiǎn)單圖形，需要良好的放縮體驗(yàn)，需要?jiǎng)討B(tài)控制圖片特效 |
附加內(nèi)容
以下內(nèi)容大多來(lái)自于網(wǎng)絡(luò)，由于我在寫(xiě)這篇文章的過(guò)程中看到了這些，我覺(jué)得有必要了解一下，所以我將這些貼出來(lái)，跟文章內(nèi)容關(guān)系不大，可以不看。
位圖圖像屬性
索引顏色/顏色表
位圖常用的一種壓縮方法。從位圖圖片中選擇最有代表性的若干種顏色(通常不超過(guò)256種)編制成顏色表，然后將圖片中原有顏色用顏色表的索引來(lái)表示。這樣原圖片可以被大幅度有損壓縮。適合于壓縮網(wǎng)頁(yè)圖形等顏色數(shù)較少的圖形，不適合壓縮照片等色彩豐富的圖形。
Alpha通道
在原有的圖片編碼方法基礎(chǔ)上，增加像素的透明度信息。圖形處理中，通常把 RGB 三種顏色信息稱(chēng)為紅通道、綠通道和藍(lán)通道，相應(yīng)的把透明度稱(chēng)為 Alpha 通道。多數(shù)使用顏色表的位圖格式都支持 Alpha 通道。
色彩深度
色彩深度又叫色彩位數(shù)，即位圖中要用多少個(gè)二進(jìn)制位來(lái)表示每個(gè)點(diǎn)的顏色，是分辨率的一個(gè)重要指標(biāo)。常用有1位(單色)，2位(4色，CGA)，4位(16色，VGA)，8位(256色)，16位(增強(qiáng)色)，24位(真彩色)和32位等。色深16位以上的位圖還可以根據(jù)其中分別表示RGB三原色或CMYK四原色(有的還包括Alpha通道)的位數(shù)進(jìn)一步分類(lèi)，如16位位圖圖片還可分為R5G6B5，R5G5B5X1(有1位不攜帶信息)，R4G4B4A4等等。
- 8位色，所謂8位色并不是圖像只有8種顏色，而是2^8，即256種顏色，8位圖指的是用8個(gè)bits來(lái)表示顏色;
- 16位色，2^16，從人眼的感覺(jué)來(lái)說(shuō)，16位色基本可以滿(mǎn)足視覺(jué)需要了;
- 24位色，又稱(chēng)為“真彩色”。大概有1600萬(wàn)之多，這個(gè)數(shù)字幾乎是人類(lèi)視覺(jué)可分辨顏色的極限;
- 32位色，并非 2^32, 其實(shí)也是 2^24 種顏色，不過(guò)它增加了2^8 階顏色的灰度，也就是8位透明度，因此規(guī)定它為32位色。
在制作網(wǎng)站頁(yè)面圖片的時(shí)候，設(shè)計(jì)者一般選擇 24 位圖像。32 位圖像雖然質(zhì)量更好，但同時(shí)也帶來(lái)更大的圖像體積(事實(shí)上，一般肉眼也很難分辨 24 位圖和 32 位圖的區(qū)別)。此外將原始位圖放大與縮小都會(huì)使圖像效果失真，這是因?yàn)樗鼈儨p小了圖像中有效像素的數(shù)量或密度的緣故，所以在制作過(guò)程中應(yīng)盡量避免圖片被編輯的次數(shù)。
真彩色與偽彩色、直接色
描述一幅圖像需要使用圖像的屬性。圖像的屬性包含分辨率、像素深度、表示法和種類(lèi)等。本節(jié)介紹前面三個(gè)特性。
搞清真彩色、偽彩色與直接色的含義，對(duì)于編寫(xiě)圖像顯示程序、理解圖像文件的存儲(chǔ)格式有直接的指導(dǎo)意義，也不會(huì)對(duì)出現(xiàn)諸如這樣的現(xiàn)象感到困惑：本來(lái)是用真彩色表示的圖像，但在VGA顯示器上顯示的圖像顏色卻不是原來(lái)圖像的顏色。
我這里就不以圖形學(xué)的方式介紹各種花里胡哨的概念，我就用最簡(jiǎn)單的，作為一個(gè)程序員的角度來(lái)理解就行了。
真彩色
真彩像是一種用三個(gè)或更多字節(jié)描述像素的計(jì)算機(jī)圖像存儲(chǔ)方式。
一般來(lái)說(shuō)，前三個(gè)通道都會(huì)各用一個(gè)字節(jié)表示，如紅綠藍(lán)(RGB)或者藍(lán)綠紅(BGR)。如果存在第四個(gè)字節(jié)，則表示該圖像采用了 Alpha 通道。然而，實(shí)際系統(tǒng)往往用多于 8 位(即1字節(jié))表達(dá)一個(gè)通道，如一個(gè) 48 位的掃描儀等。這樣的系統(tǒng)都統(tǒng)稱(chēng)為真彩色系統(tǒng)。
偽彩色
索引圖像，他的每個(gè)像素值存儲(chǔ)的不是直接的基色強(qiáng)度，而是存儲(chǔ)的索引。就跟 js 里面的引用變量一樣，變量只是個(gè)地址，變量所指向的值才是真正的值。
直接色
直接色又稱(chēng)假彩色。它和偽彩色的區(qū)別就是，前者的每個(gè)基色強(qiáng)度都要通過(guò)索引找到真正的基色強(qiáng)度。
小結(jié)
直接色系統(tǒng)產(chǎn)生顏色與真彩色系統(tǒng)相比，相同之處是都采用R，G，B分量決定基色強(qiáng)度，不同之處是前者的基色強(qiáng)度直接用R，G，B決定，而后者的基色強(qiáng)度由R，G，B經(jīng)變換后決定。因而這兩種系統(tǒng)產(chǎn)生的顏色就有差別。
直接色系統(tǒng)與偽彩色系統(tǒng)相比，相同之處是都采用查找表，不同之處是前者對(duì) R，G，B分量分別進(jìn)行變換，后者是把整個(gè)像素當(dāng)作查找表的索引值進(jìn)行彩色變換。
分享文章：每個(gè)前端工程師都應(yīng)該了解的圖片知識(shí)
鏈接分享：http://www.5511xx.com/article/cdigcsp.html
