一、錯誤的誤會
我是這樣在 Markdown 中插入截屏圖片的：截屏到剪貼板後，直接在 Typora 中粘貼，iPic 將自動將圖片上傳到阿里雲圖牀（對象存儲）。我一直使用 Alfred 的 Clipboard History 功能查看截圖大小，發現圖片佔內存都很大，全屏截圖有 10 多 MB，就想着一定要找到一種方法來縮小截屏大小，不然我的阿里雲圖牀費用得嗖嗖漲。
昨天，我將截圖不保存到剪貼板，而直接保存到本地，發現圖片根本沒有 10 多 MB，就幾百 KB。想着我這個高分辨率超高清 Retain 全屏截圖 🐶 ，不能只有幾百 KB 呀 ，一定是我電腦顯示有問題。
最後我打開阿里雲對象存儲在線檢查了一下，發現真的只有幾百 KB，開始心裏默默對 Alfred ***。遂在 Alfred 論壇發討論帖，網友回覆說，對於剪貼板圖片來說，其數據格式是 TIFF 數據格式，不是圖片本身的內存大小，所以 Clipboard History 數據顯示較大。喔霍，原來是個錯誤的誤會呀。
雖然幾百 KB 相對 10 多 MB 是小多了，現在我這小博客無人問津，圖牀費用每月也就幾毛幾分錢，圖片大點也無所謂。但爲了長遠考慮，圖片當然越小越好。
正好搜到一篇關於壓縮圖片的優質教程，還包含視頻教程，簡單的方式就能實現自動壓縮圖片，那還等什麼，得趕快用起來。強烈推薦看原文，很通俗易懂。
二、圖片壓縮
2.1、壓縮時機
圖片壓縮有三個時間點，1、截屏時由截屏軟件壓縮；2、上傳到圖牀時由上傳軟件壓縮；2、上傳到圖牀後由圖牀壓縮。
下面要介紹的這種方式可以類似看作是第 1 條。
對於第 2 條，如果你使用 iPic，iPic 有提供可選的有損壓縮的功能，先壓縮再上傳，我大概測試了一下，一般能壓縮 60% 多吧（具體視情況而定）。但如果在 Typora 中複製，不支持壓縮，曲線救國的方式是先使用快捷鍵上傳，再在 Typora 中粘貼返回的 URL。個人覺得體驗有分裂，沒有截屏時就壓縮方便，所以才用第 1 種實現。
對於第 3 條，七牛雲對象存儲提供自動圖片壓縮功能，不過是收費功能。
2.2、壓縮原理
macOS 默認截屏生成圖片的格式爲 PNG，更準確的說，是 PNG-32，即每個像素點佔 32 位，每個像素點由 4 部分構成，分別是紅色（Red）、綠色（Green）、藍色（Blue）和透明度（Alpha (Transparency)）（簡寫 RGBA）。所以每種顏色有 2^8（256）個級別，所以圖片可以顯示 1600 萬種顏色（256 × 256 × 256, 2^24）。
截屏一般對顏色要求沒那麼高，顯示 1600 萬種顏色與 256 種顏色差別不大，截屏圖片基於調色板，可以利用工具將圖片顯示顏色更改爲 256 種，來實現壓縮圖片的功能。此時單位像素由 32 位變爲 8 位（4 個字節變爲 1 個字節），所以大約能壓縮 75% 的容量。
注意：除了 256，還可以選擇 128、64、24、16、8、4 等級別，原作者測試 64 跟 256 差不多。這裏我選擇了 256。
2.2、pngquant
pngquant 就是一個可以幾乎不損害圖片質量，通過減少像素大小來壓縮 PNG 圖片的命令行程序（庫），屬於有損壓縮。
# 使用 HomeBrew 安裝 pngquant
brew install pngquant
# 將 32 位的 RGBA PNG 數字轉換爲 8 位（或更小）的 RGBA 調色板
# pngquant [顏色數量] [參數] input.png
# --skip-if-larger 僅保存轉化後比原文件小的文件
# --strip 去除可選的元數據
# --ext=.png 設置壓縮後圖片名和原圖片名一樣
# --force 覆蓋原文件
pngquant 256 --skip-if-larger --strip --ext=.png --force example.png
當 pngqunt 壓縮後，還可以通過 zopfli 進一步無損壓縮，但耗時較長，壓縮比例也不高，我就沒做這步操作。
ImageAlpha 是一個集成 pngquant 的 macOS 客戶端，可以圖形化調整圖片顯示顏色數量。
2.4、壓縮效果
| PNG-32 (465KB) | 256 colors (117KB) |
|---|---|
 |
 |
