壓縮網站圖片大小,加快網站速度

Jack Chan電腦科技Leave a Comment

加快網站的速度尤也重要。慢的網站不僅影響用戶體驗,更會影響搜尋器上的排名。在這裡簡單分享一個在 server side 批量壓縮圖片的方法。

在壓縮前,先看看現在網站的整體大小。

https://tools.pingdom.com
Screen Shot 2018-05-17 at 11.27.41 PM.png

Screen Shot 2018-05-17 at 11.28.10 PM.png

從上面的表中可以看到圖片佔了很大的空間,有 7.6 MB。我示範一下如何把整個網站的圖片都批量壓縮。

在這裡我們需要兩個工具,imagemagick 與 jpegoptim,我們可以用 apt-get install 安裝。在 Google Compute Engine 裡,開啟 Terminal,然後運行以下 command

sudo apt-get install imagemagick
sudo apt-get install jpegoptim

Screen Shot 2018-05-17 at 11.20.20 PM.png

安裝成功後,到你的網站圖片目錄。我是用 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 了

[email protected]:/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%

Screen Shot 2018-05-17 at 11.55.58 PM.png

在網站的外觀沒有可觀察到的改變情況下,已經把 image size 降到只有 3.7 MB 了

Screen Shot 2018-05-18 at 12.04.51 AM.png

SaveSave

SaveSave

Leave a Reply

Your email address will not be published. Required fields are marked *