最近在看 WordPress 網站載入速度慢的問題，

其中一個原因是有過多的 PNG 圖檔…

Google 在推的 WebP 圖檔現在已經被大部分的主流瀏覽器支援，

因此可以考慮把 PNG 圖檔都改成 WebP～

 

在 Mac 上要做轉換的話，要先安裝 WebP 套件：

brew install webp

 

接著就可以用 cwebp 指令來做轉換～

像下面的指令就是將 input.png 以 90% 的品質轉成 output.webp 檔：

cwebp input.png -q 90 -o output.webp

 

cwebp 指令本身沒有批次處理的功能，

因此要處理一堆檔案的話，得自己下 shell 指令，

像下面就是將目錄下所有的 .png 檔案，都轉成副檔名為 .webp 的 WebP 圖檔：

testuser@localhost ~ $ for f in *.png; do cwebp "$f" -q 90 -o "${f/png/webp}"; done

Saving file 'IMG_7763.webp'
File:      IMG_7763.png
Dimension: 1125 x 2001
Output:    75736 bytes Y-U-V-All-PSNR 53.20 60.75 63.22   54.68 dB
           (0.27 bpp)
block count:  intra4:       1324  (14.80%)
              intra16:      7622  (85.20%)
              skipped:      7344  (82.09%)
bytes used:  header:            600  (0.8%)
             mode-partition:   9382  (12.4%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       3%|      10%|      85%|    8946
      quantizer:  |      12 |      12 |      11 |       8 |
   filter level:  |       4 |       3 |       2 |       0 |

Saving file 'IMG_7764.webp'
File:      IMG_7764.png
Dimension: 1125 x 2001
Output:    68210 bytes Y-U-V-All-PSNR 53.16 59.43 60.67   54.49 dB
           (0.24 bpp)
block count:  intra4:       1542  (17.24%)
              intra16:      7404  (82.76%)
              skipped:      6964  (77.84%)
bytes used:  header:            613  (0.9%)
             mode-partition:   9630  (14.1%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       4%|      10%|      84%|    8946
      quantizer:  |      12 |      12 |      11 |       8 |
   filter level:  |       4 |       3 |       2 |       0 |

 

轉換之後的大小如何呢？

大約會是原本 PNG 圖檔的 8~25%，節省的頻寬會非常明顯：

-rw-r-----@ 1 testuser  staff   302822 Apr 27 09:39 IMG_7763.png
-rw-r--r--@ 1 testuser  staff    75736 May  7 15:13 IMG_7763.webp
-rw-r-----@ 1 testuser  staff   420243 Apr 27 09:39 IMG_7764.png
-rw-r--r--@ 1 testuser  staff    68210 May  7 15:13 IMG_7764.webp
-rw-r-----@ 1 testuser  staff   223350 Apr 27 09:40 IMG_7765.png
-rw-r--r--@ 1 testuser  staff    45250 May  7 15:13 IMG_7765.webp
-rw-r-----@ 1 testuser  staff   300288 Apr 27 09:40 IMG_7766.png
-rw-r--r--@ 1 testuser  staff    69908 May  7 15:13 IMG_7766.webp
-rw-r-----@ 1 testuser  staff  1393790 Apr 27 09:55 IMG_7768.png
-rw-r--r--@ 1 testuser  staff   115364 May  7 15:13 IMG_7768.webp

 

不過目前 WordPress 的媒體庫，

預設似乎還不支援 .webp 檔案 (無法選取上傳)，

要再研究一下看看…

 

參考資料：

Downloading and Installing WebP  |  WebP  |  Google Developers

Converting Images To WebP — Smashing Magazine