公司換了新的 Mac Book Pro，是有搭配 Retina 螢幕的，

看起來是變清晰了沒錯，但很快的就遇到了問題：

螢幕截圖的時候，截出來的圖長寬都會變兩倍大？？

 

先瞄一下 Retina 螢幕是如何運作的… 有興趣的人也可以參考一下：

How Does The Apple Retina Display Work?

Apple 認為人眼在 10~12 吋 (25~30 cm) 的距離下，

大約只能分辦出 300 PPI (pixels per inch)，

因此如果在同樣大小的螢幕裡，塞入更多的像素 (pixel)，

讓 PPI 超過 300 的話，一般人是看不出像素的顆粒的～

這個值與視角和觀看距離都有關係，因此同樣是 Retina 螢幕，

Mac Book Pro 13″ 只有 227 PPI，但 iPhone 是 326 PPI～

 

那這件事和我螢幕截圖後，長寬變兩倍有什麼關係呢？

在 Retina 螢幕下抓一個視窗的圖，再用 sips 看一下屬性，

注意到它的長寬各是 972×462 (原本預期是 486×231)，且 DPI 是 144，

但正常的網頁圖片的 DPI 應該是 72：

testuser@localhost ~/Desktop $ sips -g all ScreenShot*.png

/Users/testuser/Desktop/ScreenShot_20170516_134036.png
  pixelWidth: 972
  pixelHeight: 462
  dpiWidth: 144.000
  dpiHeight: 144.000

 

目前個人 (可能不正確) 的理解是，

Apple 為了能在 Retina 螢幕上，以高解析度的方式呈現截圖，

因此以兩倍 DPI 的方式儲存像素 (在同樣的寬度下，原本存一個像素變成存兩個像素)

而為了在 PNG 中儲存這長寬各多一倍的像素量 ，

只好把圖片長寬都加大一倍，才有辦法容納多出來的一倍像素量。

 

Apple 在看到這種 DPI 144 的圖片時，

就會自動把多出一倍的像素量，塞到 Retina 螢幕上，

但若是一般 DPI 72 的圖片，沒有多出來的像素可以塞，

所以比較類似插點的方式 (interpolation)，

因此一般的圖片在 Retina 螢幕上看起來會有點糊糊的…

(以上是個人理解，若有錯歡迎指正 ^^)

 

但因為圖都變大兩倍，顯示在網頁上會變得很怪，

因此還是希望在 Retina 螢幕上截圖時，會是原本的「正常」大小～

上網找了找，發現已經有人寫了工具 resample-dpi.sh，

它可以幫忙檢查指定的圖片，如果 DPI 不是 72 的話，

就會自動調整圖片大小與 DPI，讓它回復 DPI 72 的正常大小～

 

例如當你想把桌面下所有的 PNG 檔都檢查一次的話，就這麼做：

testuser@localhost ~ $ resample-dpi.sh ~/Desktop/*.png

File ScreenShot_20170514_012107.png already 1440x900 pixels @ 72 DPI.
Resampling ScreenShot_20170516_134036.png to 486x231 pixels @ 72 DPI.

 

像原本是 DPI 144 的圖，修改之後，DPI 和圖片長寬都縮小了：

/Users/testuser/Desktop/ScreenShot_20170516_134036.png
  pixelWidth: 486
  pixelHeight: 231
  dpiWidth: 72.000
  dpiHeight: 72.000

 

像我的話則是將這支檔案整合到 Mac 的 Folder Action 裡面，

當有截圖檔出現在桌面上時，就自動執行 resample-dpi.sh 去處理圖片：

import os
import subprocess

ROOT_FOLDER = os.path.expanduser("~/Desktop")

def resample_dpi(file_path):
    subprocess.call(["/bin/sh", "/usr/local/bin/resample-dpi.sh", file_path])

for file_name in os.listdir(ROOT_FOLDER):
    if file_name.startswith("Screen Shot ") or file_name.endswith("screencapture.png") or file_name.endswith("screensave.png"):
        file_path = os.path.join(ROOT_FOLDER, file_name)
        resample_dpi(file_path)

 

不過這樣自動處理過的圖片，在 Retina 螢幕上看起來就是會稍微有點不清楚，

這似乎是沒辦法的囉…

 

參考資料：

Fixing “Retina” Image Scaling with Gyazo