圖片轉檔

三種格式怎麼選

PNG 是無損格式。每個像素都會原封不動地還原，支援完整的 Alpha 透明度，並能極有效地壓縮大片純色區域。因此它適合截圖、圖表、Logo、線稿、任何含有文字的圖片，以及需要透明背景的圖片。但它不適合照片，因為無損壓縮在照片中能去除的東西很少，檔案往往會比實際需要的大上好幾倍。

JPG 是有損格式，專為照片設計。它會捨棄人眼不容易察覺的細節，尤其是細微的色彩變化，在連續色調的圖片上能大幅縮小檔案。它完全不支援透明，對銳利邊緣的處理也很差：存成 JPG 的文字與線稿會出現明顯的邊緣雜訊，任何畫質設定都無法完全消除。

WebP 兩者都能勝任。在相近畫質下，有損 WebP 通常比 JPG 小 25-35%，無損 WebP 比 PNG 小約四分之一，而且不同於 JPG，它支援透明。現在所有瀏覽器都已支援，仍然選擇 JPG 的主要理由，只剩某些舊的桌面軟體與印刷流程還不接受 WebP。

畫質滑桿實際上做了什麼

JPG 與有損 WebP 的運作方式，是先把圖片分成區塊進行轉換，再將結果量化：粗略的結構精確保留，細部則近似保留。畫質數值控制的是這個捨入的激進程度。它不是任何東西的百分比，而且同一個數字在不同編碼器中意義也不同。

實際上有用的範圍很窄。超過約 90 之後，檔案會為了幾乎沒有人看得出的差異而快速變大；低於約 60 則瑕疵會變得明顯：天空這類平滑漸層出現色塊，銳利邊緣周圍出現振鈴。網頁照片通常以 75 到 85 之間為最佳平衡點，正確的選擇方式是以原尺寸比較輸出與原圖，而不是相信那個數字。

另一件該知道的事是世代損失。每次有損重新編碼都會再丟掉一點資訊，而且損失會累積：一張 JPG 開啟、稍微編輯、再存檔，重複十次後就會明顯劣化。請永遠從原始檔重新編碼，而不是從上一次匯出的檔案；如果圖片之後還會修改，請保留一份無損的母檔。

重新編碼會丟掉什麼

轉換會先把圖片解碼成像素，再用這些像素寫出新檔案，所以凡是屬於中繼資料而非影像資料的內容都會被捨棄：EXIF，包括相機型號、鏡頭、拍攝時間與 GPS 座標；IPTC 說明文字與著作權欄位；縮圖；以及原始軟體附加的任何編輯紀錄。

這通常是好事。手機直接拍出來的照片往往帶有拍攝地點的精確座標，公開發布前先移除，是很合理的習慣。但如果你需要著作權欄位或拍攝日期，這就是壞事了，所以兩者若有任一很重要，請保留原始檔。

有一種情況需要留意。方向標記會在重新編碼前讀取並套用，所以在某些檢視器中顯示為橫躺的直式照片，輸出後會真正轉正。但內嵌的 ICC 色彩設定檔無法保留，採用 Display P3 等廣色域色彩空間的照片，被當作 sRGB 處理時顏色會稍微偏移。一般網頁圖片看不出差別；對色彩要求嚴格的工作，請使用能管理色彩設定檔的工具轉換。

轉換做不到的事

轉成無損格式並不會修復任何東西。把 JPG 存成 PNG，會保留 JPG 原本就有的所有瑕疵，只是以不再進一步損失的方式，存進一個大得多的檔案。如果圖片經過嚴重壓縮，那些損傷已經留在像素裡了。

更換格式也不會縮小尺寸。一張 4000 像素的照片轉成 WebP 後仍然是 4000 像素寬；如果目標是讓網頁上的檔案變小，把它縮到實際顯示的大小，省下的空間遠比選擇任何格式都多。這兩個操作搭配得很好：先縮放，再編碼；而圖片縮放工具就是負責前半段的那一個。

JPEG 真正丟掉的東西

JPEG 以八乘八像素的區塊為單位運作。每個區塊經過離散餘弦轉換，變成一組頻率係數，其中一個描述平均色調，其餘描述逐漸細緻的細節，接著這些係數會除以一張量化表並四捨五入。高頻係數通常會被捨入成零，而一長串的零壓縮效果極好。這個捨入就是所謂的失真。

在這一切之前，影像會先從 RGB 轉換成一個亮度通道與兩個色彩通道，而色彩通道通常會在兩個方向上各以一半的解析度儲存。這就是色度次取樣，寫作 4:2:0，它利用的是人眼辨識亮度細節的能力遠優於辨識色彩細節這一點。

