大多數頁面和文章都使用螢幕截圖和影象來豐富文字內容。實際上，只有大約8％的網站不包含任何視覺內容。
許多站長或者網站運營人員其實對影象型別瞭解不深，如何根據不同用例選擇何種影象檔案型別。很多時候，由於選擇了不合適的影象型別導致網站載入速度變慢，因為所選擇的影象不是可用的最佳格式，也沒有適當的優化。
在本文中，我們將介紹所有常見的影象檔案格式，優缺點是什麼以及適用場景（以保證為訪問者提供最佳的使用者體驗）。
有哪些不同的影象檔案型別？
影象檔案的型別和格式分為兩個主要類別：光柵（或者叫作柵格）影象檔案和向量影象檔案。
柵格影象檔案格式
網路上最常見的光柵影象格式包括JPEG，GIF和PNG三種。
柵格影象檔案型別為靜態影象，其中每個畫素均基於其解析度（例如1280×720）具有定義的顏色，位置和比例。
由於靜態的，無法隨心所欲地調整影象的大小，否則原始設計和畫素將簡單地被拉伸以填充額外的空間。最終會產生模糊，畫素化或其他失真的影象。
光柵影象-JPEG示例
一般情況下，我們在網際網路上看到的絕大多數照片或影象都使用光柵影象格式。
向量影象檔案格式
SVG，EPS，AI和PDF這幾種格式為最為常見的向量影象檔案型別。
與靜態柵格影象檔案格式（每個設計形狀和顏色都與一個畫素相關聯）不同，向量影象格式更加靈活。
取而代之的是，向量圖形使用笛卡爾平面上的直線和曲線系統（即通過數學公式計算獲得的），該系統相對於總面積（而不是任何單個畫素）進行縮放。
這意味著我們可以無限擴大原始影象解析度，又不會損失質量或失真。
向量影象格式放大倍數（圖片來源：Wikipedia.com）
如您所見，放大7倍時，兩種影象型別的在質量之間的差異是完全無法比擬的，向量影象依然十分清晰，但光柵影象已經模糊不可見了。
由於SVG是根據總面積的百分比而不是畫素來計算位置的，因此根本沒有畫素化。
注：如果您曾經學習過平面設計相關知識，您可能會了解到，向量影象一般稱為圖形，即它是一種幾何形狀，而不是單純的畫素圖；光柵影象（點陣圖）則稱為影象，在固定的尺寸內包含一定數量的畫素。
15種常見的影象檔案型別（格式）
下面，我們介紹了15種最為常見的影象檔案格式，從Web柵格影象到向量圖形，再到影象編輯軟體檔案。
深入探討每一種格式，並討論了每種格式的優缺點，瀏覽器和作業系統相容情況以及最理想的應用場景。
- JPEG（或JPG） – 最為常見的影象格式
- PNG – Web廣泛使用的影象格式
- GIF – 動畫影象格式
- WebP – JPEG&PNG最佳替代影象格式
- TIFF – 掃描器最佳拍檔影象格式
- BMP – 過氣的影象格式
- HEIF – 手機照片常見影象格式
- SVG – 可縮放向量圖形格式
- EPS – 插畫/排版設計向量影象格式
- PDF – 電子書常用文件格式
- PSD – Photoshop文件格式
- AI – Adobe Illustrator文件格式
- XCF – GIMP影象編輯工具專屬格式
- INDD – Adobe InDesign文件格式
- Raw – 數碼相機影象儲存檔案格式
1.1.JPEG（或JPG）- 最為常見的影象格式
老虎影象JPEG格式
JPEG（或JPG），其全稱為Joint Photographic Experts Group（聯合影象專家組），是一種有失真壓縮的光柵影象檔案格式，適合作為共享影象。既然JPEG是“有損的”影象，也就是說使用此格式時，若減小檔案大小，在一定程度上也會降低影象質量。
JPEG是目前網際網路上最常用的影象檔案型別之一，因為它的可壓縮性及瀏覽器/作業系統廣泛支援。
大多數社交媒體平臺（例如Facebook和Instagram）會自動將上傳的影象檔案轉換為JPEG，且會根據不同場景使用固定的尺寸大小來控制圖片的解析度。
優缺點
- 優點-更小檔案的體積，通用瀏覽器和作業系統廣泛支援。
- 缺點-有損影象壓縮可能導致較差的文字可讀性。
相容情況
- 從1.0版開始支援所有主流瀏覽器（Chrome，Firefox，Safari等）
- 預設情況下，所有主流作業系統的影象檢視器和編輯器均支援該格式。
應用場景
- 部落格和文章影象（如使用者頭像，產品圖片等）的不錯選擇。
- 不要將JPEG格式用於資訊圖表（擁有很多小文字）或教程截圖，因為影象裡面的文字至關重要。
2. PNG – Web廣泛使用的影象格式
閃電博的資源中心.png影象檔案
PNG，英文全稱為Portable Network Graphics PNG（行動式網路圖形），也是一種柵格圖形格式，但支援無失真壓縮，保證顏色之間的細節和對比度。
特別是，PNG提供比JPEG更好的文字可讀性。
這使得PNG成為資訊圖形，橫幅Banner，螢幕截圖以及其他同時包含影象和文字的圖形的最佳表達方式。
優缺點
- 優點-高質量（無損）影象和清晰可見的文字。
- 缺點-如果檔案過多（特別是高解析度影象），可能會嚴重影響網站載入速度。
相容情況
- 主流瀏覽器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支援。
- 主流作業系統及其標準影象編輯器都支援。
應用場景
- 資訊圖表，橫幅，部落格圖形，螢幕截圖，優惠券和其他包含文字的視覺效果的不錯選擇。
- 不要在網站上使用高解析度的照片，因為檔案體積可能會高達幾MB。
3. GIF – 動畫影象格式
gif影象示例
GIF，英文全稱為Graphics Interchange Format，屬於另一種柵格格式影象檔案型別。該格式也使用了無失真壓縮，且將影象“約束”為8 bits/每個畫素，並限制為256色調色盤。
GIF格式也是最有名的（和最常用）的動畫影象，因為它的8-bit限制保證了動畫體積更小和網際網路友好。
優缺點
- 優點-更小的檔案體積和動畫支援。
- 缺點-8-bit限制代表影象質量受限。
相容情況
- 主流瀏覽器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支援。
- 主流作業系統及其標準影象編輯器的支援。
應用場景
- 使用動畫GIF不僅可以“增加內容趣味”，還可以在教程和指南中演示相關操作和流程。
- 如果你需要比8-bit彩色影象更清晰的圖片不要用這種格式（JPEG最多可支援24-bit）。
4. WebP – JPEG&PNG最佳替代影象格式
WebP影象示例
優缺點
- 優點-較小的檔案即可獲得相同或更好的影象質量。
- 缺點-並非所有瀏覽器和影象編輯器都支援。
相容情況
- Google Chrome瀏覽器（電腦裝置為17+版本，移動裝置為25+版本），Firefox (65+)，Edge(18+) 和 Opera(11.0+) 都支援WebP。Safari計劃版本14也將支援WebP。
- 大多數計算器系統自帶的影象編輯器仍不支援該格式，但Photoshop等專業軟體均支援WebP。
使用場景
- JPEG和PNG檔案最佳替代格式，可節省頻寬並提升網站載入速度。如果網站使用的是WordPress內容管理系統，可參考“如何實現WordPress網站使用WebP格式圖片”文章，如何實現根據不同瀏覽器傳輸合適的圖片格式。
5. TIFF – 掃描器最佳拍檔影象格式
TIFFC圖示
TIFF是本影象檔案型別指南不應該缺少的一種格式。
TIFF是“Tagged Image File Format”的縮寫，是一種光柵影象格式，最常用於儲存和編輯影象，以便於將來列印。
該格式不支援任何壓縮，影象質量是該格式的首要保證。
優缺點
- 優點-高質量檔案適合儲存或印刷出版。
- 缺點-不支援壓縮導致影象檔案體積過大；非常有限的瀏覽器支援。
相容情況
- 主流瀏覽器在沒有附加元件或擴充套件的情況下不支援TIFF檔案。
- 一般為專業影象編輯和釋出工具的其中一種匯出格式。
使用場景
- 儲存和準備要出版印刷的影象和圖形。
- 許多掃描器以該格式檔案儲存高質量掃描文件或圖片。
6. BMP — 過氣的影象格式
Bitmap vs gif
Bitmap（BMP）是一種已經過時的影象檔案格式，幾乎不壓縮情況對映畫素。這意味著BMP檔案體積經常會比較龐大，不利於儲存或處理。
優缺點
- 優點-“遠古”產物，應該被遺棄的圖片格式，沒有任何優點。
- 缺點-與WebP，GIF或PNG等格式相比，體積又大又沒有質量上的提升。
相容情況
- 主流瀏覽器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）都支援。
- 大多數系統預設影象編輯器（例如MS Paint）支援。
使用場景
- 都2020年了，還用什麼BMP影象格式。
7. HEIF – 手機照片常見影象格式
JPEG vs HEIF
HEIF是High Efficiency Image File Format的縮寫，是由MPEG視訊格式背後的技術團隊開發的影象格式，是JPEG的直接競爭對手。
HEIF壓縮效率理論值幾乎是JPEG的兩倍，換言之，檔案大小相同的情況下，HEIF影象質量可以提高一倍。
這是一種基於畫素對映的光柵影象格式，無法做到按比例放大影象而不會降低質量。
優缺點
- 優點-相對於JPG來說，同等質量下，可以做到壓縮效率更高。
- 缺點-瀏覽器不支援和有限的作業系統支援。
相容情況
- 所有主流瀏覽器均不支援。
- 在macOS Sierra和iOS 11以上版本系統相容支援，但Safari瀏覽器又不支援。
使用場景
- 一些較新的手機和裝置使用它來儲存照片，以保證照片質量。
8. SVG – 可縮放向量圖形格式
SVG logo
可伸縮向量圖形檔案格式（通常稱為SVG），由W3C開發的一種標記語言，可以在瀏覽器中直接渲染為二維影象。
它不像柵格格式那樣依賴畫素，而是使用XML文字以類似於數學方程式計算勾勒形狀和線條獲得圖形。
也就是說，可以在不損失任何質量的情況下無限放大SVG影象。
優缺點
- 優點-體積小和無損縮放，可用於簡單的插圖，形狀和文字。
- 缺點-對於影象或複雜圖形而言，不是理想的格式。
相容情況
- 主流瀏覽器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）都支援。
- 預設影象編輯器通常不支援SVG，但是大多數插畫軟體都支援SVG匯出。
使用場景
- SVG適用於作為Logo，圖示，簡單插畫以及任何響應式設計所需的自由縮放內容的格式。
Tips：如何實現WordPress部落格支援SVG格式影象上傳？
9. EPS – 插畫/排版設計向量影象格式
EPS格式圖示
EPS（全稱為Encapsulated PostScript）檔案屬於向量影象檔案，一般為Adobe Illustrator和其他插插畫軟體（如CorelDraw）的一種儲存格式。
與SVG檔案相似，EPS實際上是一個基於文字的文件格式，該文件使用程式碼表達形狀和線條，而不是對映畫素和顏色。因此，EPS檔案也支援無損縮放。
優缺點
- 優點-無損縮放，印表機支援的文件和設計。
- 缺點-有限的軟體支援，一般為IIIustrator、Quard Xpress、PageMaker等軟體；Photoshop和Coreldraw可開啟但不能編輯。
相容情況
- EPS不是標準的Web影象檔案格式，所有瀏覽器都不支援EPS。
- 幾乎每個繪畫程式及大多數頁面佈局程式都允許儲存EPS文件。
使用場景
- 使用Adobe Illustrator或其他頁面排版軟體時，用於儲存，儲存和列印。
10. PDF – 電子書常用文件格式
PDF 檔案示例
PDF（為Portable Document Format的縮寫），如其名，該格式主要用於文字文件的儲存，儲存和讀取。
但是，PDF檔案實際上基於為EPS向量影象檔案提供支援的PostScript語言，也可以用於儲存影象和插畫。
這是用於儲存插畫，雜誌封面等的影象格式，供需要時列印使用，很多時候我們在網上看到的電子書，就是這種格式。
優缺點
- 優點-可索引和可搜尋的文字使其非常適合作為圖表或報告格式；可以包含連結，CTA按鈕和其他互動式元素；無損可伸縮性。
- 缺點-不能包含在Web內容中，必須作為獨立檔案載入讀取。
相容情況
- 主流瀏覽器都支援，但必須以獨立檔案開啟，不能作為HTML的頁面內容。
- 大多數標準文件編輯器（例如MS Word或Google Docs）和插畫軟體（AI，Inkscape）均支援該格式，但一般影象編輯軟體不支援。
使用場景
- 建立一個互動式的可視報告或資訊圖表作為內容補充時，PDF是最佳選擇。
11. PSD – Photoshop文件格式
PSD檔案格式Logo
非常常見，大部分對該格式應該都不會感到陌生。PSD檔案格式是一種用於儲存影象文件的影象格式，為Adobe Photoshop軟體特有的格式。
PSD不是網路安全影象格式，不相容任何瀏覽器或標準影象檢視器或編輯器。
優缺點
- 優點-所有過濾器，透明度，路徑和編輯都是完全可自定義和可逆的；無損影象格式。
- 缺點-部分檔案體積太大。
使用場景
- 用於儲存Photoshop專案。
12. AI – Adobe Illustrator文件格式
Adobe Illustrator格式圖示
AI是Adobe專門開發的另一種影象格式，不僅可以儲存影象，還可以儲存專案狀態。
像PSD一樣，它不用於網路，也不相容任何瀏覽器或大多數預設影象檢視器。
與PSD檔案不同是，AI檔案可以自由縮放，但質量不會有任何損失。
優缺點
- 優點-所有筆畫，線條，形狀，過濾器都是可自定義和可逆的；可自由放大或縮小插畫大小。
- 缺點-有些PSD檔案體積太大了。
使用場景
- 在完成之前和之後儲存和儲存Adobe Illustrator專案。
13. XCF —GIMP影象編輯工具專屬格式
XCF圖示
XCF（其全稱為eXperimental Computing Facility），是開源影象編輯器GIMP特有的影象檔案型別。類同與Photoshop特有的PSD檔案格式，支援儲存路徑，透明度，濾鏡等。
同樣，這是用於儲存專案的計算機檔案型別，任何瀏覽器或預設影象檢視器均不支援。
優缺點
- 優點-所有路徑，過濾器和形狀都是可自定義和可逆的；無損影象質量。
- 缺點-檔案體積有時候會很龐大。
使用場景
- 用於儲存GIMP專案。
14. INDD – Adobe InDesign文件格式
Adobe InDesign圖示
INDD是Adobe InDesign軟體特定的檔案型別，用於儲存該軟體的專案檔案，包括頁面內容，樣式，色板等。
儘管有時稱為影象檔案格式，但它傾向於用於展現文字以外的視覺元素。。
任何瀏覽器或預設影象檢視器均不支援該格式，因為它不是網路安全格式。
優缺點
- 儲存具有可自定義元素的大型多頁設計專案。
使用場景
- 圖形設計師和產品藝術家主要使用它來設計和製作海報，傳單，雜誌，小冊子等。
15. Raw – 數碼相機影象儲存檔案格式
Raw影象格式是數碼相機用來儲存高質量影象以供後期製作和編輯的檔案型別。
相機制造商的主要Raw影象檔案型別：
- 柯達：CR，K25，KDC
- 佳能：CRW CR2 CR3
- 愛普生：ERF
- 尼康：NEF NRW
- 奧林巴斯：ORF
- 賓得：PEF
- 松下：RW2
- 索尼：ARW，SRF，SR2
RAW檔案在一張圖片中包含多達16,384種不同的顏色，而不是JPEG檔案僅包含256種顏色。也就是說RAW檔案在調整顏色和對比度等後期處理時，有著更大的靈活性。
RAW影象不適合用於網路演示或共享，並且主流瀏覽器或影象檢視器相容性極差，一般需要使用專業的相機影象處理軟體處理。
優缺點
- 優點-更高質量的圖片，色彩變化更大。
- 確定-影象大胖子檔案（RAW檔案體積隨便就20-40MB）。
使用場景
- 以最高質量儲存照片以進行後期處理和編輯。
影象檔案型別常見問題解答
檔案的最為常見的3種影象檔案型別是什麼？
根據與Web使用相關的資料，三種最常見的影象檔案型別分別為PNG，JPEG和SVG。
影象檔案格式的使用情況統計（影象來源：w3techs.com）
為什麼這三種影象檔案格式最為受歡迎？
1. PNG：螢幕截圖，Banner橫幅，資訊圖表，圖片
由於PNG作為一種更適合於附帶文字的影象格式，因此它更常用於螢幕截圖，橫幅（取決於橫幅廣告尺寸）等。
並且由於採用了無失真壓縮，設計師和攝影師能夠使用此格式影象在作品集網站上展示高質量的圖片。
上述兩個因素，加上其通用的瀏覽器和作業系統支援，使其成為網路上最受歡迎的影象檔案型別。PNG在網站上的使用率高達77％。
2. JPEG：圖片
有失真壓縮意味著JPEG是更好的選擇，可用於在整個內容中展示圖片。有限的質量損失對於普通的網際網路使用者幾乎可以忽略不計，又可以節省大量的伺服器磁碟空間和頻寬。
這就是為什麼它是網際網路上第二受歡迎的格式，約72％的網站使用了此格式影象。一般情況下，大多數網站會同時使用PNG和JPEG。
溫馨提示：JPG與JPEG之間沒有區別，屬於同一格式，兩者的副檔名可以相互切換。
3. SVG：Logo，圖示和插畫
SVG檔案是可縮放的向量檔案，非常適合圖示，Logo，圖形和簡單的插畫。該影象甚至可以作為CSS程式碼直接插入到頁面中。
這就是SVG排名第三的原因，有27％的網站使用了SVG。
4.特別提名：GIF動畫圖片
儘管很少使用此格式作為靜態影象的選擇，但不可否認GIF已成為共享動畫的第一選擇。
gif動畫示例
事實上，約有22％的網站在其頁面上使用了GIF，即使這些網站也可能使用PNG和JPEG作為其標準格式。
哪種影象格式質量最高？
Raw影象格式的質量最佳，但檔案體積超大，可能一個Raw格式的照片就高達幾百MB。
對於Web影象，相同質量的情況下，WebP檔案格式的檔案大小比JPEG小25-35％，也就是說相同的儲存空間可以上傳更多更高質量的影象，有可以保證網站擁有很好的訪問速度。
HEIF是另一種JPEG替代方案，提供更高的壓縮效率，但遺憾的是目前主流瀏覽器均不相容。
PNG檔案提供無失真壓縮，但檔案體積較大影響載入載入速度。單個PNG檔案通常為數百KB甚至1MB +。但如果利用諸如延遲載入（WordPress 5.5+核心支援該功能 ）和CDN之類的一些策略，網站還是可以擁有一個較快的載入體驗。
哪些檔案格式支援透明背景？
目前網路上最常見的支援透明背景的的影象檔案型別有PNG，WebP，GIF和SVG。
大多數計算機專案影象檔案型別（如PSD，XCF和AI）也支援透明背景。
另一方面，流行的JPEG影象格式是不支援透明背景的。
PNG和JPEG孰優孰劣?
PNG和JPEG之間的主要區別是，PNG是一種無損影象格式，而JPEG是一種有損影象格式。換句話說，PNG使用壓縮技術而不會犧牲影象的原始質量或細節。
對於附帶文字的影象，教程螢幕截圖，以及標誌或其他精細元素需100％可見的照片，PNG才是最佳格式。
PNG vs JPEG漫畫（圖片來源：lbrandy.com）
從上面這張有趣的圖片可以看出，與右側的JPEG相比，左側的PNG更清晰地展現文字和簡單的形狀。
那這就是否意味著JPEG是一種拙劣的影象檔案型別？非也！
對於常規部落格文章配圖等其他無需關注細節的圖片，JPEG可以實現足夠好的質量，又能夠大大減少檔案體積。通常可以節省50％或更多的空間，一般人肉眼難以發現質量上的任何差異。
PNG和JPEG孰優孰劣？得視情況而下定論！
小結
可用於專案的影象（15個站長必備的相簿網）有很多，但要選擇最合適的一種以獲得最佳效果，需要您對各種不同格式的影象有足夠的瞭解。
用一句話概述，柵格格式最適合用於影象和圖片，向量格式則更適用於Logo徽標，圖示和數字圖形。
根據不同任務型別使用合適的影象檔案型別不僅可以提高頁面載入速度，還可以降低頻寬流量和伺服器負載，再說更快的速度使用者體驗也上去了。
評論留言