AVIFを使っていこうと思った話

Share
AVIFを使っていこうと思った話

以前の記事の振り返り

以前、ブログで使うWeb用の画像のフォーマットについて検討するで「Web用の画像フォーマット」を比較して、当時は WebPがいちばん現実的という結論にしていた。

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

その後も基本はWebP運用で困っていなかったのだけれど、最近読んだ記事がかなり腑に落ちたので、ここで方針を更新しておく。


きっかけになった記事

Qiitaのこの記事を読んだ。

画像圧縮するベストな方法(2025) - Qiita

要点は、QP値をそろえて比較するのは「全く意味がありません.」という指摘と、比較するなら「横軸にbpp,縦軸に評価指標を並べたグラフをRD曲線と呼びます.」という話。

そしてまとめとしては「いろいろグラフをプロットして見ると,比較した範囲内では,AVIF(OpenCVでも使える)が性能が最も良さそうなことがわかりました.」という結論。

自分の理解としては、これまで「次世代フォーマット=とりあえずWebPが無難」くらいの気持ちでいたけど、ちゃんとRD曲線で見ると、WebPは宣伝されているほど圧倒的でもない場面があるっぽい。

それなら、現状のブラウザ対応も含めて、写真用途はまずAVIFでいってよさそう、という判断になった。


AVIFに寄せる判断

自分の用途は「写真をWebで見せる」なので、最優先は次。

  • 見た目の品質を保ったまま軽くしたい
  • 主要ブラウザで普通に表示できること
  • 変換はバッチでやるので、エンコードが遅いのはある程度許容できる

この前提だと、

  • 圧縮効率が強い
  • デコード(表示)側は実用上そこまで問題になりにくい

という点で、AVIFを優先していくのは合理的に思えた。


運用メモ(暫定)

当面はこの方針でいく。

  • 写真の公開用は AVIFを第一候補
GitHub - AOMediaCodec/libavif: libavif - Library for encoding and decoding .avif files
libavif - Library for encoding and decoding .avif files - AOMediaCodec/libavif
  • 互換性が気になる場面はフォールバックとして JPEG / WebP を併用
  • 現像ソフトから直接出せない場合は、従来どおり中間生成(JPEG品質高めなど)→ 変換という流れ
  • Ghost(少なくとも公式テーマ)だと、アップロード画像は結局リプロセス(変換・再圧縮)が入る前提で考えた方がよさそう。なので「勝手にWebP化される」こと自体は割り切りつつ、雑に大きい画像を投げるのは避ける(参考: GhostPro supports webp or avif?)。
GhostPro supports webp or avif?
Hello, I searched here: And on this forum and don’t see my question answer already. For GhostPro customers are the official themes set to convert images to webp and/or avif? If not, how can I do that? So far I just see info on how to do this for self-hosted Ghost sites, editing the img helper, which I don’t think applies to GhostPro customers. Expected user story: for GhostPro customers any image they upload is converted to webp or avif. If not, if I upload webp will GhostPro serve that f…

今後やりたいこと

  • 自分のブログで実際に「AVIF化でどれだけ軽くなったか」を数例でログとして残す
  • 変換コマンドと設定(品質、速度、色差など)を固定して手順化する

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