加快網站的速度尤其重要。慢的網站不僅影響用戶體驗,更會影響搜尋器上的排名。在這裡簡單分享一個在 server side 批量壓縮圖片的方法。
在壓縮前,先看看現在網站的整體大小。
從上面的表中可以看到圖片佔了很大的空間,有 7.6 MB。我示範一下如何把整個網站的圖片都批量壓縮。
在這裡我們需要兩個工具,imagemagick 與 jpegoptim,我們可以用 apt-get install 安裝。在 Google Compute Engine 裡,開啟 Terminal,然後運行以下 command
sudo apt-get install imagemagick sudo apt-get install jpegoptim
安裝成功後,到你的網站圖片目錄。我是用 wordpress multisite, 所以路徑比較長。
/home/jackchan/apps/wordpress/htdocs/wp-content/uploads/sites/3
先把闊度大於 2000 px 的都 resize 到 2000 px
find . -type f -name "*.jpg" -exec mogrify -resize 2000">" {} \;
這句 command 就是把 find 到的檔案放進 {} 讓 mogrify execute, \; 代表每個找到的檔案只放進去一次
完成後查看一下,最闊的圖片都已被 resize 了
jackccy@wordpress-1-vm:/home/jackchan/apps/wordpress/htdocs/wp-content/uploads/sites/3$ find . -type f -name “FacebookCover.jpg” -exec file {} \; ./2017/03/FacebookCover.jpg: JPEG image data, JFIF standard 1.01, resolution (DPI), density 240×240, segment length 16, Exif Standard: [TIFF image data, big-endian, direntries=7, orientation=upper-left, xresolution=98, yresolution=106, resolutionunit=2, software=Adobe Photoshop CC 2017 (Macintosh), datetime=2017:02:25 21:40:56], baseline, precision 8, 2000×761, frames 3
第二步運行這個 command 把所有目錄下的圖片都再壓縮一下
find . -type f -name "*.jpg" | xargs jpegoptim -m 80 -t
從輸出的結果中可以看到大部份的圖片經已壓縮,整體平均壓縮率是 6.3%
在網站的外觀沒有可觀察到的改變情況下,已經把 image size 降到只有 3.7 MB 了