部落格

截圖檔除了像素還帶著什麼

作者 InSnap · 發佈於 · screenshot, colour profile, icc, png metadata, display p3

截圖檔除了像素還帶著什麼

截圖不只是圖片。它還帶著色彩設定檔、DPI 數值與像素網格。本文說明這三者各自的作用、怎麼檢查,以及什麼時候真的會影響到你。

談到截圖,大家通常只講尺寸:寬 1920、高 1080、2.1 MB。但那只是檔案裡存放的其中一項資訊。在畫面之下,每一張截圖還帶著像素網格、DPI 數值,而在近代的 Mac 或廣色域的 Windows 筆電上,還有一份色彩設定檔。這些都不會改變圖片本身的內容,卻都會影響它在別的地方被呈現出來的樣子。

圍繞截圖的大多數困惑——「在這台看起來不一樣」、「貼上去怎麼變小了」、「顏色跑掉了」——都來自這三者之一,而不是像素本身。

像素網格最先

每一張截圖都有固定的像素寬高,檔案搬到哪裡這個數字都不會變。會變的是它被畫出來的縮放比例。

在 Retina Mac 上,版面以點(point)計算,卻用兩倍的像素數繪製,所以 400 × 300 點的選取範圍會存成 800 × 600 像素的圖片。Windows 在 150% 縮放下是同樣的道理:1920 × 1080 的版面會以 2880 × 1620 個實體像素擷取。這不是「太大」,它有的就是螢幕當時實際的像素數。

實用的原則是:在下任何「哪裡不對」的結論之前,先確認真正的像素數。在 Finder 裡選取檔案按 Command-I;Windows 上開啟「內容」。如果圖片大約是你預期的兩倍,那就是高密度擷取,真有問題也出在後續環節。

放大檢視擷取畫面,可以看出細節是真的還是重取樣來的

DPI 數值,以及它為什麼通常是假的

像素之外,檔案還會存一個解析度數值,通常是 72 或 144 DPI。這是中繼資料,不是設定值。它告訴程式:「如果你得把這張圖印出來、或排進版面,就假設每英吋有這麼多點。」

幾乎沒有螢幕上的應用程式會用它來決定顯示大小,但還是有少數會。排版軟體、Word、Keynote 以及部分 PDF 匯出工具會讀這個值,並據此縮放圖片。這就是為什麼同一個 PNG 貼到某個地方大小剛好、貼到另一個地方卻變成兩倍——像素完全沒動,變的只是接收端程式選擇相信的那個數字。

macOS 內建的截圖工具不論螢幕規格,一律寫入 72 DPI,多數擷取軟體也一樣,包括 InSnap。所以 Retina 截圖送出去時,是一張大圖配上一個很普通的 DPI 數值。正因為這樣,會理會 DPI 的簡報軟體才會把它顯示成兩倍大:它看到「每英吋 72 點」,然後拿實際像素數去做算術。

色彩設定檔,最常被忽略的一環

這一項,在它出問題之前你根本看不到。

在廣色域螢幕上——配備 P3 面板的 Mac,或廣色域螢幕的 Windows 筆電——系統不會把顏色當成單純的 sRGB 儲存。它會以 Display P3 色域編碼儲存,並在檔案裡附上一份 ICC 色彩設定檔,說明用的是哪個色域。會讀設定檔的程式能換算回你看到的樣子;忽略設定檔的程式則直接讀原始數值,顯示出來就會有點不一樣。

差多少取決於顏色。中性灰幾乎不動,因為白色和黑色在兩個色域裡是同一個點。飽和色就差得多了:某個飽和的藍色,單一色版就可能偏移超過 255 之中的 50。

同一個顏色,存一次、用三種方式看

如果把截圖放進一個不會把設定檔帶過去的程式——重新儲存時丟掉設定檔的編輯器、某些網頁上傳工具、某些聊天軟體——檔案的像素沒變,卻失去了「該怎麼讀它」的說明。之後每一個檢視器都會把它當成 sRGB,顏色就此走樣。

設定檔被忽略時,飽和的色相偏得最多

編輯後重新儲存,實際上做了什麼

編輯截圖再另存,正是設定檔悄悄消失的地方。很多工具會解碼圖片、把中繼資料丟掉,只寫回純像素的另一個檔案。在工具裡看,圖片一模一樣;拿到別的地方打開,顏色就是不太對。

檢查方法和上面一樣:編輯前後各看一次,檔案裡還留不留著內嵌的設定檔。在 Mac 上,可以在「預覽程式」的「工具 › 顯示檢閱器」看到 ICC 色彩設定檔這一行。如果編輯前寫的是「sRGB IEC61966-2.1」、編輯後也是「sRGB IEC61966-2.1」,那就沒事;如果編輯前是「Display P3」、編輯後變空白,那就是工具把它丟掉了。

編輯後重新儲存,對檔案究竟改了什麼

如果工具可以自己挑,優先選會保留設定檔的。如果不能挑,變通做法是從本身已經帶著設定檔的來源匯出,並且除非必要,避免把圖片在會壓縮、或會剝掉設定檔的編輯器裡來回轉存。

三者之中,哪一個才重要

中繼資料什麼時候重要什麼時候不重要
像素尺寸永遠;它就是圖片的定義從不——它不會變
DPI 數值排進版面、Word、PDF在螢幕上檢視、上傳
色彩設定檔廣色域螢幕、色彩校閱、設計交付平面 UI 截圖、黑白文字

如果是回報 bug、分享一段程式碼、或只是聊天用的截圖,只有像素數重要。如果是設計校閱,或要在不同機器之間做對色彩敏感的比對,設定檔比檔案的其他任何屬性都重要。

InSnap 如何處理這三項

InSnap 擷取的是真實的裝置像素,所以在 Retina 螢幕上,400 × 300 點的選取範圍會以螢幕實際的像素數存下來。它在擷取當下就把畫面轉成 sRGB,所以你存下來的像素,就是你在這台螢幕上看到的顏色,每一個檢視器也會用同樣的方式解讀。這裡沒有另外的「轉換為 sRGB」開關,因為沒有東西需要轉換:檔案本來就是 sRGB。

拖曳框選時,選取範圍的標籤顯示的是實體像素尺寸,所以在複製或儲存之前,你就看得到真正的像素數。如果之後想要一份較小、方便排版的副本,設定 › 儲存 裡有「Retina 縮放至 1x」選項,會在寫檔時乾淨地調整尺寸。

以原始尺寸複製,檔案才不會說謊

常見問題

為什麼同一張截圖在兩個程式裡看起來不一樣?

通常是其中一個程式會讀取內嵌的色彩設定檔,另一個忽略它。如果檔案帶著 Display P3 設定檔,而檢視器不換算就直接當成 sRGB 處理,飽和色看起來就會不一樣;平坦的白、黑、灰區域則不受影響。

調整截圖大小會破壞色彩設定檔嗎?

本身不會。多數縮放工具只要會把設定檔帶過去,就能保留它。真正壞掉的情況,是工具在儲存時把中繼資料整個剝掉,這在簡單的編輯器和某些網頁上傳工具上很常見。編輯前後各看一次「預覽程式」或任何檢閱器裡的 ICC 色彩設定檔那一行。

為什麼 Retina 截圖貼進簡報會變成兩倍大?

這個檔案的像素數是 2x 螢幕的真實像素,面積大約是點數的四倍。有些排版工具會讀 DPI 中繼資料把它縮小,很多則不會。用 InSnap 的「Retina 縮放至 1x」匯出,就能得到這些工具要的 1x 副本。

帶 P3 設定檔的 PNG 會比同一張 sRGB PNG 更大嗎?

稍微大一點。ICC 色彩設定檔會多佔幾 KB。像素資料本身通常一樣大,因為 PNG 對兩者的壓縮效果相近。這點差距不是把設定檔剝掉的理由。

截圖該存成 sRGB,還是螢幕的廣色域?

如果要交給別人,sRGB 是最安全的答案:在任何理會它的螢幕上看起來都一樣。如果你是在自己校準過的螢幕上檢視顏色,並與另一台同樣是廣色域的螢幕比對,那就保留擷取當下的設定檔。只要是要跟團隊共用、或寄給客戶的,就用 sRGB。

下一張截圖,只要一個快速鍵。

macOS 14.4+(Apple 晶片與 Intel)· Windows 10+(64 位元)