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

Blog

記事に広告リンクを含む場合があります。

ブログの画像をコマンドで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形式を活用していきます。

参考サイト