3. 解像度ベース layered AVIF の正しい作り方

Jake Archibald の検証記事に載っている方法が、一番再現性が高いです。(jakearchibald.com)

ポイントは次の3つ：

例：1/8 → 1/2 → 1/1 の3レイヤ

4. 「異なる解像度の画像を渡すと落ちる」根拠（=制約の理由）

--layered は **“各入力が1レイヤになる”**モードです。manpage にもそのまま書かれています。(manpages.debian.org) この実装では「レイヤは同一キャンバス上に重ねる」扱いなので、入力画像の寸法（幅・高さ）が揃っていないと Image layer dimensions mismatch で弾かれます。

ここで混乱しがちなのが --scaling-mode の意味で、これは「入力画像そのもののピクセル寸法を変換する」というより、そのレイヤを“どのスケールとして扱うか”を指定するモードです（つまり “レイヤの解釈” の情報）。(GitHub)

だから、

になります。

5. サポートされるスケールの目安（なぜ 1/16 が落ちる？）

--scaling-mode は libavif 側でも “experimental” 扱いで、リリースノートでも「この部分は十分テストされていない／クラッシュの可能性」まで書かれています。(GitHub) また、Jake の記事でも「特定の scaling 値しか許されない」ことに触れられています。(jakearchibald.com)

実運用上は、あなたの実測どおり

になりがちで、「現状の libavif+libaom の実装都合として 1/8 が下限になりやすい」という理解が安全です（AVIF仕様が1/8を規定しているわけではありません）。

6. Astro への組み込み：重要なのは “再エンコード回避”

NG：src/assets を import.meta.glob で読む

Astroのアセットパイプライン（Sharp等）で再処理が入ると、layered 情報が失われる可能性が高いです。

OK：public/ に置いて静的パス参照

public/ はそのまま配信されるので、layeredを保持したまま出せます。

7. プロジェクト構成（例）

8. 変換スクリプト（例）

設定（あなたの方針を踏襲）：

呼び出しコマンド（核となる部分）：

9. 検証方法（CLI）

レイヤ有効化の確認

avifdec の --progressive は「progressive画像なら index でレイヤを選ぶ」挙動です。(manpages.debian.org)

各レイヤを抽出

10. ブラウザでのテスト（Chrome推奨）

段階表示が効く環境では 低解像度 → 中解像度 → 高解像度の“上書き”が見えます。

重要：preload は慎重に

preloadで先に全部取りに行くと、「段階的に届く」メリットが体感しにくくなります（特に高速回線）。 LCPを狙う場合も「最終レイヤを preload してしまう」など、狙いと逆効果になりがちなので、計測しながら調整が安全です。

11. 依存関係

12. トラブルシューティング

Image layer dimensions mismatch

--layered は 各入力が1レイヤなので、入力寸法が揃っていないと弾かれます。(manpages.debian.org) → 同じ input を複数回渡して --scaling-mode を変える方式に寄せる。

Not implemented / 小さすぎるスケールで失敗

--scaling-mode は experimental で、許される値が限られます。(jakearchibald.com) → 現状は 1/8 を下限に設計するのが安全。

Progressive が見えない

参考

必要なら、この内容をベースに 「実際の convert-to-progressive-avif.js を“そのままコピペで動く完成形”（globで収集→PNG正規化→avifenc呼び出し→差分ビルド→ログ出力）にして記事内に載せるところまで仕上げます。

• 体感速度の向上：まず“見える”状態になるのが早い
• LCP 改善の可能性：最初のレイヤがLCPに間に合うケースがある（ただし計測要注意）
• 1ファイル完結：LQIPのように「別プレースホルダ画像」を管理しなくてよい

• “段階描画”が効くのは主に Chromium 系（Chrome 94+ 等）。libavifのリリースノートでも「Chrome 94+ などの対応ビューア」と明記されています。(GitHub)
• --layered / --scaling-mode は EXPERIMENTAL。落ちる設定があったり、挙動が変わる可能性がある前提で扱う必要があります。(GitHub)

--layered は “各入力が1レイヤ” で最大4レイヤまで、という制約も manpage に明記されています。(manpages.debian.org)

• --progressive, --layered, --scaling-mode は EXPRIMENTAL 扱い(manpages.debian.org)
• layered は当時 aom のみ対応(GitHub)

• sharp 等で「入力を一度PNG化」してから avifenc に渡す、などの運用も可