影像檔案型別和格式指南

以下列出了 Web 上最常用的影像檔案格式。

以下列出了出現在 Web 上但應避免用於 Web 內容的影像格式（通常是因為它們沒有廣泛的瀏覽器支援，或者因為存在更好的替代方案）。

以下部分簡要概述了 Web 瀏覽器支援的每種影像檔案型別。

在下表中，術語每元件位數指的是用於表示每個顏色元件的位數。例如，8 位的 RGB 色深表示紅色、綠色和藍色元件中的每一個都由一個 8 位值表示。另一方面，位深度是用於在記憶體中表示每個畫素的總位數。

APNG 是一種最初由 Mozilla 引入的檔案格式，它擴充套件了PNG標準以新增對動畫影像的支援。從概念上講，它類似於已使用數十年的動畫 GIF 格式，但 APNG 更加強大，因為它支援各種色彩深度，而動畫 GIF 只支援 8 位索引色。

APNG 非常適合不需要與其他活動或音軌同步的基本動畫，例如進度指示器、活動轉輪和其他動畫序列。例如，APNG 是Apple iMessage 應用程式（以及 iOS 上的 Messages 應用程式）在建立動畫貼紙時支援的格式之一。它們也常用於 Web 瀏覽器使用者介面的動畫部分。

AV1 影像檔案格式 (AVIF) 是一種強大的開源、免版稅的檔案格式，它將AV1 位流編碼到高效影像檔案格式 (HEIF) 容器中。

AV1 是一種最初設計用於在網際網路上傳輸影片的編碼格式。該格式得益於近年來影片編碼的重大進步，並且可能得益於相關的硬體渲染支援。但是，它也有一些缺點，因為影片和影像編碼有一些不同的要求。

該格式提供了

• 與 JPG 和 PNG 相比，對於視覺上相似的壓縮級別，具有出色的有失真壓縮（例如，有損 AVIF 影像比 JPEG 影像小約 50%）。
• 通常，AVIF 的壓縮比 WebP 更好——對於同一組 JPG，中位數為 50% 對 30% 的壓縮（來源：AVIF WebP 比較 (CTRL 部落格)）。
• 無失真壓縮。
• 動畫/多影像儲存（類似於動畫 GIF，但壓縮率更高）
• 支援 Alpha 通道（即用於透明度）。
• 高動態範圍 (HDR): 支援儲存影像，這些影像可以表示影像最亮和最暗部分之間更大的對比度。
• 寬色域: 支援包含更大範圍顏色的影像。

AVIF 不支援漸進式渲染，因此檔案必須完全下載才能顯示。這通常對真實使用者體驗的影響很小，因為 AVIF 檔案比等效的 JPEG 或 PNG 檔案小得多，因此可以更快地下載和顯示。對於更大的檔案大小，影響可能會變得很大，您應該考慮使用支援漸進式渲染的格式。

AVIF 在 Chrome、Edge、Opera、Safari 和 Firefox 中得到支援。由於支援尚未完全普及（而且歷史深度有限），您應該使用 WebP、JPEG 或 PNG 格式提供回退，使用 <picture> 元素（或其他方法）。

BMP（點陣圖影像）檔案型別在 Windows 計算機上最為普遍，通常僅用於 Web 應用程式和內容中的特殊情況。

BMP 理論上支援各種內部資料表示。最簡單也是最常用的 BMP 檔案形式是未壓縮的柵格影像，每個畫素佔用 3 個位元組，表示其紅色、綠色和藍色分量，並且每行用 0x00 位元組填充到 4 個位元組的倍數。

雖然規範中定義了其他資料表示，但它們並沒有被廣泛使用，而且通常完全沒有實現。這些功能包括：支援不同的位深度、索引顏色、alpha 通道和不同的畫素順序（預設情況下，BMP 從左下角向右上角寫入，而不是從左上角向右下角寫入）。

理論上，支援幾種壓縮演算法，影像資料也可以儲存在 JPEG 或 PNG 格式的 BMP 檔案中。

1987 年，CompuServe 線上服務提供商引入了 GIF（圖形交換格式）影像檔案格式，以提供所有成員都可以使用的壓縮圖形格式。GIF 使用 Lempel-Ziv-Welch (LZW) 演算法對 8 位索引顏色圖形進行無失真壓縮。GIF 是 HTML 支援的兩種圖形格式之一，另一種是 XBM。

GIF 中的每個畫素由一個 8 位值表示，用作 24 位顏色調色盤的索引（紅色、綠色和藍色各 8 位）。顏色表的長度始終是 2 的冪（即，每個調色盤有 2、4、8、16、32、64 或 256 個條目）。為了模擬超過 255 或 256 種顏色，通常使用 抖動。它 在技術上是可行的 將多個影像塊平鋪在一起，每個影像塊都有自己的顏色調色盤，以建立真彩色影像，但在實踐中很少這樣做。

畫素是不透明的，除非指定一個特定的顏色索引作為透明的，在這種情況下，以該顏色著色的畫素是完全透明的。

GIF 支援簡單的動畫，其中在初始全尺寸幀之後，提供一系列反映影像在每個幀中發生變化的部分的影像。