這兩個步驟就足以解釋所有瑕疵。平滑天空中出現的區塊感，是太多係數被捨入成零之後，八乘八的格線浮現出來。白底紅字邊緣出現的彩色暈邊，則來自色度次取樣：邊緣在亮度上很銳利，在色彩上卻是模糊的。任何品質設定都無法完全消除這種暈邊，這也是文字適合交給 PNG 或 WebP 的原因。

這三種以外的格式

AVIF 衍生自 AV1 視訊編碼器，在中低品質下的壓縮效果明顯優於 WebP，支援廣色域與透明度，目前所有主流瀏覽器都已支援。它的編碼速度較慢，而且品質壓得很低時，AVIF 會把細節抹成一種蠟質的平滑感，而不是出現方塊，有些人認為這比同等的 JPEG 更難看。

HEIC 是現代 iPhone 預設產生的格式。它效率很高，但受專利限制且瀏覽器不支援，因此手機拍的照片常常必須先轉檔才能放上網站。SVG 則根本不是點陣格式：它是描述圖形的標記語言，這讓它非常適合任何尺寸的標誌與圖示，卻完全不適合照片。

GIF 至今仍在，只有一個原因：慣性。它只有 256 色，沒有堪用的 alpha 通道，做動畫時檔案大小是同等影片的好幾倍。一個 MP4 或 WebM 能以極小的體積完成同樣的工作。

在網頁上提供圖片

格式的選擇不如提供正確尺寸來得重要。一張 4000 像素寬的照片顯示在 600 像素寬的欄位裡，無論用什麼編碼器，大部分位元組都白費了。srcset 屬性讓瀏覽器可以從數種寬度中挑選，而 sizes 則告訴它圖片實際會被算繪成多寬，兩者搭配通常比任何重新編碼省下更多。

picture 元素更進一步，可以同時提供不同格式，讓瀏覽器能用 AVIF 就用 AVIF，不行就用 WebP，最後保底用 JPEG。手動產生這些排列組合很繁瑣，交給圖片 CDN 或框架的圖片元件去生成即可。

有兩個屬性值得在每張圖片上都設定：明確的 width 與 height，讓瀏覽器預留空間，頁面就不會在圖片載入時跳動；以及在首屏以下的圖片加上 loading=lazy。最先看到的那張圖片不該設為 lazy，因為延後載入會直接讓最大內容繪製的表現變差。

色彩描述檔、透明度與印刷

ICC 描述檔告訴檢視程式該如何解讀檔案裡的數值。現代手機拍的照片常標記為 Display P3，一旦這個標記遺失，同樣的數值就會被當成 sRGB 來讀，於是每一個飽和色都會偏掉。這項轉換會先解碼成像素再寫出一個新檔案，所以描述檔不會被保留下來，對一般網頁圖片沒什麼問題，但對色彩要求嚴格的工作就不行。

透明度也有類似的落差。把帶有 alpha 通道的 PNG 轉成 JPEG 時，影像會被合成到一個背景之上，常見的結果是在消鋸齒邊緣周圍出現一圈黑色或白色的光暈。WebP 與 AVIF 會保留該通道，因此在需要透明度時，它們才是正確的目標格式。

印刷則是另一條完全不同的流程。螢幕是加色的 RGB，印刷機是減色的 CMYK，轉換結果取決於油墨、紙張與印刷機描述檔，而螢幕上鮮豔的顏色往往根本沒有可印出的對應色。瀏覽器工具顯示的任何 CMYK 數值都只是近似值，可以拿來抓個大概，不能當成打樣依據。

中繼資料、隱私與來源

一張照片承載的遠不只是像素。EXIF 會記錄相機與鏡頭、曝光設定、日期時間，往往還有拍攝地點的 GPS 座標。社群平台通常會在上傳時清掉這些資料，但用電子郵件寄出的檔案、附在工單上的檔案，或是上傳到自家網站的檔案，多半都還留著。

清除中繼資料是任何重新編碼的預設行為，包括這一次的轉換在內。多數情況下這對隱私是好事，但當版權、圖說或拍攝日期很重要時就成了麻煩。如果這些資訊屬於必須保存的紀錄，請保留原始檔，並把轉換後的副本視為衍生品。

有一個欄位值得刻意保留：方向。相機是把旋轉存成一個旗標，而不是真的把像素轉過來，所以一張直式照片在忽略該旗標的軟體裡可能會顯示成橫躺的。像這裡一樣，在重新編碼之前就先把旋轉套用上去，正是轉換後的檔案能在任何地方都正確顯示的原因。