Compress images to improve the website performance

Compress images to improve the website performance

Date
May 18, 2018
Tags
FE Development
加快網站的速度尤其重要。慢的網站不僅影響用戶體驗,更會影響搜尋器上的排名。在這裡簡單分享一個在 server side 批量壓縮圖片的方法。
在壓縮前,先看看現在網站的整體大小。
notion image
notion image
從上面的表中可以看到圖片佔了很大的空間,有 7.6 MB。我示範一下如何把整個網站的圖片都批量壓縮。
在這裡我們需要兩個工具,imagemagick 與 jpegoptim,我們可以用 apt-get install 安裝。在 Google Compute Engine 裡,開啟 Terminal,然後運行以下 command
sudo apt-get install imagemagick sudo apt-get install jpegoptim
 
notion image
安裝成功後,到你的網站圖片目錄。我是用 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%
notion image
在網站的外觀沒有可觀察到的改變情況下,已經把 image size 降到只有 3.7 MB 了
notion image