GIF 幾十年來一直非常流行，因為它簡單易用且相容性高。它的動畫支援使其在社交媒體時代重新流行起來，當時動畫 GIF 開始被廣泛用於短“影片”、表情包和其他簡單的動畫序列。

GIF 的另一個流行功能是支援 隔行掃描，其中畫素行以亂序儲存，以便可以以較低的質量顯示部分接收的檔案。這在網路連線速度慢時特別有用。

GIF 對於簡單的影像和動畫來說是一個不錯的選擇，儘管將全綵色影像轉換為 GIF 可能會導致令人不滿意地抖動。通常，現代內容應使用 PNG 用於無損和索引靜止影像，並應考慮使用 APNG 用於無損動畫序列。

ICO（Microsoft Windows 圖示）檔案格式由 Microsoft 設計，用於 Windows 系統的桌面圖示。但是，早期版本的 Internet Explorer 引入了網站提供名為 favicon.ico 的 ICO 檔案的功能，該檔案位於網站的根目錄中，用於指定 favicon — 一個將在收藏夾選單中以及其他需要網站圖標表示的地方顯示的圖示。

ICO 檔案可以包含多個圖示，並以一個目錄開頭，其中列出了有關每個圖示的詳細資訊。目錄之後是圖示的資料。每個圖示的資料可以是 BMP 影像（不包含檔案頭），也可以是完整的 PNG 影像（包含檔案頭）。如果您使用 ICO 檔案，您應該使用 BMP 格式，因為對 ICO 檔案中 PNG 的支援直到 Windows Vista 才被新增，而且可能不支援良好。

JPEG（通常發音為“jay-peg”）影像格式目前是靜止影像最廣泛使用的有失真壓縮格式。它特別適用於照片；將有失真壓縮應用於需要清晰度的內容（如圖表或圖表）可能會產生令人不滿意結果。

JPEG 實際上是壓縮照片的資料格式，而不是檔案型別。JFIF（JPEG File Interchange Format）規範描述了我們認為是“JPEG”影像的檔案的格式。

PNG（發音為“ping”）影像格式使用無失真壓縮，同時支援比 GIF 更高的顏色深度，並且效率更高，以及完整的 alpha 透明度支援。

PNG 受到廣泛支援，所有主要瀏覽器都完全支援其功能。

SVG 是基於 XML 的 向量圖形 格式，它將影像的內容指定為一組繪製命令，這些命令建立形狀、線條，應用顏色、濾鏡等。SVG 檔案非常適合圖表、圖示和其他可以在任何尺寸下準確繪製的影像。因此，SVG 在現代 Web 設計中流行用於使用者介面元素。

SVG 檔案是包含原始碼的文字檔案，當解釋這些程式碼時，會繪製所需的影像。例如，此示例定義了一個初始尺寸為 100 乘 100 個單位的繪圖區域，其中包含一條對角線穿過該框的線。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

SVG 可以透過兩種方式在網頁內容中使用

1. 您可以直接在 HTML 中編寫 <svg> 元素，其中包含 SVG 元素 來繪製圖像。
2. 您可以在可以使用其他影像型別的任何地方顯示 SVG 影像，包括使用 <img> 和 <picture> 元素，background-image CSS 屬性等等。

SVG 是用於可以使用一系列繪製命令表示的影像的理想選擇，尤其是在影像將要呈現的大小未知或可能變化的情況下，因為 SVG 將平滑地縮放至所需大小。它通常不適用於嚴格的點陣圖或照片影像，儘管可以在 SVG 中包含點陣圖影像。

TIFF 是一種光柵圖形檔案格式，最初用於儲存掃描照片，儘管它可以是任何型別的影像。它是一種比較“重量級”的格式，因為 TIFF 檔案往往比其他格式的影像更大。這是因為通常包含元資料，以及大多數 TIFF 影像要麼未壓縮，要麼使用壓縮演算法，即使在壓縮後也會留下相當大的檔案。

TIFF 支援多種壓縮方法，但最常用的方法是傳真軟體使用的 CCITT Group 4（以及較舊的傳真系統使用的 Group 3）壓縮系統，以及 LZW 和有損 JPEG 壓縮。

TIFF 檔案中的每個值都使用其 **標籤**（指示其是什麼型別的資訊，例如影像的寬度）和 **型別**（指示資料儲存的格式）來指定，然後是分配給該標籤的值陣列的長度（所有屬性都儲存在陣列中，即使對於單個值也是如此）。這允許對相同屬性使用不同的資料型別。例如，影像的寬度 ImageWidth 使用標籤 0x0100 儲存，並且是一個單條目陣列。透過指定型別 3 (SHORT)，ImageWidth 的值儲存為一個 16 位值

指定型別 4 (LONG) 將寬度儲存為一個 32 位值

單個 TIFF 檔案可以包含多個影像；這可以用來表示多頁文件，例如（例如，多頁掃描文件或接收的傳真）。但是，讀取 TIFF 檔案的軟體只需要支援第一個影像。

