選擇正確的圖像文件類型似乎是一個微不足道的決定。
但是，人類是視覺生物，圖像是在線體驗中不可或缺的一部分。
大多數頁面和文章都使用屏幕截圖和圖像來豐富文本內容。實際上，只有大約8％的網站不包含任何視覺內容。
不幸的是，許多網站所有者仍然不了解針對不同用例選擇哪種圖像文件類型。結果？他們最終減慢了網站載入速度，因為它們的圖像不是可用的最佳格式，也沒有進行優化。
在本文中，我們將介紹所有最重要的圖像文件擴展名，以及何時應使用它們為訪問者提供最佳的用戶體驗。
有哪些不同的圖像文件類型？
圖像文件類型和格式分為兩個主要類別：光柵圖像文件和矢量圖像文件。
讓我們仔細看看每個類別。
柵格圖像文件格式
網路上最常見的圖像格式（JPEG，GIF和PNG）都在光柵類別下。
柵格圖像文件類型顯示靜態圖像，其中每個像素均基於其解析度（例如1280×720）具有定義的顏色，位置和比例。
由於它們是靜態的，因此您無法有效地調整圖像的大小，原始設計和像素將僅被拉伸以填充額外的空間。最終會產生模糊，像素化或其他失真的圖像。
光柵圖像-JPEG示例
您在互聯網上看到的絕大多數照片或圖像都使用光柵圖像格式。
矢量圖像文件格式
SVG，EPS，AI和PDF是矢量圖像文件類型的示例。
與靜態柵格圖像文件格式不同，在靜態柵格圖像文件格式中，每個設計形狀和顏色都與一個像素相關，這些格式更加靈活。
取而代之的是，矢量圖形使用笛卡爾平面上的線和曲線系統，該系統相對於總面積（而不是任何單個像素）進行縮放。
這意味著您可以無休止地擴大原始圖像解析度，而不會損失質量或失真。
矢量圖像格式放大倍數（圖片來源：Wikipedia.com）
如您所見，放大7倍時，質量之間的差異是完全無法比擬的。
由於SVG是根據總面積的百分比而不是像素來計算位置的，因此根本沒有像素化。
只有8％的網站不包含視覺內容…但是對於其他92％的網站來說，顯示具有正確文件類型的圖片至關重要。?在本指南中找到15個最佳選項?單擊以鳴叫
15種最受歡迎的圖像文件類型
下面，我們介紹了每種主要的圖形文件格式，從光柵Web圖像到矢量，再到圖像編輯軟體文件。
我們進行了深入探討，並討論了每種格式的優缺點，瀏覽器和操作系統支持以及理想的用例。
1.JPEG（和JPG）—聯合圖像專家組
老虎圖像JPEG格式
JPEG（或JPG）是具有有損壓縮的光柵圖像文件格式，使其適合共享圖像。JPEG是「有損的」，這意味著它們可以減小文件大小，但在使用格式時也可以降低圖像質量。
JPEG仍然是壓縮文件，並且實際上具有通用的瀏覽器/操作系統支持，因此仍然是您在互聯網上會看到的最常用的圖像文件類型之一。
大多數社交媒體平台（例如Facebook和Instagram）會自動將上傳的圖像文件轉換為JPEG。他們還使用獨特的社交媒體圖像大小來控制照片的解析度。
的優點和缺點
- 通用瀏覽器和操作系統支持。
- 相當小的文件大小。
- 有損的圖像壓縮可能導致較差的文本可讀性。
瀏覽器和操作系統支持
- 從1.0版開始支持所有主流瀏覽器（Chrome，Firefox，Safari等）
- 默認情況下，所有主要操作系統的所有圖像查看器和編輯器均支持該功能。
用例
- 博客和文章圖像（如受訪者頭像，產品圖像等）的不錯選擇。
- 請勿將JPEG用於包含大量小文本的信息圖表或文本為關鍵的教程屏幕截圖。
2. PNG —攜帶型網路圖形
Kinsta的資源中心.png圖像文件
PNG是一種柵格圖形格式，支持無損壓縮，保持顏色之間的細節和對比度。
特別是，PNG提供比JPEG更好的文本可讀性。
這使得PNG成為圖表，橫幅，屏幕截圖以及其他同時包含圖像和文本的圖形的更受歡迎的選擇。
的優點和缺點
- 高質量（無損）圖像和清晰可見的文本。
- 如果文件過多（特別是高解析度圖像），較大的文件大小可能會減慢您的網站速度。
瀏覽器和操作系統支持
- 受所有主要瀏覽器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支持。
- 受所有主要操作系統及其標準圖像編輯器的支持。
用例
- 圖表，橫幅，博客圖形，屏幕截圖，優惠券和其他包含文本的視覺效果的不錯選擇。
- 請勿用於高解析度照片，因為它將創建高達幾兆位元組的大文件。
3. GIF —圖形交換格式
gif圖像示例
GIF是屬於柵格格式的另一種圖像文件類型。它使用無損壓縮，但將圖像「約束」為每個像素8位，並限制了256色調色板。
GIF格式最有名（也是最常用的）是動畫圖像，因為它的8位限制使動畫的文件大小更小並且對Internet友好。
的優點和缺點
- 低文件大小。
- 動畫支持。
- 8位限制導致圖像質量受限。
瀏覽器和操作系統支持
- 受所有主要瀏覽器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支持。
- 受所有主要操作系統及其標準圖像編輯器的支持。
用例
- 使用動畫GIF不僅可以「增加內容趣味」，還可以在教程和指南中演示如何完成任務。
- 如果需要大於8位的彩色圖像（JPEG支持最大24位），請不要使用它。
4. WebP
WebP圖像示例
WebP是專門為提供更好的圖像無損和有損壓縮而開發的圖像格式。
從JPEG和PNG切換到WebP可以幫助節省伺服器磁碟空間和顯著帶寬，而相同質量的圖像文件最多可以縮小35％。
的優點和缺點
- 較小的文件可獲得相同或更好的圖像質量。
- 並非所有瀏覽器和圖像編輯器都支持。
瀏覽器和操作系統支持
- Google Chrome瀏覽器（台式機為17+版本，移動設備為25+版本），Firefox（65 +），Edge（18+）和Opera（11.0+）本身都支持WebP。Safari的計劃版本14將支持WebP。
- 大多數本機OS圖像編輯器仍不支持該格式，但是Photoshop等專業選項支持WebP。
用例
- 替換JPEG和PNG文件可節省帶寬並加快網站速度。如果您使用WordPress作為首選的CMS軟體，則以下是在WordPress中使用WebP圖像並將其他格式傳遞到舊版瀏覽器的方法。
5. TIFF
TIFFC圖標
在本圖像文件類型指南中，不應缺少一種格式，即TIFF。
使用WordPress，我們的流量增長了1,187％。
我們將向您展示如何。
加入20,000多個其他人，他們每周都會收到有關WordPress內部技巧的新聞！
現在訂閱
成功！感謝您的訂閱
您將在一周內收到下一期的Kinsta新聞通訊。
訂閱Kinsta新聞通訊
訂閱
我同意條款和條件以及隱私政策
TIFF是「標記圖像文件格式」的縮寫，是一種光柵圖像格式，最常用於存儲和編輯圖像，以後將用於列印。
它不提供任何壓縮，因為優先順序是保持圖像質量。
的優點和缺點
- 高質量文件非常適合存儲或印刷出版。
- 沒有壓縮選項會導致圖像文件很大。
- 有限的瀏覽器支持。
瀏覽器和操作系統支持
- 沒有主流的瀏覽器就不能在沒有附加組件或擴展名的情況下呈現TIFF文件。
- 主要用作專業圖像編輯和發布工具的導出格式。
用例
- 存儲和準備要發布的圖像和圖形。
- 許多掃描儀使用它來保留掃描文檔或圖片的質量。
6. BMP-點陣圖
點陣圖與gif
點陣圖（BMP）是一種大多數已經過時的圖像文件格式，它幾乎沒有壓縮就可以映射單個像素。這意味著BMP文件很容易變得非常大，並且無法存儲或處理。
的優點和缺點
- 與WebP，GIF或PNG等格式相比，巨大的文件大小沒有明顯的質量提升。
瀏覽器和操作系統支持
- 受所有主要瀏覽器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支持。
- 大多數默認OS圖像編輯器（例如MS Paint）中的本機支持。
用例
- 到2020年，BMP圖像格式的合法用例基本為零。
7. HEIF —高效圖像文件格式
JPEG與HEIF格式
HEIF是高效圖像文件格式的縮寫，是由MPEG視頻格式背後的團隊開發的圖像格式，是JPEG的直接競爭對手。
從理論上講，壓縮效率幾乎是JPEG的兩倍，因此在文件大小相同的情況下，圖像質量可以提高一倍。
這是一種基於像素映射的光柵圖像格式，這意味著您無法按比例放大圖像而不會降低質量。
的優點和缺點
- 高質量與文件大小之比。
- 沒有瀏覽器和有限的操作系統支持。
瀏覽器和操作系統支持
- 任何主要瀏覽器均不支持。
- 在macOS Sierra和iOS 11及更高版本中提供本機支持，但在各自的Safari版本中不提供本機支持。
用例
- 一些較新的電話和設備使用它來存儲質量比JPEG文件更高的照片。
8. SVG —可伸縮矢量圖形
SVG徽標
W3C將可伸縮矢量圖形文件格式（通常稱為SVG）開發為一種標記語言，以在瀏覽器中直接渲染二維圖像。
它不像柵格格式那樣依賴像素，而是使用XML文本以類似於數學方程式創建圖形的方式來勾勒形狀和線條。
這意味著您可以無限放大SVG圖像，而不會損失任何質量。
的優點和缺點
- 小文件大小和無損縮放，可用於簡單的插圖，形狀和文本。
- 對於圖像或複雜圖形而言，不是理想的格式。
瀏覽器和操作系統支持
- 受所有主要瀏覽器（Chrome，Edge，Firefox，Internet Explorer，Opera，Safari）支持。
- 默認圖像編輯器通常不支持SVG（因為它不適合照片），但是大多數插圖軟體都支持SVG導出。
用例
- SVG是徽標，圖標，簡單插圖以及您希望通過響應式設計自由擴展的任何其他內容的理想格式。如果您使用的是WordPress，請確保查看如何為您的網站啟用WordPress SVG支持。
9. EPS —封裝後記
EPS圖標
本質上，EPS（封裝的PostScript）文件是矢量圖像文件，用於在Adobe Illustrator和其他插圖軟體（如CorelDraw）中存儲插圖。
像SVG文件一樣，EPS實際上是一個基於文本的文檔，該文檔使用代碼概述了形狀和線條，而不是映射像素和顏色。因此，EPS文件還支持無損縮放。
的優點和缺點
- 無損縮放。
- 印表機對文檔和設計的支持。
瀏覽器和操作系統支持
- EPS不是標準的Web圖像文件格式，並且任何主要的瀏覽器都不支持EPS。
用例
- 使用Adobe Illustrator或其他軟體時，它主要用於存儲，保存和列印插圖。
10. PDF —攜帶型文檔格式
PDF文件示例
您可能將PDF與存儲，保存和讀取主要基於文本的文檔相關聯。這是完全可以理解的-文件畢竟就在名稱中。
但是，PDF文件實際上基於為EPS矢量圖像文件提供支持的PostScript語言，並且還可以用於保存圖像和插圖。
這是用於存儲插圖，雜誌封面等的圖像格式，供以後列印時使用。這也是我們Kinsta電子書的首選。
的優點和缺點
- 可索引和可搜索的文本使其非常適合深入的圖表或報告。
- 可以包括鏈接，CTA按鈕和其他互動式元素。
- 無損可伸縮性。
- 不能包含在Web內容中，必須載入並作為單獨的文件讀取。
瀏覽器和操作系統支持
- 所有主要瀏覽器都支持，但是您不得不將PDF作為單獨的文件打開。（您不能使用PDF文件在整個HTML內容中顯示圖像。）
- 大多數標準文檔編輯器（例如MS Word或Google Docs）和插圖軟體（AI，Inkscape）均以格式支持，但圖像編輯軟體則不支持。
用例
- 如果您要創建一個互動式的可視報告或信息圖表來補充您的內容，則PDF是最佳選擇。這是WordPress用戶最好的PDF查看器插件的不錯列表。
11. PSD — Photoshop文檔
PSD徽標
顧名思義，PSD文件格式是一種用於保存圖像文檔的圖像格式，並且正在與Adobe Photoshop一起使用。
它不是網路安全的圖像格式，因此任何瀏覽器或標準圖像查看器或編輯器均不支持。
的優點和缺點
- 所有過濾器，透明度，路徑和編輯都是完全可自定義和可逆的。
- 無損圖像質量。
- 大文件大小。
用例
- 在完成之前和之後保存和存儲Photoshop項目。
12. AI — Adobe Illustrator Artwork
Adobe Illustrator文件圖標
AI是Adobe專門開發的另一種圖像格式，不僅可以保存圖像，還可以保存項目狀態。
像PSD一樣，它不是要在網路上使用，也不是任何瀏覽器或大多數默認圖像查看器所支持的。
厭倦了您的WordPress網站的緩慢主機？我們提供WordPress專家提供的快速伺服器和24/7世界一流的支持。查看我們的計劃
與PSD文件不同，您可以自由縮放AI文件，而不會造成質量損失。
的優點和缺點
- 所有筆畫，線條，形狀，過濾器都是可定製和可逆的。
- 自由放大或縮小插圖大小。
- 大文件大小。
用例
- 在完成之前和之後保存和存儲Adobe Illustrator項目。
13. XCF —電子計算設施
XCF圖標
XCF代表電子計算工具，是開源圖像編輯器GIMP固有的圖像文件類型。它等效於PSD文件，並保存路徑，透明度，過濾器等。
同樣，這是用於存儲項目的本機文件類型，任何瀏覽器或默認圖像查看器均不支持。
的優點和缺點
- 所有路徑，過濾器和形狀都是可自定義和可逆的。
- 無損圖像質量。
- 大文件大小。
用例
- 在完成之前和之後保存和存儲GIMP項目。
14. INDD-Adobe InDesign文檔
Adobe InDesign圖標
INDD是Adobe InDesign用戶的本機文件類型，您可以在其中保存項目文件，包括頁面內容，樣式，色板等。
儘管有時稱為圖像文件格式，但它傾向於鏈接到文本以外的視覺元素。
任何瀏覽器或默認圖像查看器均不支持此格式，因為它不是網路安全格式。
的優點和缺點
- 存儲具有可自定義元素的大型，多頁設計項目。
用例
- 圖形設計師和生產藝術家主要使用它來設計和合作製作海報，傳單，雜誌，小冊子等。
15.原始圖像文件類型
原始圖像格式是數碼相機用來存儲高質量圖像以供以後後期製作和編輯的文件類型。
相機製造商的主要原始圖像文件類型：
- 柯達：CR，K25，KDC
- 佳能：CRW CR2 CR3
- 愛普生：ERF
- 尼康：NEF NRW
- 奧林巴斯：ORF
- 賓得：PEF
- 松下：RW2
- 索尼：ARW，SRF，SR2
RAW文件可在一張圖片中提供多達16,384種不同的顏色，而不是JPEG文件中提供的256種顏色。在後期處理中調整顏色和對比度時，可以為您提供更大的靈活性。
原始圖像不適合用於網路或共享，並且不受任何主要瀏覽器或圖像查看器的支持。
的優點和缺點
- 更高質量的圖片以及更多的色彩變化。
- 巨型圖像文件（原始文件可以輕鬆達到20到40兆位元組）。
用例
- 以最高質量保存照片以進行後期處理和編輯。
圖像文件類型常見問題解答
圖像文件的3種常見文件類型是什麼？
根據與Web使用相關的數據，三種最常見的圖像文件類型為PNG，JPEG和SVG。
圖像文件格式的使用情況統計（圖像來源：w3techs.com）
讓我們在下面查看是什麼使它們如此普及。
1. PNG：屏幕截圖，橫幅，信息圖表，圖片
由於PNG作為一種格式更適合於圖像內的文本，因此它更常用於屏幕截圖，橫幅廣告（取決於橫幅廣告的大小）等。
由於它使用無損壓縮，因此設計師和攝影師也使用它在其作品集網站上展示高質量的圖片。
這兩個因素，加上其通用的瀏覽器和操作系統支持，使其成為網路上最受歡迎的圖像文件類型。PNG存在於高達77％的網站上。
2. JPEG：圖片
有損壓縮意味著JPEG是更好的選擇，可用於在整個內容中展示圖片。質量損失對於普通的互聯網用戶幾乎是看不到的，您可以節省大量的磁碟空間和帶寬。
這就是為什麼它是Internet上第二流行的格式，幾乎72％的網站使用的格式。大多數網站出於不同目的同時使用PNG和JPEG。
提醒一下：JPG與JPEG之間沒有區別，它們是相同格式的兩個不同的首字母縮寫和文件擴展名。
3. SVG：徽標，圖標和插圖
SVG文件是可縮放的矢量文件，非常適合圖標，徽標，圖形和簡單的插圖。該圖像甚至可以作為CSS代碼直接插入到頁面中。
這就是SVG排名第三的原因，有27％的網站使用了SVG。
榮譽提名：GIF動畫圖片
儘管很少使用靜態圖像的選擇格式，但GIF已成為共享動畫的第一選擇。
動畫gif示例
結果，約有22％的網站在其頁面上使用GIF，即使它們也可能使用PNG和JPEG作為其標準格式。
哪種圖像格式質量最高？
原始圖像格式是最高質量的，但文件大小過大，高達數百兆位元組。
對於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％或更多的空間，同時還要用肉眼發現質量上的任何差異。
保持你的網站的視頻內容看清楚本指南以最佳的圖像文件類型✨點擊鳴叫
摘要
不乏可合法用於項目的圖像。希望本文能幫助您了解在哪種上下文中使用哪種圖像文件類型和格式以獲得最佳效果。
柵格格式最適合用於圖像和圖片，而矢量可以很好地替代徽標，圖標和數字圖形。
為正確的任務使用正確的圖像文件類型不僅可以幫助提高頁面載入速度，還可以降低帶寬和伺服器負載。作為後續的積極影響，您的總體用戶體驗也將節省大量時間。還不錯吧？
如果您喜歡這篇文章，那麼您會喜歡Kinsta的WordPress託管平台。加速您的網站並獲得我們經驗豐富的WordPress團隊的24/7支持。我們基於Google Cloud的基礎架構專註於自動擴展，性能和安全性。讓我們向您展示Kinsta的與眾不同！查看我們的計劃