フォールバック画像

AVIFのようなモダンフォーマットはすべての環境でサポートされているわけではありません。astro-dist-compressは、デフォルトでWebPのフォールバック画像をすべてのルールに対して自動生成できるため、各ルールのoutputsに毎回書く必要がありません。

fallbackオプション

distCompress({
  fallback: {
    enabled: true,   // デフォルト: true
    format: "webp",  // デフォルト: "webp"
    options: { quality: 80 },
  },
});

有効な場合、マッチ後の各ルールに対して以下がチェックされます。

• ルールがまだフォールバックフォーマットを出力していなければ、出力が1つ追加されます({ format, options, fallback: true })。
• ルールがすでにそのフォーマットを出力している場合は重複追加せず、まだどの出力にもfallbackフラグが付いていなければ、その出力にfallback: trueを付与するだけです。

これにより、「すべての画像にWebPフォールバックを生成する」という要件が、各ルールへの記述の繰り返しではなく1箇所のグローバル設定で実現できます。

例

rules: [
  {
    match: hasFormat("png"),
    outputs: [{ format: "avif", options: { quality: 55 } }],
  },
],
fallback: { enabled: true, format: "webp" },

これは以下のように解決されます。

outputs: [
  { format: "avif", options: { quality: 55 } },
  { format: "webp", options: { quality: 80 }, fallback: true }, // 自動追加
]

無効化する

distCompress({ fallback: false });

フォールバック自動生成を無効にすると、HTML書き換え後の<img src>は、ルール自身の出力にfallback: trueが明示されていない限り元の画像ファイルを指すようになります。

独自にフォールバックを指定する

ルール自体がフォールバックを把握している場合は、グローバルなfallbackオプションを使わず、出力の1つに直接fallback: trueを付けるだけでも構いません。

{
  match: and(hasFormat("png"), hasAlpha(true)),
  outputs: [
    { format: "webp", options: { quality: 80 }, fallback: true },
  ],
}

この例ではWebPが主出力かつフォールバックそのものなので、追加する出力はありません。グローバルなフォールバック設定が同じフォーマットを指していても、このルールには何も追加されません。

フォールバックの使われ方

fallback: trueが付いた出力は、以下のように使われます。

• 書き換え後の<picture>要素における<img src>(HTML書き換えを参照)
• <source>のどのフォーマットにも対応していないブラウザに対して安全に表示できるファイル

<source>の一覧には含まれず、最終的な<img>のみに使われます。