TIFF 支援多種顏色空間，不僅僅是 RGB。這些包括 CMYK、YCbCr 等等，使得 TIFF 成為儲存用於印刷、膠片或電視媒體的影像的理想選擇。

很久以前，一些瀏覽器支援網頁內容中的 TIFF 影像；但是，如今您需要使用特殊的庫或瀏覽器外掛才能做到這一點。因此，TIFF 檔案在網頁內容的上下文中並不有用，但是，在分發旨在進行精確編輯或列印的照片和其他藝術作品時，提供可下載的 TIFF 檔案很常見。

WebP 支援透過基於 VP8 影片編解碼器的預測編碼進行有失真壓縮，以及使用重複資料的替換進行無失真壓縮。有損 WebP 影像平均比具有視覺上相似壓縮級別的 JPEG 影像小 25-35%。無損 WebP 影像通常比 PNG 格式的相同影像小 26%。

WebP 還支援動畫：在有損 WebP 檔案中，影像資料由 VP8 位流表示，該位流可能包含多個幀。無損 WebP 包含 ANIM 塊，該塊描述了動畫，以及 ANMF 塊，該塊表示動畫序列的一幀。支援迴圈。

WebP 現在在最新版本的各大主流 Web 瀏覽器中得到廣泛支援，儘管它沒有深厚的歷史支援。提供 JPEG 或 PNG 格式的備用方案，例如使用 <picture> 元素。

XBM（X 點陣圖）檔案是第一個在 Web 上獲得支援的檔案，但不再使用，應避免使用，因為它們的格式存在潛在的安全問題。現代瀏覽器多年來一直不支援 XBM 檔案，但在處理舊內容時，您可能會發現一些仍然存在。

XBM 使用 C 程式碼片段將影像的內容表示為一個位元組陣列。每個影像包含 2 到 4 個 #define 指令，提供點陣圖的寬度和高度（以及可選的熱點，如果影像被設計為游標），然後是一個 unsigned char 陣列，其中每個值包含 8 個 1 位單色畫素。

影像的寬度必須是 8 的倍數。例如，以下程式碼表示一個 8 畫素乘 8 畫素的 XBM 影像，這些畫素呈黑白棋盤格模式

#define square8_width 8
#define square8_height 8
static unsigned char square8_bits[] = {
  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};

為您的需求選擇最佳影像格式可能比影片格式更容易，因為支援廣泛的選擇更少，並且每種格式往往都有一組特定的用例。

照片通常適合使用有失真壓縮（取決於編碼器的配置）。這使得 JPEG 和 WebP 成為照片的理想選擇，JPEG 相容性更高，但 WebP 可能提供更好的壓縮效果。為了最大程度地提高質量並減少下載時間，請考慮同時提供 使用備用方案，將 WebP 作為首選，JPEG 作為第二選擇。否則，JPEG 是相容性的安全選擇。

對於較小的影像（如圖示），請使用無損格式以避免在尺寸受限的影像中丟失細節。雖然無損 WebP 非常適合此目的，但支援還不夠廣泛，因此除非您提供 備用方案，否則 PNG 是更好的選擇。如果您的影像包含少於 256 種顏色，則 GIF 也是一種選擇，儘管 PNG 通常使用其索引壓縮選項 (PNG-8) 壓縮得更小。

如果可以使用向量圖形表示圖示，請考慮使用 SVG，因為它可以跨各種解析度和尺寸進行縮放，非常適合響應式設計。儘管 SVG 支援良好，但可能值得為舊版瀏覽器提供 PNG 備用方案。

除非您願意在質量上做出妥協，否則您應該對螢幕截圖使用無損格式。如果您的螢幕截圖中包含任何文字，這一點尤為重要，因為文字在有失真壓縮下很容易變得模糊不清。

PNG 可能是您的最佳選擇，但無損 WebP 可能會壓縮得更好。

對於可以使用向量圖形表示的任何影像，SVG 是最佳選擇。否則，應使用無損格式，如 PNG。如果您確實選擇了有損格式，例如 JPEG 或有損 WebP，請仔細權衡壓縮級別，避免導致文字或其他形狀變得模糊不清。

雖然標準 HTML <img> 元素不支援影像的相容性回退，但 <picture> 元素支援。<picture> 用作多個 <source> 元素的包裝器，每個元素指定不同格式或在不同 媒體條件 下的影像版本，以及一個 <img> 元素，該元素定義在何處顯示影像以及回退到預設版本或“最相容”版本。

例如，如果您要顯示最適合使用 SVG 顯示的圖表，但希望提供 PNG 或 GIF 圖表的回退，您可以執行以下操作

<picture>
  <source srcset="diagram.svg" type="image/svg+xml" />
  <source srcset="diagram.png" type="image/png" />
  <img
    src="diagram.gif"
    width="620"
    height="540"
    alt="Diagram showing the data channels" />
</picture>

您可以根據需要指定任意數量的 <source>，但通常 2 或 3 就足夠了。

• 媒體型別和格式指南
• Web 媒體技術
• 網路上使用的影片編解碼器指南
• HTML HTML <img> 和 <picture> 元素
• CSS background-image 屬性
• Image() 建構函式和 HTMLImageElement 介面