performance/responsive-image · レスポンシブ画像

大きな画像には srcset を用意しましょう。

重大度: info

チェック内容

srcset 属性のない <img> を検出します。<picture> のフォールバックの <img> で、その <source> 要素に srcset がある場合は検出しません。ブラウザがその候補から画像を選ぶためです。

SVG は検出しません。ベクター画像は 1 つのファイルのままどのサイズにも拡大縮小できるためです。対象は、src のパスが .svg で終わるもの（クエリとフラグメントは無視）、インラインの data:image/svg+xml URI、そしてソース解析では .svg ファイルから import した logo を渡す src={logo} と、.svg のパスを文字列リテラルで渡す関数呼び出し（src={asset('/icons/x.svg')}）です。

なぜ重要か

srcset のない <img> は、どのデバイスにも同じ固定サイズの画像を配信するため、小さい画面では帯域が無駄になります。静的解析では意図した表示サイズを測れないため、本ルールはあくまで助言です。

修正方法

ブラウザが表示サイズに合った画像を選べるよう srcset（と sizes）を追加します。

<img
  src="/hero.jpg"
  srcset="/hero-800.jpg 800w, /hero-1600.jpg 1600w"
  sizes="100vw"
  width="1600"
  height="900"
  alt="…"
/>

モードによる違い

ソース解析（CLI、ダッシュボードの静的ベースライン）は、ルート自身のテンプレート、つまりページとレイアウトチェーンにある <img> を読みます。子コンポーネントが描画する <img> は見えません。属性は値にかかわらず書かれていれば「あり」と数え、スプレッド（{...rest}）はすべての属性を「あり」と数えます。レンダリング解析（Vite プラグインのビルド、ダッシュボードで訪問したルート）は出荷される本文のすべての <img> を読みます。ビルドが対象にするのはプリレンダリングされたルートだけで、その検出は HTML ファイルに紐づきソース行を持たないため、インラインの svelte-vitals-disable-next-line が届くのはソース解析の検出だけです。両者が食い違うときは、レンダリング解析の結果を信じてください。

無効化

既存の検出は suppressions ファイルに記録して抑制できます（npx svelte-vitals --update-suppressions）。overrides でルートやパス単位に絞るか、ルールごと無効化するには、次のように設定します。

export default {
  rules: {
    'performance/responsive-image': 'off'
  }
};