圖片瘦身重要性

手機相片檔案很大,直接放罝於網頁,會造成瀏覽頁面時速度變慢,進而影響網站效能。
 相機內的相片,如果有特別喜歡的就要保留原來檔案,勿於瘦身後刪除

常用的網頁圖片格式

 JPEG(.jpg):特別適合儲存照片和網頁圖像,相片通常是JPEG格式
 PNG(.png):PNG 格式的檔案通常比JPEG大,但可以提供更好的網頁圖片品質。
 WebP(.webp):WebP 格式的檔案通常比JPEG小,同時保持相對較高的網頁圖片品質。LINE 未支援 WebP😝

ImageMagick 安裝

ImageMagick 是圖片瘦身好幫手
 Windows 作業系統
 建立 D:\App資料夾,沒有D槽可參閱硬碟分割與調整
 前往 ImageMagick Windows Binary Release,下載 ImageMagick-7.1.1-21-portable-Q16-x64.zip(7.1.1-21是作者下載時的版本號碼), 可能要再安裝 Visual C++ Redistributable Package
 解壓縮至 D:\App\ImageMagick
 Arch Linux 作業系統

sudo pacman -S imagemagick

圖片瘦身方法

 以 jpg 轉換至 webp 為主,詳閱之後,你會發現稍加修改,各種格式的轉換都非常容易。而使用 Notepad++ 編輯指令,再貼至 cmdGit Bash 執行,更能輕鬆駕馭指令。
 開啟 cmd 或 Git Bash (底下操作,cmd、Git Bash 皆適用),可使用 FastStone Image Viewer 比較圖片瘦身前後的差異
 例如要轉換 D:\相簿\旅遊 內的全部相片,先切換至資料夾

cd "D:\相簿\旅遊"

 作者的手機相片影像大小 4096×2304(16:9)、解析度 72dpi,作者的 SONY 電視 KDL-42W700B 幕解析度 Full HD 1920×1080,1920÷4096=0.4688,因此於 cmd 或 Git Bash 貼上指令

"D:\App\ImageMagick\mogrify" -format jpg -resize 46.88% -quality 85 *.jpg

  小心,上面指令會覆蓋原來的 jpg 檔。將-format jpg改為-format webp後會生成 .webp,而原來 jpg 檔還在。因此若將上面指令的*.jpg改為*.webp就可以轉換 webp 成 jpg。
 -quality 85,圖片品質 85與100,人眼幾乎無法辨識兩者。解析度 72dpi,可使用參數 -density 改變。
 4K電視 幕解析度 3840×2160,是 Full HD 的寬、高各兩倍。1920近似值2000,所以3840就接近4000 - 4K

 有時侯資料夾內檔案太多或不要覆蓋原來的 jpg 檔,就先建立 D:\相簿\tmp 資料夾,生成檔案至此資料夾,指令改成(只多了-path D:/相簿/tmp/)

"D:\App\ImageMagick\mogrify" -path D:/相簿/tmp/ -format jpg -resize 46.88% -quality 85 *.jpg

 網頁圖片1920×1080似乎有些大,作者考慮 1120×630,1120÷1920=0.5833,所以轉換成 webp 的指令為

"D:\App\ImageMagick\mogrify" -format webp -resize 58.33% -quality 80 *.jpg

參考資料

 網頁設計常見問答
 像素與解析度
 Mogrify - ImageMagick – Command-line Tools
 ImageMagick 批次處理圖片
 Optimizing your Images for the Web
 ImageMagick – WebP Encoding Options
 什麼是4K電視