`imageDimensions` 機能は、ビルド時に画像ファイルのヘッダーを読み取り、ローカルの `<img>` 要素に `width` と `height` 属性を付与します。画像の読み込み前にブラウザが領域を確保できるようにすることで、Cumulative Layout Shift（CLS）を防ぎます。

:::note[zfb next.38 から機能するようになりました]

zfb `0.1.0-next.35` までは、この機能は public ディレクトリの絶対パスに対して no-op でした — `![alt](/img/x.png)` のような画像は `width`/`height` が付与されないまま出力されていました。zfb `0.1.0-next.38` からは動作します。このコーパス上でも public ディレクトリの画像に寸法が付与され、ファイルが見つからない場合は `cannot stat` のビルド警告が出力されます。

:::

## 設定

オブジェクト型の機能であるため、オプションオブジェクト（`{}` またはフィールド）を渡す必要があります。

```ts title="zfb.config.ts"
export default defineConfig({
  markdown: {
    features: {
      imageDimensions: {},
    },
  },
});
```

## 動作

各画像要素に対して、この機能は次のように動作します。

1. すでに `width` または `height` 属性を持つ要素はスキップします。
2. リモート URL（`http://`、`https://`、`//`）と `data:` URL は無視します。
3. `src` をディスク上の絶対ファイルパスに解決します。
4. ラスター形式の場合、画像ファイルのヘッダーのみを読み取り、解決した寸法を付与します。
5. SVG の場合、ヘッダープローブの代わりにマークアップから実寸を読み取ります。`width`/`height` が明示されていればそれを、なければ `viewBox` を使用します。
6. ファイルが見つからない、または認識できない場合はビルド警告を出力します。

対応フォーマット: PNG、JPEG、GIF、WebP、AVIF（ヘッダープローブ）、および SVG（マークアップから寸法を読み取り、ヘッダープローブは行いません）。

## パス解決

| パス形式 | 解決の基準 |
| --- | --- |
| 絶対パス（`/img/hero.png`） | `public` ディレクトリ |
| 相対パス（`./assets/hero.png`） | Markdown ファイルのディレクトリ |
| リモート / `data:` | 警告なしでスキップ |

## オプション

| オプション | デフォルト | 説明 |
| --- | --- | --- |
| `skipRemote` | `true` | `false` の場合、リモート画像をスキップせずビルド時にプローブします。 |

## 構文

標準の Markdown 画像だけで十分です — 特別な構文は不要です。

```md
![Hero image](/img/hero.png)
```

400×300 の PNG に対する出力は次のようになります。

```html
<img src="/img/hero.png" alt="Hero image" width="400" height="300" />
```