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

なぜ静止画に4:2:2は存在しないのか

なぜ静止画に4:2:2は存在しないのか

はじめに 動画のコーデックを扱う際、「4:2:2」や「4:2:0」といった表記を目にすることが多い。これらはクロマサブサンプリング(色差サブサンプリング)のパターンを示す記法である。しかし、静止画フォーマットであるJPEGにおいても同様のサブサンプリングが適用されていることは、意外と知られていない。 本稿では、クロマサブサンプリングの数理的基礎から、各画像フォーマットにおける実装まで、技術的に正確な理解を構築することを目的とする。特に、「なぜ写真の世界では4:2:2がほとんど存在しないのか」という問いに対して、技術的・歴史的観点から考察する。 色空間とサブサンプリングの分離 クロマサブサンプリングを理解するには、まず「なぜ色情報を間引いても画質劣化が少ないのか」という根本的な問いに答える必要がある。この答えは、人間の視覚系の生理学的特性に深く根ざしている。 RGB色空間の特性 RGB色空間は、赤(R)・緑(G)・青(B)の3つの加法混色成分によって色を表現する色空間である。これは、ヒトの網膜に存在する3種類の錐体細胞の分光感度特性に対応している。 * L錐体(長波長

By Sakashita Yasunobu
ブログで使うWeb用の画像のフォーマットについて検討する

ブログで使うWeb用の画像のフォーマットについて検討する

背景と目的 普段から写真撮影を行っていると、画像ファイルが占める容量は無視できない規模になる。現在はNASとAmazon Photosに保存しているため、容量的な制約は少ないものの、ファイルサイズが小さくできるのであれば小さくしておく方が合理的だ。特にWeb公開を前提とする場合、ファイルサイズはアップロード・ダウンロード、そしてページ表示時間に直結するため、可能な限り小さい方が望ましい。 これまでは現像ソフトからJPEG品質100で出力し、Web用途など容量削減が望ましいケースではWebPに変換してきた。RAWファイルは別途バックアップしてアーカイブとして保存している。目視で画質劣化が認められないのであれば、全てWebPで保存しても問題ないのではないかと考えたが、より優れたフォーマットが存在する可能性があるため、現在利用可能な画像フォーマットについて調査した。 主要な画像フォーマットの特徴 JPEG 最も広く普及している画像フォーマットで、互換性に関する信頼性は高い。しかし、規格自体が古く、現代的な圧縮技術と比較すると効率は劣る。 JPEGについて知っておくべきすべての

By Sakashita Yasunobu
Webpの向き不向き

Webpの向き不向き

WebpにはLosslessとLossyの2つのオプションがある。常識的に考えて、Losslessはファイル容量がデカくなりがちで、ファイル容量を小さくしたければLossyを使えばいいと思うが、意外とそんなことないので、用途を考えて使い分けましょうという話。 ウェブ用の画像形式 | WebP | Google for Developersウェブ用により小さい画像を作成するこの画像形式の詳細や、G4 Converter のダウンロードやサポートのためのリンクを確認できます。Google for Developers 最近、ScanSnapのix1300で本をスキャンするようになった。白黒の最高解像度でスキャンをする場合、PDFで画像が出力される。PDFよりも汎用的な画像ファイルのほうが都合がいいので、pdfimagesで画像を抜き出している。 PDFから画像をTiffで抜き出す PDFが一個だけ $base = (Get-Item *.pdf).BaseName; pdfimages -tiff *.pdf temp; Get-ChildItem temp-*.tif | F

By Sakashita Yasunobu
GhostでWebp/AVIFを使う

GhostでWebp/AVIFを使う

はじめに 最近、WebpやAVIF形式といった次世代画像フォーマットを積極的に使うようになった。これらの形式は、従来のJPEGやPNG形式と比較して、同等の画質を保ちながらファイルサイズを大幅に削減できるという特徴がある。ページの読み込み速度が向上し、画質の劣化も気にならないため、本ブログでも積極的に使っていきたいと考えている。 ただし、Ghostで運用する際には、いくつか把握しておくべき仕様がある。 Ghostにおける画像処理の仕様 Ghostでは、アップロードされた画像に対して自動的な処理が行われる。特に注意すべき点は以下の通りだ。 GhostPro supports webp or avif?Sharing tests for any future people searching about this. Okay I like to be exacting and detail oriented, especially when learning a new tool/platform, and just did some

By Sakashita Yasunobu