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呼び出し→差分ビルド→ログ出力）にして記事内に載せるところまで仕上げます。

1. --codec aom を明示（layered エンコードは当時 “aomのみ対応” と libavif 側が明記）([GitHub][2])
2. 同じ入力ファイルを複数回渡す
3. レイヤごとに --scaling-mode と -q を指定（:u は “以降に適用”）

• ✅ 正：同じ input.png を複数回渡して、--scaling-mode 1/8 などを指定する
• ❌ 誤：1/8に縮小したPNG（1521x1014）とフルPNG（6086x4057）を別入力として渡す

• 1/2, 1/4, 1/8 … OK
• 1/16, 1/32 … NG（Not implemented / failed）

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

1. DevTools → Network → Slow 3G
2. Disable cache をON
3. Hard Reload（Ctrl+Shift+R）

• libavif（avifenc/avifdec）

• 画像前処理（必要なら）

• public/ 配信になっているか（Astro再処理を回避できているか）
• Chromiumで見ているか（段階表示は主にChromium側の実装に依存）(GitHub)
• DevToolsで回線を絞っているか（速すぎると一瞬で終わる）

• Jake Archibald, The present and potential future of progressive image rendering (jakearchibald.com)
• Debian manpage: avifenc(1)（--progressive, --layered の説明）(manpages.debian.org)
• Debian manpage: avifdec(1)（--progressive, --index の挙動）(manpages.debian.org)
• libavif Releases / layered + scaling-mode の注意事項（Chrome 94+ / aomのみ / experimental）(GitHub)

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

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