大多數頁面和文章都使用屏幕截圖和圖像來豐富文本內容。實際上，只有大約8％的網站不包含任何視覺內容。
許多站長或者網站運營人員其實對圖像類型了解不深，如何根據不同用例選擇何種圖像文件類型。很多時候，由于選擇了不合適的圖像類型導致網站加載速度變慢，因為所選擇的圖像不是可用的最佳格式，也沒有適當的優化。
在本文中，我們將介紹所有常見的圖像文件格式，優缺點是什么以及適用場景（以保證為訪問者提供最佳的用戶體驗）。
有哪些不同的圖像文件類型？
圖像文件的類型和格式分為兩個主要類別：光柵（或者叫作柵格）圖像文件和矢量圖像文件。
柵格圖像文件格式
網絡上最常見的光柵圖像格式包括JPEG，GIF和PNG三種。
柵格圖像文件類型為靜態圖像，其中每個像素均基于其分辨率（例如1280×720）具有定義的顏色，位置和比例。
由于靜態的，無法隨心所欲地調整圖像的大小，否則原始設計和像素將簡單地被拉伸以填充額外的空間。最終會產生模糊，像素化或其他失真的圖像。
光柵圖像-JPEG示例
一般情況下，我們在互聯網上看到的絕大多數照片或圖像都使用光柵圖像格式。
矢量圖像文件格式
SVG，EPS，AI和PDF這幾種格式為最為常見的矢量圖像文件類型。
與靜態柵格圖像文件格式（每個設計形狀和顏色都與一個像素相關聯）不同，矢量圖像格式更加靈活。
取而代之的是，矢量圖形使用笛卡爾平面上的直線和曲線系統（即通過數學公式計算獲得的），該系統相對于總面積（而不是任何單個像素）進行縮放。
這意味著我們可以無限擴大原始圖像分辨率，又不會損失質量或失真。
矢量圖像格式放大倍數（圖片來源：）
如您所見，放大7倍時，兩種圖像類型的在質量之間的差異是完全無法比擬的，矢量圖像依然十分清晰，但光柵圖像已經模糊不可見了。
由于SVG是根據總面積的百分比而不是像素來計算位置的，因此根本沒有像素化。
注：如果您曾經學習過平面設計相關知識，您可能會了解到，矢量圖像一般稱為圖形，即它是一種幾何形狀，而不是單純的像素圖；光柵圖像（位圖）則稱為圖像，在固定的尺寸內包含一定數量的像素。
15種常見的圖像文件類型（格式）
下面，我們介紹了15種最為常見的圖像文件格式，從Web柵格圖像到矢量圖形，再到圖像編輯軟件文件。
深入探討每一種格式，并討論了每種格式的優缺點，瀏覽器和操作系統兼容情況以及最理想的應用場景。
1.1.JPEG（或JPG）- 最為常見的圖像格式
老虎圖像JPEG格式
JPEG（或JPG），其全稱為Joint Group（聯合圖像專家組），是一種有損壓縮的光柵圖像文件格式，適合作為共享圖像。既然JPEG是“有損的”圖像，也就是說使用此格式時，若減小文件大小，在一定程度上也會降低圖像質量。
JPEG是目前互聯網上最常用的圖像文件類型之一，因為它的可壓縮性及瀏覽器/操作系統廣泛支持。
大多數社交媒體平臺（例如和）會自動將上傳的圖像文件轉換為JPEG，且會根據不同場景使用固定的尺寸大小來控制圖片的分辨率。
優缺點
兼容情況
應用場景
2. PNG – Web廣泛使用的圖像格式
閃電博的資源中心.png圖像文件
PNG，英文全稱為 PNG（便攜式網絡圖形），也是一種柵格圖形格式，但支持無損壓縮，保證顏色之間的細節和對比度。
特別是，PNG提供比JPEG更好的文本可讀性。
這使得PNG成為信息圖形，橫幅，屏幕截圖以及其他同時包含圖像和文本的圖形的最佳表達方式。
優缺點
兼容情況
應用場景
3. GIF – 動畫圖像格式
gif圖像示例
GIF，英文全稱為 ，屬于另一種柵格格式圖像文件類型。該格式也使用了無損壓縮，且將圖像“約束”為8 bits/每個像素，并限制為256色調色板。
GIF格式也是最有名的（和最常用）的動畫圖像，因為它的8-bit限制保證了動畫體積更小和互聯網友好。
優缺點
兼容情況
應用場景
4. WebP – JPEG&PNG最佳替代圖像格式
WebP圖像示例
優缺點
兼容情況
使用場景
5. TIFF – 掃描儀最佳拍檔圖像格式
TIFFC圖標
TIFF是本圖像文件類型指南不應該缺少的一種格式。
TIFF是“ Image File ”的縮寫，是一種光柵圖像格式，最常用于存儲和編輯圖像，以便于將來打印。
該格式不支持任何壓縮，圖像質量是該格式的首要保證。
優缺點
兼容情況
使用場景
6. BMP — 過氣的圖像格式
vs gif
（BMP）是一種已經過時的圖像文件格式，幾乎不壓縮情況映射像素。這意味著BMP文件體積經常會比較龐大，不利于存儲或處理。
優缺點
兼容情況
使用場景
7. HEIF – 手機照片常見圖像格式
JPEG vs HEIF
HEIF是High Image File 的縮寫，是由MPEG視頻格式背后的技術團隊開發的圖像格式，是JPEG的直接競爭對手。
HEIF壓縮效率理論值幾乎是JPEG的兩倍，換言之，文件大小相同的情況下，HEIF圖像質量可以提高一倍。
這是一種基于像素映射的光柵圖像格式，無法做到按比例放大圖像而不會降低質量。
優缺點
兼容情況
使用場景
8. SVG – 可縮放矢量圖形格式
SVG logo
可伸縮矢量圖形文件格式（通常稱為SVG），由W3C開發的一種標記語言，可以在瀏覽器中直接渲染為二維圖像。
它不像柵格格式那樣依賴像素，而是使用XML文本以類似于數學方程式計算勾勒形狀和線條獲得圖形。
也就是說，可以在不損失任何質量的情況下無限放大SVG圖像。
優缺點
兼容情況
使用場景
9. EPS – 插畫/排版設計矢量圖像格式
EPS格式圖標
EPS（全稱為 ）文件屬于矢量圖像文件，一般為Adobe 和其他插?插畫軟件（如）的一種保存格式。
與SVG文件相似ps的文件格式有哪些，EPS實際上是一個基于文本的文檔格式，該文檔使用代碼表達形狀和線條，而不是映射像素和顏色。因此，EPS文件也支持無損縮放。
優缺點
兼容情況
使用場景
10. PDF – 電子書常用文檔格式
PDF 文件示例
PDF（為 的縮寫），如其名，該格式主要用于文本文檔的存儲，保存和讀取。
但是，PDF文件實際上基于為EPS矢量圖像文件提供支持的語言，也可以用于保存圖像和插畫。
這是用于存儲插畫，雜志封面等的圖像格式，供需要時打印使用，很多時候我們在網上看到的電子書，就是這種格式。
優缺點
兼容情況
使用場景
11. PSD – 文檔格式
PSD文件格式Logo
非常常見，大部分對該格式應該都不會感到陌生。PSD文件格式是一種用于保存圖像文檔的圖像格式，為Adobe 軟件特有的格式。
PSD不是網絡安全圖像格式，不兼容任何瀏覽器或標準圖像查看器或編輯器。
優缺點
使用場景
12. AI – Adobe 文檔格式
Adobe 格式圖標
AI是Adobe專門開發的另一種圖像格式，不僅可以保存圖像，還可以保存項目狀態。
像PSD一樣，它不用于網絡，也不兼容任何瀏覽器或大多數默認圖像查看器。
與PSD文件不同是，AI文件可以自由縮放，但質量不會有任何損失。
優缺點
使用場景
13. XCF —GIMP圖像編輯工具專屬格式
XCF圖標
XCF（其全稱為 ），是開源圖像編輯器GIMP特有的圖像文件類型。類同與特有的PSD文件格式，支持保存路徑，透明度，濾鏡等。
同樣，這是用于存儲項目的計算機文件類型，任何瀏覽器或默認圖像查看器均不支持。
優缺點
使用場景
14. INDD – Adobe 文檔格式
Adobe 圖標
INDD是Adobe 軟件特定的文件類型，用于保存該軟件的項目文件，包括頁面內容，樣式，色板等。
盡管有時稱為圖像文件格式，但它傾向于用于展現文字以外的視覺元素。。
任何瀏覽器或默認圖像查看器均不支持該格式，因為它不是網絡安全格式。
優缺點
使用場景
15. Raw – 數碼相機圖像存儲文件格式
Raw圖像格式是數碼相機用來存儲高質量圖像以供后期制作和編輯的文件類型。
相機制造商的主要Raw圖像文件類型：
RAW文件在一張圖片中包含多達16,384種不同的顏色，而不是JPEG文件僅包含256種顏色。也就是說RAW文件在調整顏色和對比度等后期處理時，有著更大的靈活性。
RAW圖像不適合用于網絡演示或共享，并且主流瀏覽器或圖像查看器兼容性極差，一般需要使用專業的相機圖像處理軟件處理。
優缺點
使用場景
圖像文件類型常見問題解答文件的最為常見的3種圖像文件類型是什么？
根據與Web使用相關的數據，三種最常見的圖像文件類型分別為PNG，JPEG和SVG。
圖像文件格式的使用情況統計（圖像來源：）
為什么這三種圖像文件格式最為受歡迎？
1. PNG：屏幕截圖，橫幅，信息圖表，圖片
由于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％ps的文件格式有哪些，也就是說相同的存儲空間可以上傳更多更高質量的圖像，有可以保證網站擁有很好的訪問速度。
HEIF是另一種JPEG替代方案，提供更高的壓縮效率，但遺憾的是目前主流瀏覽器均不兼容。
PNG文件提供無損壓縮，但文件體積較大影響加載加載速度。單個PNG文件通常為數百KB甚至1MB +。但如果利用諸如延遲加載（ 5.5+核心支持該功能 ）和CDN之類的一些策略，網站還是可以擁有一個較快的加載體驗。
哪些文件格式支持透明背景？
目前網絡上最常見的支持透明背景的的圖像文件類型有PNG，WebP，GIF和SVG。
大多數計算機項目圖像文件類型（如PSD，XCF和AI）也支持透明背景。
另一方面，流行的JPEG圖像格式是不支持透明背景的。
PNG和JPEG孰優孰劣?
PNG和JPEG之間的主要區別是，PNG是一種無損圖像格式，而JPEG是一種有損圖像格式。換句話說，PNG使用壓縮技術而不會犧牲圖像的原始質量或細節。
對于附帶文本的圖像，教程屏幕截圖，以及標志或其他精細元素需100％可見的照片，PNG才是最佳格式。
PNG vs JPEG漫畫（圖片來源：）
從上面這張有趣的圖片可以看出，與右側的JPEG相比，左側的PNG更清晰地展現文字和簡單的形狀。
那這就是否意味著JPEG是一種拙劣的圖像文件類型？非也！
對于常規博客文章配圖等其他無需關注細節的圖片，JPEG可以實現足夠好的質量，又能夠大大減少文件體積。通常可以節省50％或更多的空間，一般人肉眼難以發現質量上的任何差異。
PNG和JPEG孰優孰劣？得視情況而下定論！
小結
可用于項目的圖像（15個站長必備的圖庫網）有很多，但要選擇最合適的一種以獲得最佳效果，需要您對各種不同格式的圖像有足夠的了解。
用一句話概述，柵格格式最適合用于圖像和圖片，矢量格式則更適用于Logo徽標，圖標和數字圖形。
根據不同任務類型使用合適的圖像文件類型不僅可以提高頁面加載速度，還可以降低帶寬流量和服務器負載，再說更快的速度用戶體驗也上去了。