画像を軽くする話になると、たいてい AVIF が出てきます。WebP よりさらに小さい。Lighthouse も「次世代フォーマットでの配信」と言ってくる。使わない理由がなさそうに見えるんですよね。
このサイトでは使っていません。試してもいません。 手を付ける前に外しました。
先に書いておくと、この記事に実測値はありません。「入れてみたらこうなった」という話ではないからです。やらないと決めた理由だけを書きます。
何と引き換えなのかを先に見た
AVIF を入れて得られるものは、はっきりしています。WebP からさらに数十KB。それだけです。
では何を差し出すことになるか。ここを先に並べました。
<picture> と <source> が増えます。WordPress では、この構造をプラグインが書き換えることがあります。キャッシュ系、画像最適化系、遅延読み込み系。どれも「入っていないサイトのほうが珍しい」種類のものです。
共用サーバーでは変換の負荷もかかります。デコードも WebP より重い。フェードや遅延読み込みと組み合わせたときに、どこかで噛み合わなくなる可能性がある。
これが厄介なのは、壊れ方が納品後に出るところです。 こちらの手元では気づけないかもしれない。クライアントが自分のスマホで見て、なんとなく気持ち悪いと感じる。そういう形で出ます。
PSIの点数のために何を賭けているか
速度改善を売っている立場で言うのもなんですが、本当に守るべきものは点数ではありません。
早くするのは当然で、「速くしたら壊れた」を起こさないことです。
AVIFは数十KBのために、そこを賭けにいく取引になっている。そう整理した時点で、答えは出ていました。
外しても、点は落ちない
もうひとつ確かめたことがあります。ここ実際に調べました。
Lighthouse の「次世代フォーマットでの配信」の監査は、WebP で満たされます。 AVIF でなければ落ちる項目ではありません。つまり「AVIF を使っていないから点が伸びない」という状況は、実際にはほとんど起きない。
このサイトで点が伸びなかったときのボトルネックも、毎回ほかのところでした。日本語ウェブフォントが 646KB。レンダーブロッキングのCSS。外部スクリプト。実際に効いたのはそっちです。AVIFは点数を動かす札としてかなり下位にあります。
「使わない」には2種類ある
これは分けておきたいところです。
技術判断として選ばない —— 今回の結論はこれです。条件を挙げて、比べて、外した。
存在ごと忘れる —— これは避けたい。クライアントや、間に入る制作会社から「AVIF は使わないんですか」と聞かれることがあるからです。
そのとき「検討しましたが、この環境では表示の安定性を損なうリスクのほうが大きいと判断しました」と即答できるかどうかで、見え方が正反対になります。判断済みであること自体が、専門性の提示にるなと。
だから、やらないと決めたことこそ書き残しておく。この記事もそのためのものです。
いつ見直すか
外した理由は、どれも環境に紐づいています。
- 共用サーバーでの変換とデコードの負荷
<source>が増えることによるプラグインとの衝突- 手元で再現しにくい壊れ方をする
環境が変われば結論も変わります。専用サーバーや CDN 前提の構成の案件が来たら、そのときは実際に測ります。「使わない」を思考停止にしないために、見直す条件のほうを先に書いておく。
そのぶん、WebP 側は詰める
AVIF を外すと決めたなら、代わりに詰める場所があります。WebP の品質設定と、srcset / sizes の精度です。
順番としては、こちらが先です。AVIF で削れるのは WebP からさらに数十KB。対して sizes の指定が実際の表示幅と合っていないサイトは、必要な倍の解像度を配っていることがあります。 桁が違う。
「AVIF は使いません」と言い切る説得力は、そこがちゃんとしている前提で出てきます。ここを雑にしたまま AVIF だけ外すと、ただの手抜きです。
・・・もちろん運用の手間との兼ね合いでシンプルに同じ画像を選択するケースもあります。つまりケースバイケースです。
ただ、新しいものを使わない判断のほうが、使う判断より説明が要ります。この記事はその説明ということですね。