加快網站的速度尤其重要。慢的網站不僅影響用戶體驗,更會影響搜尋器上的排名。在這裡簡單分享一個在 server side 批量壓縮圖片的方法。
在壓縮前,先看看現在網站的整體大小。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fafe4497b-2065-448f-94e6-b46478b00702%2FUntitled.png?table=block&id=6c4abecf-9c3d-48b4-b8dd-2d364276bf6a&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffeac6797-f920-4dd1-85ae-c7d077536c66%2FUntitled.png?table=block&id=000f1736-19c1-413c-8924-e8296f859ba6&cache=v2)
從上面的表中可以看到圖片佔了很大的空間,有 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](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8b05a618-8633-4083-ba07-3b84af2f6d09%2FUntitled.png?table=block&id=232b90ba-5f2b-4021-a9da-f19e0f9aa5d0&cache=v2)
安裝成功後,到你的網站圖片目錄。我是用 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](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fca142331-0727-46bc-ad6b-79263186576d%2FUntitled.png?table=block&id=5bb2fc72-d629-4bff-a5f1-8eff7dec481f&cache=v2)
在網站的外觀沒有可觀察到的改變情況下,已經把 image size 降到只有 3.7 MB 了
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd7f2851e-159d-43f9-8cb9-7cca8a3e4c7e%2FUntitled.png?table=block&id=99be18c8-ed71-44cc-be3d-ac5a5a71b326&cache=v2)