WebpとAVIFをWindowsでローカルに使ってみる

Share
WebpとAVIFをWindowsでローカルに使ってみる

ブラウザツールはいろいろあるのだが、ローカルでやるのがやはり便利なのでその方法を模索する。

sharpで画像を一括圧縮、WebP・AVIF変換する - Web production note
画像変換ライブラリsharpを用いて、画像をまとめて圧縮や変換(Webp・AVIF・JPG・PNG)できる方法をまとめました。

非公式なコマンドラインツールなどもあるが、開発が最新のバージョンに追随していなかったりするので、おとなしく公式実装を使うのがよさそう。

PNGやJPEG画像をAVIFフォーマットへ変換してくれるコマンドラインツール「cavif」がリリース。
PNGやJPEG画像をAVIFフォーマットへ変換してくれるコマンドラインツール「cavif」がリリースされています。詳細は以下から。

Webp

WebpはGoogleが作ったナウい画像形式。古臭いJPEGに比べて画質を保ったまま小さくできるのがウリ。

WebpのダウンロードはGoogle公式ページの「Windows版をダウンロード」から。

WebP のダウンロードとインストール | Google for Developers

libwebp-1.6.0-windows-x64 のようなフォルダーがダウンロードされるハズ。その中にある bin フォルダー以下に cweb.exe などの各種ツールが入っているので、 適当に C:\\program files\\libwebp-1.6.0-windows-x64\\bin\\ のように配置して、環境変数にパスを登録しておく。

使い方

公式サイトに詳しく説明がある。

cwebp | WebP | Google for Developers

WebpにはLossyとLosslessの圧縮モードがある。

非可逆圧縮

Lossyならこれ。

cwebp input_file -o output_file.webp

基本的にはこれでOK。引数などのパラメータはデフォルトが結構考えられてセットされているので、下手にいじらないほうがいいのかもなあという結論。

可逆圧縮

PNGやTiffのような可逆圧縮の代替として使いたいならLossless圧縮。

cwebp -lossless input_file -o output_file.webp

圧縮モードの指定を -z int 引数で行える。1から9まで指定ができる。デフォルトは6だが私は基本的に9を指定してる。オプション -q または -m が後で使用されると、このオプションの効果が無効になります。

AVIF

AVIFのお勉強サイトをGoogleが公開しているので、参考にする。

AVIF 画像の配信 | Google Codelabs

avifencを導入する

Releases · AOMediaCodec/libavif
libavif - Library for encoding and decoding .avif files - AOMediaCodec/libavif

ここから最新のリリースビルドをダウンロードする。

windows-artifacts.zip をダウンロードすればよい。

適当に C:\\Program Files\\windows-artifacts のように配置して、環境変数にパスを登録しておく。

使い方

たぶん、avifはLossyしかないハズ。

avifenc happy_dog.jpg example.avif

基本的にこのコマンドでOK。

カレントディレクトリ以下の全JPEG/PNG画像ファイルをWebpあるいはAVIFに変換する

Powershellワンライナーに。

画像ファイルを新しい形式に変換して、置換する。

💡
元ファイルは削除されるので、注意。

注意点

  • デフォルト品質を使用(avifencとcwebpのデフォルト設定)
  • 必ずバックアップを取ってからテスト実行してください
  • まずはWhatIfや小さなフォルダーでテストすることをお勧めします

AVIF Lossy

Get-ChildItem -Recurse -Include *.jpg,*.jpeg,*.png | ForEach-Object { $out = $_.FullName -replace '\\.(jpg|jpeg|png)$','.avif'; avifenc $_.FullName $out; if($LASTEXITCODE -eq 0) { Remove-Item $_.FullName } }

WebP Lossy (デフォルト品質)

Get-ChildItem -Recurse -Include *.jpg,*.jpeg,*.png | ForEach-Object { $out = $_.FullName -replace '\\.(jpg|jpeg|png)$','.webp'; cwebp $_.FullName -o $out; if($LASTEXITCODE -eq 0) { Remove-Item $_.FullName } }

WebP Lossless

Get-ChildItem -Recurse -Include *.jpg,*.jpeg,*.png | ForEach-Object { $out = $_.FullName -replace '\\.(jpg|jpeg|png)$','.webp'; cwebp -lossless $_.FullName -o $out; if($LASTEXITCODE -eq 0) { Remove-Item $_.FullName } }

動作説明

  • Get-ChildItem -Recurse -Include *.jpg,*.jpeg,*.png: カレントフォルダー以下の全画像を再帰的に取得
  • 拡張子を.avifまたは.webpに置換
  • 変換コマンド実行
  • $LASTEXITCODE -eq 0で成功確認後、元ファイルを削除

Read more

Dependabotの対応が面倒なのでRenovateを導入する

Dependabotくんはある程度の依存関係の更新を通知してくれるが、山のようにprojectを抱えているとなんとも痒いところに手が届かない。 ということで、Renovateを使ってみる。 Build software better, togetherGitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over 420 million projects.GitHub ここからGitHub Appを入れる。 あとは、指示に従ってポチポチするだけで、超かんたんだった。 感想 自動化最高。

By Sakashita Yasunobu

nodejsのバグを見つけたのでPRを投げてみた

概要 要するに、node --testで特定のバイナリを標準出力に書くと、テストランナーが固まったり、異常終了したりするバグです。 バグ自体は既知のものだったようで、修正がされていました。 test_runner: infinite loop in FileTest#drainRawBuffer when child stdout contains FF 0F followed by large size bytes · Issue #62693 · nodejs/nodeVersion v25.9.0 (also reproduced on v24.14.1 LTS, v22.21.0 LTS, v23.4.0) Platform Darwin 25.

By Sakashita Yasunobu
青空文庫のParser

青空文庫のParser

青空文庫のParserを作ってます。 GitHub - P4suta/aozora: Pure-functional Rust parser for 青空文庫記法 (Aozora Bunko notation): ルビ, 傍点, 縦中横, 外字, 返り点, indent containers, page breaks.Pure-functional Rust parser for 青空文庫記法 (Aozora Bunko notation): ルビ, 傍点, 縦中横, 外字, 返り点, indent containers, page breaks. - P4suta/aozoraGitHubP4suta Rustで作ってますが、配布物はcargoのほかにnpm/pypiでも入手できます Documentation * Playground — try it in

By Sakashita Yasunobu