追記: cwebpで画像をWebPに変換する | freks blog を使うほうがおすすめです 2023-11-11
WebP image format | Can I use... Support tables for HTML5, CSS3, etc の通り、Webp がだいたいのブラウザで使えるので、このブログの PNG 画像を全部 Webp にしてみました
squoosh/cli at dev · GoogleChromeLabs/squoosh
を使って、コマンドラインで一気に変換します
npm i -g @squoosh/cliでグローバルに squoosh をインストール
かんたんな Ruby スクリプトで squoosh を実行して置換しました
squoosh-cli を動かすと Warning が出てしまうのですが、解決できず無視してます
squoosh-cli の例
"squoosh-cli --webp '{}' -d cloudwatch-logs cloudwatch-logs/*.png "
⠋ (node:6726) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 13 unpipe listeners added to [WriteStream]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6726) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 13 error listeners added to [WriteStream]. Use emitter.setMaxListeners() to increase limit
(node:6726) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 13 close listeners added to [WriteStream]. Use emitter.setMaxListeners() to increase limit
(node:6726) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 13 finish listeners added to [WriteStream]. Use emitter.setMaxListeners() to increase limit
1/1 ✔ Squoosh results:
cloudwatch-logs/cloudwatch-logs-list.png: 7.70KB
└ cloudwatch-logs/cloudwatch-logs-list.webp → 8.55KB (111%)あとは、記事内の png 拡張子を webp に変えてあげます
ブログ記事が posts ディレクトリ内にマークダウンで書いてるので
find ./posts/ -type f -name "*.md" | xargs sed -i s/.png/.webp/gあとは、変更の差分を見て、不要に変えてしまったところを直して対応完了
画像サイズが削減されていい感じです