壓縮效果：74.8%
2.5、自動壓縮
現在，只有在本地執行一個命令，就能將圖片壓縮了。可以將命令作爲一個腳本，交給工作流來自動執行，工作流可以選擇 Alfred 工作流（Workflow）、系統自帶的 Automator 和專業工作流軟件 Hazel（試用結束後軟件收費）。Alfred 工作流需要關鍵字或快捷鍵觸發，不符合我們自動壓縮的 feelstyle，pass。下面分別演示如何使用 Hazel 和 Automator。
Hazel 設置工作流：
- 添加指定文件夾，設置觸發條件，條件爲對文件夾中最近一分鐘新增的 PNG 文件執行腳本
- 設置腳本，腳本爲壓縮圖片，並複製壓縮後的圖片到剪貼板
- 通知壓縮完成
Automator 設置工作流：
- 添加 Folder Action，選擇指定文件夾，添加 Run Shell Script
- 設置腳本，將新加入圖片作爲參數，遍歷執行腳本
- 沒有通知功能
設置完成後，我們使用截圖工具（如： Xnip）將截圖保存到指定文件夾時，將會觸發工作流，完成自動壓縮。
| Hazel | Automator |
|---|---|
 |
 |
 |
 |
 |
- 使用 Automator，需在 Security & Privay（安全與隱私）-> Accessibility（輔助功能）裏面開啓權限。
相關命令：
pngquant 256 --skip-if-larger --strip --ext=.png --force "$1"
osascript -e "set the clipboard to (read (POSIX file \"$(perl -e "print glob('$1')")\") as {«class PNGf»})"
for f in "$@"
do
/usr/local/bin/pngquant 256 --skip-if-larger --strip --ext=.png --force "$f"
osascript -e "set the clipboard to (read (POSIX file \"$(perl -e "print glob('$f')")\") as {«class PNGf»})"
done
ps：Hazel 官方 UI 真心好看。/usr/local/bin/pngquan 與 pnguant 作用一樣。
三、像素與分辨率
上面一直說像素，所以深入瞭解一下。
像素（Pixel，簡寫 px）分爲物理像素和圖片像素。
物理像素是物理設備上顯示顏色的物理點。物理設備如電腦、手機、電視等。
- 以 MacBook Pro 2017 13.3-inch（後面簡稱 MacBook Pro）爲例，屏幕尺寸是 13.3 英寸，即屏幕斜對角長爲 13.3 英寸（1 英寸 = 2.54 cm）。（斜對角長約 34.0 cm，長約 28.8 cm，寬約 18.0 cm），像素個數爲 2560 × 1600，所以每個像素點的面積約爲 0.01125 cm × 0.01125 cm。
- iPhone XR，屏幕尺寸爲 6.06-inch。（斜對角長約 15.4 cm，長約 14 cm，寬約 6.5 cm），像素個數爲：1792 × 828，所以每個像素點的面積約爲 0.00785cm × 0.00785 cm。
我們可以看出，MacBook Rro 和 iPhone XR 屏幕的像素點爲正方形。
圖片像素是圖片中最小的單位。同樣大小的照片，包含的像素可能不同。小米 10 有一個顆 1 億像素的攝像頭，如果全輸出，拍出來的照片，包含像素個數爲 12032 × 9024 ，乘積結果爲 1.08 億。iPhone XR 是 1200 萬像素，照片像素爲 3024 × 4032。攝像頭一般說多少多少像素，對於屏幕，我們一般稱分辨率。
分辨率，也叫顯示分辨率（Display Resolution），分辨率指像素的總和，比如我們說 MacBook Pro 屏幕的分辨率是 2560 × 1600 px。分辨率和屏幕大小尺寸沒有關係，MacBook Pro 的分辨率是 2560 × 1600 px，一臺 75 英寸的 小米電視 5 的分辨率也才 3840 × 2160 px。小米電視 5 自稱是 4K，其實只是接近 4K，4K 的標準是橫向像素達到 4000。衡量屏幕顯示的是像素密度。
像素密度 ，英語爲 Pixel Density，也叫 Pixels Per Inch（PPI），即單位英寸像素的多少（個數）。計算公式爲 ppi = 像素/英寸。
- 以 MacBook Pro 2017 13.3-inch 爲例，ppi = √(2560^2 × 1600^2) / 13.3 ≈ 227，即斜對角每英寸有 227 個像素
- 以 iPhone XR 爲例，ppi = √(1792^2 × 828^2) / 6.06 ≈ 326
- 以 iPhone 11 PRO 爲例，ppi = √(2436^ × 1125^) / 5.8 ≈ 458
對於屏幕來說，ppi 越高，顯示就越清晰，就越不容易看見顆粒感。
3.1、像素的內存大小
上面那張截圖佔內存太小，找張佔內存大一點的分析。
| 未壓縮前 | 壓縮後 |
|---|---|
 |
 |
 |
 |
