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

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

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