【W(wǎng)eb技術】1064- 前端9種圖片格式基礎知識, 你應該知道的
彩色深度
彩色深度標準通常有以下幾種：
8位色，每個像素所能顯示的彩色數(shù)為2的8次方，即256種顏色。 16位增強色，16位彩色，每個像素所能顯示的彩色數(shù)為2的16次方，即65536種顏色。 24位真彩色[1]，每個像素所能顯示的彩色數(shù)為24位，即2的24次方，約1680萬種顏色。 32位真彩色，即在24位真彩色圖像的基礎上再增加一個表示圖像透明度信息的Alpha通道。
32位真彩色并非是2的32次方的色數(shù)，它其實也是1677萬多色，不過它增加了256階顏色的灰度,為了方便稱呼，就規(guī)定它為32位色
圖的分類
光柵圖和矢量圖
對于圖片，一般分光柵圖和矢量圖。
光柵圖：是基于 pixel像素構成的圖像。JPEG、PNG，webp等都屬于此類 矢量圖：使用點，線和多邊形等幾何形狀來構圖，具有高分辨率和縮放功能. SVG就是一種矢量圖。
無壓縮, 無損壓縮, 有損壓縮
另一種分類
無壓縮。無壓縮的圖片格式不對圖片數(shù)據(jù)進行壓縮處理，能準確地呈現(xiàn)原圖片。BMP格式就是其中之一。
無損壓縮。壓縮算法對圖片的所有的數(shù)據(jù)進行編碼壓縮，能在保證圖片的質(zhì)量的同時降低圖片的尺寸。png是其中的代表。
有損壓縮。壓縮算法不會對圖片所有的數(shù)據(jù)進行編碼壓縮，而是在壓縮的時候，去除了人眼無法識別的圖片細節(jié)。因此有損壓縮可以在同等圖片質(zhì)量的情況下大幅降低圖片的尺寸。其中的代表是jpg。
前端9種圖片格式
誕生時間
對于超過30歲的程序員來說，她們都很年輕，真的是遇到好時光！
85年前，人們都在干嘛呢？
GIF - 1987 Base64- 1987 JPEG - 1992 PNG - 1996 SVG - 1999 JPEG2000 - 1997 to 2000 APNG - 2004 WebP - 2010
ico: 1985年??
查閱文檔說ico文件格式是伴隨著 Windows 1.0 發(fā)行誕生的。
GIF
GIF是一種索引色模式圖片，所以GIF每幀圖所表現(xiàn)的顏色最多為256種。GIF能夠支持動畫，也能支持背景透明，這點連古老的IE6都支持，所以在以前想要在項目中使用背景透明圖片，其中一種方案就是生成GIF圖片。
優(yōu)點：
支持動畫和透明背景 兼容性好 灰度圖像表現(xiàn)佳 支持交錯
部分接收到的文件可以以較低的質(zhì)量顯示。這在網(wǎng)絡連接緩慢時特別有用。
缺點：
最多支持 8 位 256 色，色階過渡糟糕，圖片具有顆粒感 支持透明，但不支持半透明，邊緣有雜邊
適用場景
色彩簡單的logo、icon、線框圖適合采用gif格 動畫
JPG/JPEG
這里提個問題：jpg和jpeg有啥區(qū)別
平常我們大部分見到的靜態(tài)圖基本都是這種圖片格式。這種格式的圖片能比較好的表現(xiàn)各種色彩，主要在壓縮的時候會有所失真，也正因為如此，造就了這種圖片格式體積的輕量。
優(yōu)點
壓縮率高 兼容性好 色彩豐富
缺點
JPEG不適合用來存儲企業(yè)Logo、線框類的這種高清圖 不支持動畫、背景透明
JPEG 2000 （了解即可）
JPEG 2000是基于小波變換的圖像壓縮標準，由Joint Photographic Experts Group組織創(chuàng)建和維護。JPEG 2000通常被認為是未來取代JPEG（基于離散余弦變換）的下一代圖像壓縮標準。JPEG 2000文件的副檔名通常為.jp2，MIME類型是image/jp2。
JPEG2000的壓縮比更高，而且不會產(chǎn)生原先的基于離散余弦變換的JPEG標準產(chǎn)生的塊狀模糊瑕疵。JPEG2000同時支持有損壓縮[2]和無損壓縮[3]。
目前就safari支持，can is use-png2000[4]支持18%。
優(yōu)點
支持有損和無損壓縮
缺點
支持率太低了
ICO
ICO (Microsoft Windows 圖標)文件格式是微軟為 Windows 系統(tǒng)的桌面圖標設計的。網(wǎng)站可以在網(wǎng)站的根目錄中提供一個名為 favicon.ICO, 在收藏夾菜單中顯示的圖標，以及其他一些有用的標志性網(wǎng)站表示形式。
一個 ICO 文件可以包含多個圖標，并以列出每個圖標詳細信息的目錄開始。
其主要用來做網(wǎng)站圖標，現(xiàn)在png也是可以用來做網(wǎng)站圖標的。
PNG
PNG格式是有三種版本的，分別為PNG-8，PNG-24，PNG-32，所有這些版本都不支持動畫的。PNG-8跟GIF類似的屬性是相似的，都是索引色模式，而且都支持背景透明。相對比GIF格式好的特點在與背景透明時，圖像邊緣沒有什么噪點，顏色表現(xiàn)更優(yōu)秀。PNG-24其實就是無損壓縮的JPEG。而PNG-32就是在PNG-24的基礎上，增加了透明度的支持。
如果沒有動畫需求推薦使用png-8來替代gif
優(yōu)點
不失真的情況下盡可能壓縮圖像文件的大小 像素豐富 支持透明（alpha通道）
缺點
文件大
這里額外提一下，gif和jpg有漸進，png有交錯，都是在沒有完全下載圖片的時候，能看到圖片全貌。
具體可以看在線示例：png正常，png交錯，jpg漸進[5]
APNG：Animated PNG
APNG（Animated Portable Network Graphics）顧名思義是基于 PNG 格式擴展的一種動畫格式，增加了對動畫圖像的支持，同時加入了 24 位圖像和 8 位 Alpha 透明度的支持，這意味著動畫將擁有更好的質(zhì)量，其誕生的目的是為了替代老舊的 GIF 格式，但它目前并沒有獲得 PNG 組織官方的認可。
從Can I Use上查看，除了IE系列， chrome, firefox, safari均已支持。2021-08月的時候支持達到94%。
相對GIF來說
色彩豐富 支持透明 向下兼容 PNG 支持動畫
缺點
生成比較繁瑣 未標準化
webP
有損 WebP 圖像平均比視覺上類似壓縮級別的 JPEG 圖像小25-35% 。無損耗的 WebP 圖像通常比 PNG 格式的相同圖像小26% 。WebP 還支持動畫: 在有損的 WebP 文件中，圖像數(shù)據(jù)由 VP8位流表示，該位流可能包含多個幀。
包括體積小、色彩表現(xiàn)足夠、支持動畫。簡直了就是心中的完美女神！！
從can i use - webp[6]上看，支持率95%。主要是Safari低版本和IE低版本不兼容。
優(yōu)點
同等質(zhì)量更小 壓縮之后質(zhì)量無明顯變化 支持無損圖像 支持動畫
缺點
兼容性吧，相對jpg,png,gif來說
SVG
SVG 是一種基于 xml 的矢量圖形格式，它將圖像的內(nèi)容指定為一組繪圖命令，這些命令創(chuàng)建形狀、線條、應用顏色、過濾器等等。SVG 文件是理想的圖表，圖標和其他圖像，可以準確地繪制在任何大小。因此，SVG 是現(xiàn)代 Web 設計中用戶界面元素的流行選擇。
優(yōu)點
可伸縮性
你可以隨心所欲地把它們做大或者做小，而不用犧牲質(zhì)量小
Svg 平均比 GIF、 JPEG、 PNG 小得多，甚至在極高的分辨率下也是如此支持動畫
更靈活，質(zhì)量無與倫比與DOM無縫銜接
Svg 可以直接使用 HTML、 CSS 和 JavaScript (例如動畫)來操作
缺點
SVG復雜度高會減慢渲染速度 不適合游戲類等高互動動畫
base64
圖片的 base64 編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串，使用該字符串代替圖像地址，圖片隨著 HTML 的下載同時下載到本地，不再單獨消耗一個http來請求圖片。
優(yōu)點
無額外請求 對于極小或者極簡單圖片 可像單獨圖片一樣使用，比如背景圖片重復使用等 沒有跨域問題，無需考慮緩存、文件頭或者cookies問題
缺點
相比其他格式，體積會至少大1/3 編碼解碼有額外消耗
一些對比
PNG, GIF, JPG 比較
大小比較：通常地，PNG ≈ JPG > GIF 8位的PNG完全可以替代掉GIF
透明性：PNG > GIF > JPG
色彩豐富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG
gif， jpg， png， web優(yōu)缺點和使用場景
| 格式 | 優(yōu)點 | 缺點 | 適用場景 |
|---|---|---|---|
| gif | 文件小，支持動畫、透明，無兼容性問題 | 只支持256種顏色 | 色彩簡單的logo、icon、動圖 |
| jpg | 色彩豐富，文件小 | 有損壓縮，反復保存圖片質(zhì)量下降明顯 | 色彩豐富的圖片/漸變圖像 |
| png | 無損壓縮，支持透明，簡單圖片尺寸小 | 不支持動畫，色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
| webp | 文件小，支持有損和無損壓縮，支持動畫、透明 | 瀏覽器兼容性相對而言不好 | 支持webp格式的app和webview |
其他圖片格式
AVIF
號稱下一代圖片格式AVIF。
AVIF是一種基于AV1視頻編碼的新圖像格式，相對于JPEG，WEBP這類圖片格式來說，它的壓縮率更高，并且畫面細節(jié)更好。而最關鍵的是，它是免費且開源的，沒有任何授權費用。
其擁有webp的所有優(yōu)點，而且壓縮率更高，更狠的是開源JS可解析，只是目前從caniuse查詢到的支持率才 67%左右
TPG
騰訊自研的圖片格式， 壓縮率比webp還優(yōu)秀。
寫在最后
歡迎關注
或者添加我的微信 dirge-cloud，一起學習。
引用
圖像文件類型與格式指南[8]
JPEG_2000[9]
APNG - Wikipedia[10]
Can I use - APNG[11]談談web上各種圖片應用的優(yōu)缺點[12]
web前端開發(fā)常用的幾種圖片格式及其使用規(guī)范[13]
聊一聊幾種常用web圖片格式：gif、jpg、png、webp[14]
APNG 那些事[15]
GIF vs APNG vs WebP[16]
淺談base64圖片[17]
圖片Base64編碼的利與弊分析[18]
ICO File Format[19]
參考資料
真彩色: https://baike.baidu.com/item/%E7%9C%9F%E5%BD%A9%E8%89%B2
[2]有損壓縮: https://baike.baidu.com/item/%E6%9C%89%E6%8D%9F%E5%8E%8B%E7%BC%A9
[3]無損壓縮: https://baike.baidu.com/item/%E6%97%A0%E6%8D%9F%E5%8E%8B%E7%BC%A9
[4]can is use-png2000: https://caniuse.com/#search=JPEG2000
[5]https://xiangwenhu.github.io/TakeItEasy/bgWhithe/progress.html: https://link.juejin.cn/?target=https%3A%2F%2Fxiangwenhu.github.io%2FTakeItEasy%2FbgWhithe%2Fprogress.html
[6]can i use - webp: https://caniuse.com/#search=webp
[7]https://juejin.cn/pin/6994350401550024741: https://juejin.cn/pin/6994350401550024741
[8]圖像文件類型與格式指南: https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types
[9]JPEG_2000: https://en.wikipedia.org/wiki/JPEG_2000
[10]APNG - Wikipedia: https://en.wikipedia.org/wiki/APNG
[11]Can I use - APNG: http://caniuse.com/#search=APNG
[12]談談web上各種圖片應用的優(yōu)缺點: https://www.cnblogs.com/minij/p/6743705.html
[13]web前端開發(fā)常用的幾種圖片格式及其使用規(guī)范: https://www.cnblogs.com/pqjzxq/p/5749304.html
[14]聊一聊幾種常用web圖片格式：gif、jpg、png、webp: https://segmentfault.com/a/1190000013589397
[15]APNG 那些事: https://aotu.io/notes/2016/11/07/apng/
[16]GIF vs APNG vs WebP: http://littlesvr.ca/apng/gif_apng_webp.html
[17]淺談base64圖片: https://www.jianshu.com/p/10ca32480c1e
[18]圖片Base64編碼的利與弊分析: https://www.imooc.com/article/27804
[19]ICO File Format: https://docs.fileformat.com/image/ico/
回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 120+ 篇原創(chuàng)文章