- 1KB = 1000 Bytes（字節）（十進制換算）；1KB = 1024 Bytes（二進制換算）
這張全屏壁紙截圖未壓縮前大小爲 2880 × 1800，所以有 5,184,000 個像素點，圖片內存爲 8.7 MB（8,738,825 bytes），有 69,910,600 位（bit），每個像素點約佔 13.5 位。
壓縮後分辨率不變，內存爲 2.8 MB，爲 23,488,102 位，每個像素點約佔 4.3 位。
可以看出，截屏圖片的像素沒有達到默認的 32 位，我認爲是圖片顏色沒有特別豐富，所以用不了 32 位表示。測試截顏色單一的屏幕，所需要的內存更低。個人認爲這跟 UTF-8 類似，像素點的大小爲可變，不常見的顏色更佔內存。
值得注意的是，雖然 MacBook Pro 的屏幕分辨率是 2560 × 1600 px，但系統默認做了一定縮放，縮放爲了 2880 × 1800 px，而屏幕顯示爲 1440 × 900 pt（point，1pt = 2px），即將 4 個像素壓縮爲 1 個像素顯示，來實現更好的顯示效果，這被稱爲 Retain 技術。所以在 macOS 中，瀏覽器前端樣式 1 px 對應 1 pt。
四、PNG vs JPEG(JPG)
PNG：Portable Network Graphics，便攜式網絡圖形。是一種支持無損壓縮的位圖圖形格式。PNG 更適合保存截屏。
無損壓縮一方面指壓縮後對圖片質量沒有損失，另一方面指壓縮後還可以還原（如壓縮包解壓）。PNG 圖片可以無損壓縮，但也可以有損壓縮，就像前面的 pngquant 一樣。
JPEG：Joint Photographic Experts Group，聯合圖像專家小組。一種用於有損壓縮的圖片格式。更適合保存照片。
有損壓縮的原理一般是變換數據編碼方法，變換編碼方法爲用不精確逼近和部分數據丟棄來表示內容。有損壓縮後不能還原。
- JPG：JPG 是 JPEG 圖片的一種文件後綴，可以認爲兩者沒有區別。ps：一個號稱可以無損壓縮 JPEG 圖片的網站：picdiect
五、結語
關於圖片大小的錯覺，來自一次我公衆號不能顯示文章圖片的經歷，那張圖片是我用 iPhone 拍攝的圖片，有幾 MB，這造成了我認爲蘋果設備圖片會很大的錯覺，所以認爲 Clipboard History 顯示截屏圖片大小就是正確的。我還通過將圖片上傳到阿里雲後，在線打開鏈接，複製圖片到剪貼板，再通過 Clipboard History 來查看圖片大小來驗證圖片是不是真的這麼大，這種錯誤的方式進一步加深了我認爲圖片確實很大的錯覺。汗顏。
友情提示：使用阿里雲對象儲存作爲圖牀時，建議設置防盜鏈，避免別人使用你圖片鏈接造成你圖牀費用大幅增加的問題。
這篇文章實現自動壓縮截屏用時不多，但爲了正確表述出「像素與分辨率」卻用時不少，而關於爲什麼 PNG 適合保存截圖，JPEG 適合保存照片，也還沒徹底搞懂，後面有機會再深入研究一下。
最後，如果你有更好的方法實現截屏壓縮，請一定留言告訴我。