Image Dimensions

ビルド時にディスクのメタデータから画像に width/height 属性を付与します。

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

設定

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

export default defineConfig({
  markdown: {
    features: {
      imageDimensions: {},
    },
  },
});

動作

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

1. すでに width または height 属性を持つ要素はスキップします。

2. リモート URL（http://、https://、//）と data: URL は無視します。

3. src をディスク上の絶対ファイルパスに解決します。

4. 画像ファイルのヘッダーのみを読み取り、解決した寸法を付与します。

5. ファイルが見つからない、または認識できない場合はビルド警告を出力します。

対応フォーマット: PNG、JPEG、GIF、WebP、AVIF。

パス解決

オプション

構文

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

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

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

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