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

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

Boids

群れに指揮者はいない 鳥の群れは、誰かが指示を出しているわけではない。魚の群れも同じ。それぞれが周囲を見て、少しだけ動く。その繰り返しが、全体として秩序ある動きを生む。 これを1986年にCraig Reynoldsがコードで再現した。名前は Boids(bird + oid)。個体に与えるルールは3つだけ。 1. Separation ── 近すぎたら離れる 2. Alignment ── 周囲と同じ方向を向く 3. Cohesion ── 群れの中心に寄る これだけで、群れは群れらしく動く。 なぜ作ったか 群れの動きは、見ていて飽きない。 * 単純なルールから複雑な動きが生まれる ── 創発(emergence)の典型例。設計していないのに、設計したかのように見える。 * 自分のブログに置きたかった ── 静的なページに、動くものがあると空気が変わる。 * Web Components で作りたかった ── どこにでも持っていける部品として。 設計の話 見えないときは止める 画面外でアニメーションを回し続けるのは無駄。Inte

By Sakashita Yasunobu

Days Elapsed

一年を「面」で見る 一年は365日。数字で見ると多いけど、並べてみると案外少ない。 12ヶ月を並べて、過去を塗りつぶして、今日を光らせる。それだけのカレンダーを作った。進捗バーが「一次元」なら、これは「二次元」の進捗表示。 Year Progress一年は50週ちょっとしかない 2026年を週で数えると、52週とちょっと。 カレンダーで見ると長そうなのに、週で数えると急に短くなる。そんな感覚を形にしたくて、このページの上の方に進捗バーを置いた。 やっていることは単純で、「今年が何%進んだか」をリアルタイムで表示しているだけ。 なぜ作ったか 理由は3つある。 1. 時間を「量」として見たかった ── イベントや予定ではなく、単純に「どれだけ経ったか」を数値で見たかった。 2. 目に見える形にしたかった ── 抽象的な「一年」を、動く数字に落とすとどう感じるか試したかった。 3. 自分の場所に置きたかった ── 誰かのツールを借りるのではなく、自分のブログに自分で作ったものを置きたかった。 実装の話 せっかく作るなら、

By Sakashita Yasunobu

Year Progress

一年は50週ちょっとしかない 一年を週で数えると、52週とちょっと。 カレンダーで見ると長そうなのに、週で数えると急に短くなる。そんな感覚を形にしたくて、このページの上の方に進捗バーを置いた。 やっていることは単純で、「今年が何%進んだか」をリアルタイムで表示しているだけ。 なぜ作ったか 理由は3つある。 1. 時間を「量」として見たかった ── イベントや予定ではなく、単純に「どれだけ経ったか」を数値で見たかった。 2. 目に見える形にしたかった ── 抽象的な「一年」を、動く数字に落とすとどう感じるか試したかった。 3. 自分の場所に置きたかった ── 誰かのツールを借りるのではなく、自分のブログに自分で作ったものを置きたかった。 実装の話 せっかく作るなら、それなりに丁寧にやりたかった。 * Web Components で実装。ブログのCSSやDOMを汚さず、どこにでも持っていける。 * requestAnimationFrame で描画。固定間隔のタイマーではなく、画面更新に同期させることで滑らかさとリソース効率を両立。 *

By Sakashita Yasunobu