圖片瘦身重要性
手機相片檔案很大,直接放罝於網頁,會造成瀏覽頁面時速度變慢,進而影響網站效能。
相機內的相片,如果有特別喜歡的就要保留原來檔案,勿於瘦身後刪除。
常用的網頁圖片格式
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++ 編輯指令,再貼至 cmd 或 Git 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電視