ブログの画像をコマンドでWebPに変更する手順(macOS)

ブログの画像をコマンドでWebPに変更する手順(macOS)
Page content

画像の容量削減と画面表示高速化のため、Hugoで作成しているこのブログの画像ファイル(jpg/png)をWebPに変更しました。
その時の手順を書いておきます。

Hugoでなくとも流用できると思います。

コマンドで実施できたので、ファイル数が多くても手間がかかりません。
※ご利用は自己責任でお願いします

PageSpeed Insightsでも次世代画像での画像の配信を勧めています。 PageSpeed Insightsの改善項目

WebP画像への変更手順

  1. webpのインストール

    brew install webp
    
  2. カレントディレクトリ配下のjpg/jpegファイルからwebpファイルを作成

    • 変換対象ファイル確認
      find . -type f -iname '*.jpg' | egrep -o "^\.[^.]+" | xargs -I {} echo {}.jpg
      find . -type f -iname '*.jpeg' | egrep -o "^\.[^.]+" | xargs -I {} echo {}.jpeg
      
    • 変換実行
      find . -type f -iname '*.jpg' | egrep -o "^\.[^.]+" | xargs -I {} cwebp -metadata icc -sharp_yuv -o {}.webp {}.jpg
      find . -type f -iname '*.jpeg' | egrep -o "^\.[^.]+" | xargs -I {} cwebp -metadata icc -sharp_yuv -o {}.webp {}.jpeg
      
  3. カレントディレクトリ配下のpngファイルからwebpファイルを作成

    • 変換対象ファイル確認
      find . -type f -iname '*.png' | egrep -o "^\.[^.]+" | xargs -I {} echo {}.png
      
    • 変換実行
      find . -type f -iname '*.png' | egrep -o "^\.[^.]+" | xargs -I {} cwebp -lossless -metadata icc -o {}.webp {}.png
      
  4. カレントディレクトリ配下のファイルの文字列を置換する

    find . -type f -name '*.md' | xargs sed -i -e "s/.jpg/.webp/"
    
  5. カレントディレクトリ配下のjpg/jpegファイルとpngファイルを削除

    • 削除対象ファイル確認
      find . -type f -iname '*.jpg' | xargs -I {} echo {}
      find . -type f -iname '*.jpeg' | xargs -I {} echo {}
      find . -type f -iname '*.png' | xargs -I {} echo {}
      
    • 削除実行
      ※確認せずにいきなり消します
      find . -type f -iname '*.jpg' | xargs -I {} rm {}
      find . -type f -iname '*.jpeg' | xargs -I {} rm {}
      find . -type f -iname '*.png' | xargs -I {} rm {}
      

変換前後の容量比較

画像の容量を4割ほど減らせました

  • Before
    jpg/png画像の容量
  • After
    WebP画像の容量

画質の低下などは個人的に気にならないレベルだったため、今後のブログ画像はWebP形式を活用していきます。

参考サイト