Engineering · 1 min read
一張圖不只是像素網格
一個圖檔同時帶著好幾個彼此獨立的維度：影格數、透明度、調色盤、有損無損、位元深度、隱藏 metadata——不只是一張像素網格。
「圖片就是一張畫面」這個直覺，一碰到真實檔案就破。一個圖檔同時帶著好幾個彼此獨立的維度，每個維度都有一個專門打臉天真假設的格式：
| 維度 | 天真假設 | 真實 / 會打臉的格式 |
|---|---|---|
| 影格數 | 只有一張靜態畫面 | GIF／animated WebP／APNG／multi-page TIFF／PDF 都能裝多格（libvips 會把它們疊成一條 page-strip，見下方） |
| 透明度 | 不透明的矩形 | PNG／WebP／AVIF 有 alpha channel；JPEG 沒有（把透明 PNG 貼到 JPEG 上會變成黑底或白底） |
| 色彩儲存 | 每個像素都是完整 RGB | GIF／PNG-8 用索引調色盤（≤256 色）；照片會嚴重色階斷裂 |
| 有損 vs 無損 | 像素是精準的 | JPEG 會丟像素來變小，反覆存檔會越存越糊（generation loss）；PNG 則逐像素保留 |
| 點陣 vs 向量 | 固定的像素網格 | SVG 是數學、不是像素，無限放大都不糊、沒有解析度 |
| 位元深度 | 8-bit／256 階 | 還有 16-bit 和 HDR；硬砍成 8-bit 會丟掉色調層次 |
| 隱藏 metadata | 只有像素 | EXIF 方向、ICC 色彩描述檔、GIF 每格 delay，刪錯一個圖片就轉向、偏色，或掉了動畫節奏 |
重點： 處理前先問一句「這張檔案用到哪些維度」：影格、alpha、調色盤、色彩描述檔。這也是為什麼 libvips 把 Pages()、PageHeight()、色彩空間、metadata 分開來給你，因為像素網格只是其中一層。
像素網格只是一張圖的其中一層，不是全部。
參考來源：
Related： libvips 怎麼把這些影格疊成 page-strip，見 libvips 把動圖存成一條上下疊起來的長條，並搭配圖片格式速查表一起看，或回到裁切、縮放、填滿的四堂課總覽。