PNG圖片批量轉換爲webp

網站在進行seo測試時,有一項推薦是更改PNG格式圖片爲webp,圖片體積大幅減少,質量損失不多。這樣會加快網頁加載速度,節約帶寬。

由於網頁裏面png圖片已經又一定數量,需要批量轉換格式。操作在ubuntu下完成,過程如下。

下載工具包

sudo apt install webp

單個轉換測試

➜  cwebp xray_firefox.png -o xray_firefox.webp
Saving file 'xray_firefox.webp'
File:      xray_firefox.png
Dimension: 1398 x 973
Output:    56808 bytes Y-U-V-All-PSNR 44.33 47.21 47.59   45.13 dB
        (0.33 bpp)
block count:  intra4:       1282  (23.88%)
            intra16:      4086  (76.12%)
            skipped:      3883  (72.34%)
bytes used:  header:            421  (0.7%)
            mode-partition:   7225  (12.7%)
Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       9%|      22%|      67%|    5368
    quantizer:  |      36 |      34 |      29 |      23 |
filter level:  |      11 |       7 |      12 |      10 |
➜  ls -lh xray_firefox*
-rw-rw-r-- 1 mephisto mephisto 168K Jun  3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto  56K Jul  1 16:16 xray_firefox.webp
➜  

如上所示,體積從168K減少至56k,爲原來的體積的三分之一

firefox打開圖片對比測試,左PNG,右WEB

png webp diff

調整質量因素參數測試(參數爲q,0<N<100,默認值爲75,下面示例爲85),體積從56K增加至71K

➜ cwebp -q 85  xray_firefox.png -o xray_firefox.webp
Saving file 'xray_firefox.webp'
File:      xray_firefox.png
Dimension: 1398 x 973
Output:    71730 bytes Y-U-V-All-PSNR 48.50 51.31 51.68   49.29 dB
        (0.42 bpp)
block count:  intra4:       1303  (24.27%)
            intra16:      4065  (75.73%)
            skipped:      3946  (73.51%)
bytes used:  header:            544  (0.8%)
            mode-partition:   7375  (10.3%)
Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       9%|      22%|      67%|    5368
    quantizer:  |      20 |      18 |      16 |      12 |
filter level:  |       7 |       4 |       3 |       2 |
➜  iPhone ls -lh xray_firefox*                       
-rw-rw-r-- 1 mephisto mephisto 168K Jun  3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto  71K Jul  1 16:23 xray_firefox.webp

批量轉換

  • 簡單批量轉換腳本

      ➜  cat test.sh 
      #/bin/bash
      for file in *.png;
      do
          echo $file
          cwebp "$file" -o "${file%.png}.webp";
      done
    
  • 執行腳本

      ➜  ./test.sh
      font_result.png
      Saving file 'font_result.webp'
      File:      font_result.png
      Dimension: 1335 x 1005
      Output:    57624 bytes Y-U-V-All-PSNR 43.96 45.09 45.14   44.31 dB
              (0.34 bpp)
      block count:  intra4:       1396  (26.38%)
                  intra16:      3896  (73.62%)
                  skipped:      3630  (68.59%)
      bytes used:  header:            419  (0.7%)
                  mode-partition:   7629  (13.2%)
      Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
          macroblocks:  |       2%|       7%|      19%|      72%|    5292
          quantizer:  |      36 |      35 |      29 |      23 |
      filter level:  |      11 |       7 |      38 |      30 |
      github_hook_result.png
      Saving file 'github_hook_result.webp'
      File:      github_hook_result.png
      Dimension: 1664 x 634
      Output:    33674 bytes Y-U-V-All-PSNR 45.81 45.92 46.16   45.89 dB
              (0.26 bpp)
      block count:  intra4:        643  (15.46%)
                  intra16:      3517  (84.54%)
                  skipped:      3258  (78.32%)
      bytes used:  header:            388  (1.2%)
                  mode-partition:   4412  (13.1%)
      Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
          macroblocks:  |       1%|       4%|      10%|      85%|    4160
          quantizer:  |      36 |      36 |      31 |      24 |
      filter level:  |      11 |       8 |       6 |       4 |
      github_webhook.png
      Saving file 'github_webhook.webp'
      File:      github_webhook.png
      Dimension: 1085 x 687
      Output:    35696 bytes Y-U-V-All-PSNR 44.19 44.32 44.53   44.27 dB
              (0.38 bpp)
      block count:  intra4:        658  (22.50%)
                  intra16:      2266  (77.50%)
                  skipped:      2141  (73.22%)
      bytes used:  header:            380  (1.1%)
                  mode-partition:   3715  (10.4%)
      Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
          macroblocks:  |       2%|       7%|      11%|      80%|    2924
          quantizer:  |      36 |      36 |      30 |      24 |
      filter level:  |      11 |       8 |       5 |       5 |
    
      ......
    
  • 查看結果,體積越大的圖片,效果越明顯

      ➜  ls -lh
      total 1.9M
      -rw-rw-r-- 1 mephisto mephisto  43K May 29 12:53 404.jpg
      -rw-rw-r-- 1 mephisto mephisto 166K Jun  8 13:59 font_result.png
      -rw-rw-r-- 1 mephisto mephisto  57K Jul  1 16:29 font_result.webp
      -rw-rw-r-- 1 mephisto mephisto  96K Jun  6 18:24 github_hook_result.png
      -rw-rw-r-- 1 mephisto mephisto  33K Jul  1 16:29 github_hook_result.webp
      -rw-rw-r-- 1 mephisto mephisto  93K Jun  6 18:18 github_webhook.png
      -rw-rw-r-- 1 mephisto mephisto  35K Jul  1 16:29 github_webhook.webp
      -rw-rw-r-- 1 mephisto mephisto 184K Jun  7 18:01 google_fonts.png
      -rw-rw-r-- 1 mephisto mephisto  74K Jul  1 16:29 google_fonts.webp
      -rw-rw-r-- 1 mephisto mephisto 114K Jun  4 16:03 haha.png
      -rw-rw-r-- 1 mephisto mephisto  52K Jul  1 16:29 haha.webp
      -rw-rw-r-- 1 mephisto mephisto  79K Jun  7 18:07 libre_baskerville_font.png
      -rw-rw-r-- 1 mephisto mephisto  28K Jul  1 16:29 libre_baskerville_font.webp
      -rw-rw-r-- 1 mephisto mephisto  67K Jun 21 17:27 rime_clover.png
      -rw-rw-r-- 1 mephisto mephisto  17K Jul  1 16:29 rime_clover.webp
      -rw-rw-r-- 1 mephisto mephisto 403K Jun 21 17:48 rime_example.png
      -rw-rw-r-- 1 mephisto mephisto  50K Jul  1 16:29 rime_example.webp
      -rwxrwxr-x 1 mephisto mephisto   89 Jul  1 16:29 test.sh
      -rw-rw-r-- 1 mephisto mephisto 168K Jun  3 21:08 xray_firefox.png
      -rw-rw-r-- 1 mephisto mephisto  56K Jul  1 16:29 xray_firefox.webp
    

如今webp的支持已經比較完善了,本站絕大部分的圖片都已更改爲webp格式,包括ico圖標文件,目測無明顯圖片品質損失,加載速度的確較大幅度提升,畢竟小破站,想改就該。

大型站點,請君酌情處理。

最後修改於: Monday, August 28, 2023

相關文章:

翻譯: