圖像格式講解：PNG、JPG、GIF、WebP、SVG

選對圖像格式，是讓頁面更快更清晰最簡單的辦法之一。選錯了，你會得到一個模糊的 logo，或一張比應有大小重五倍的照片。這裡講講每種常見格式各自擅長什麼，好讓你把格式和圖像對上號。

兩大家族

首先，一個能解釋其餘一切的區分。點陣（Raster） 格式（PNG、JPG、GIF、WebP）存的是一格格像素，所以放大時會模糊或出現馬賽克。向量（Vector） 格式（SVG）把形狀存成數學，所以在任何尺寸都保持刀鋒般清晰。照片總是點陣；logo 和圖示最好用向量。

各種格式

JPG / JPEG

為 照片 而生的有損壓縮。對照片內容體積出色、到處都支援，但不支援透明，過度壓縮會出現可見的偽影。在 WebP 不可用時，它是照片的預設選擇。

PNG

無損，帶 透明。對 logo、圖示、截圖，以及任何有銳利邊緣、文字或平塗色塊的東西都完美。因為無損，存成 PNG 的照片體積會很大。

GIF

一種限於 256 色 的老格式，如今幾乎只用於簡單的 動畫。對靜態圖它被 PNG 完勝；對動畫，現代格式（動畫 WebP 或影片）更小、品質更高。

WebP

一種樣樣都行的現代格式：有損或無損，帶透明和動畫。在相同視覺品質下，它通常產生比 JPG 或 PNG 小 25~35% 的檔案，而且每個現行瀏覽器都支援。對今天大多數網頁圖像，WebP 是最好的預設。

SVG

以 XML 定義的向量圖形。對 logo、圖示和插畫 理想 —— 可無限縮放、簡單形狀極小，還能用 CSS 定製樣式。不適合照片。

快速決策指南

• 照片 → WebP（或為最大相容性用 JPG）
• logo 或圖示 → SVG（若需要點陣副本則 PNG）
• 帶文字的截圖或圖形 → PNG（或 WebP）
• 需要透明 → PNG、WebP 或 SVG
• 簡單動畫 → 動畫 WebP

選好格式後，我們的 圖像壓縮指南 講了怎麼把體積降下來。用 SVG 轉換器 和 圖像縮放器 在格式間轉換，用 圖像壓縮器 縮小檔案 —— 全在你的瀏覽器裡。