每一種圖片格式，都是在檔案大小、畫質，以及透明、動畫這些特性之間做取捨。選錯了，你就會得到臃腫的檔案、模糊的文字，或者根本顯示不出來的圖形。下面用大白話講清每一種常見格式，最後附一張你可以隨手儲存的對比表。
兩大家族
在講各個格式之前，有一個區分能解釋它們中的大多數：
- 點陣圖（柵格） 是畫素組成的網格。照片就是點陣圖，放大到一定程度你就會看見一個個方塊。PNG、JPG、WebP、AVIF、GIF 全是點陣圖。
- 向量 是數學——由座標定義的線條、曲線和形狀。它們可以縮放到任意大小而不模糊。SVG 就是網頁上的向量格式。
另一個關鍵概念是有損與無損。有損格式（JPG，通常還有 AVIF/WebP）丟掉一些細節來縮小檔案；無損格式（PNG、GIF、無損 WebP）則原封不動保留每一個畫素。
逐個來看
JPG（JPEG）——照片的主力。有損、小巧，而且真的到處都能讀。不支援透明，也不支援動畫。反覆重新儲存會讓它慢慢掉質。用於照片，以及任何需要最大相容性的地方。
PNG——無損，支援透明。截圖、logo、圖示、示意圖的正確選擇——凡是帶文字或硬邊緣的都用它。照片存 PNG 會很大，所以別拿它存照片。
WebP——一種現代格式，兩件活都能幹：有損模式在體積上勝過 JPG（小約 25–35%），無損模式支援透明且體積緊湊。它還能做動畫。如今瀏覽器全面支援。網頁的理想選擇；郵件或老軟體則差些。
AVIF——這裡最新、壓得最狠的格式，同等質量下大約只有 JPEG 一半大，還支援透明和 HDR。瀏覽器能很好地顯示它，卻無法可靠地從 canvas 編碼它——所以你在瀏覽器工具裡請求 AVIF 時，它會回退到 WebP。真正的 AVIF 編碼需要伺服器或原生軟體。
GIF——老格式，限制在 256 色，但它是簡單動畫的經典之選。只要超出一小段迴圈，WebP（或影片）都更小更清晰。做小小的動畫圖示還行；存照片就很差。
SVG——向量，所以能無限縮放而不模糊，簡單圖形的體積極小。logo、圖示、插畫的完美選擇。它是程式碼而非畫素，所以無法表現照片。
對比表
| 格式 | 型別 | 壓縮 | 透明 | 動畫 | 最適合 |
|---|---|---|---|---|---|
| JPG | 點陣圖 | 有損 | 不支援 | 不支援 | 照片、最大相容 |
| PNG | 點陣圖 | 無損 | 支援 | 不支援 | 截圖、logo、文字 |
| WebP | 點陣圖 | 都支援 | 支援 | 支援 | 網頁圖片、小且帶透明 |
| AVIF | 點陣圖 | 有損/無損 | 支援 | 支援 | 極致壓縮（伺服器端） |
| GIF | 點陣圖 | 無損 | 僅 1 位 | 支援 | 簡單動畫 |
| SVG | 向量 | 不適用 | 支援 | 支援（配 CSS/JS） | logo、圖示、插畫 |
如何快速選擇
- 照片？ 要相容用 JPG，給網頁用 WebP。
- 截圖、logo 或文字？ PNG（點陣圖）或 SVG（如果是真正的向量圖）。
- 需要透明？ PNG、WebP、AVIF 或 SVG——絕不用 JPG。
- 動畫？ 要質量和體積用 WebP，只有為相容老平台才用 GIF。
- 釋出到網站？ WebP 通常是聰明的預設選擇。
在它們之間轉換
拿到了不合適的格式，你不用上傳任何東西就能解決。圖片格式轉換工具在你的瀏覽器裡用 Canvas 在 PNG、JPG、WebP 之間切換——無需註冊、什麼都不傳輸，首次訪問後離線也能用。它支援批次處理，而如果你請求 AVIF，它會回退到 WebP（比 JPG/PNG 小、到處都支援），因為瀏覽器無法可靠地編碼 AVIF。
把上面這張表記在心裡，選格式就不再靠猜：先按內容匹配格式（照片還是圖形），再按去處匹配（網頁、郵件、列印），你幾乎每次都能選對。