SSI - 画像の統一規格

定義

SSIは、Webインターフェースで使用する画像の形式、代替テキスト、サイズ、読み込み方法に関する要件を定めます。

構造とセマンティクス

画像形式

SVG

• インターフェースに合わせてスタイルを調整する小さな静的アイコンには、SVGのインライン記述を使用できます。Tailwindを使うプロジェクトでは、shrink-0を指定すると、flexやgridのコンテナ内でアイコンが縮むのを防げます。currentColorを使うと、文字色を継承できます。

  <svg
    class="shrink-0"
    fill="none"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    focusable="false"
  >
    <path d="M12 2L..." fill="currentColor" />
  </svg>

• 内容を伝えるSVGは、静的なものも管理画面から配信されるものも、<img>またはnext/imageで表示し、意味が伝わるaltを指定する。SVGを独立したリソースにすると、ブラウザーのキャッシュも利用できる。

• 装飾目的、または表示済みのラベルを繰り返すインラインSVGは、aria-hidden="true"でスクリーンリーダーから隠す。独立して意味を伝えるSVGにはrole="img"を指定し、<title>とaria-labelledbyでアクセシブルな名前を付ける。

• 管理画面から取得した未検証のSVGを、マークアップとしてDOMに挿入しない。インラインで使用する場合は、信頼できるサニタイズ処理を通す。画像として表示する場合、ブラウザーは能動的なコンテンツを制限するが、アップロードの検証は別途必要。

ラスター画像

• 適切な元画像と対象環境でサポートされる形式を選ぶ。配信形式にはWebPやAVIFを利用できる。形式を手動で選ぶ場合は、対象ブラウザーに応じて<picture>でJPEGまたはPNGのフォールバックも用意する。

• すべての画像に同じ圧縮品質を指定しない。画質を確認し、ファイルサイズに合わせて品質を設定する。

  <picture>
    <source srcset="/images/photo.avif" type="image/avif" />
    <source srcset="/images/photo.webp" type="image/webp" />
    <img
      src="/images/photo.jpg"
      width="1600"
      height="1067"
      alt="レンガの壁際に置かれた自転車"
    />
  </picture>

Next.js Image Optimizationを使う場合、配信形式はNext.jsの設定で指定する。next/imageはsrcsetでレスポンシブな画像候補を出力する。異なる画像ファイルやアートディレクションには、<picture>内の<source>を別途使用する。

代替テキスト

• 内容を伝える画像には、ページの文脈に沿って意味を簡潔に表すaltを指定する。「写真」のような一般的な説明や、近くに表示されている文章の繰り返しは避ける。

• 装飾だけを目的とする画像には空のalt、つまりalt=""を指定する。この属性を省略すると、スクリーンリーダーがファイル名を読み上げる場合がある。

• リンクやボタンの唯一の内容が画像の場合、altにはリンク先やボタンの動作を表す情報を含める。

• テキストのないボタンには、表示されるラベルやaria-labelを使い、ボタン自体にアクセシブルな名前を付ける。SVGアイコンだけでは操作要素の名前にならない。

• グラフ、図表など複雑な画像では、重要なデータもテキストで提供する。

• 画像に表示上のキャプションが必要な場合は、<figure>と<figcaption>を使う。

  <figure>
    <img
      src="/images/photo.webp"
      width="1200"
      height="800"
      alt="レンガの壁際に置かれた自転車"
    />
    <figcaption>工房では予約制で自転車の修理を受け付けています。</figcaption>
  </figure>

サイズとレスポンシブ表示

widthとheight属性には、画像の本来の寸法を指定する。ブラウザーはその縦横比を使って、画像の読み込み前に表示領域を確保し、レイアウトシフト（Cumulative Layout Shift、CLS）を抑える。実際の表示サイズはCSSで決まる。

画像をトリミングして領域いっぱいに表示する場合はobject-coverを使う。fillの場合、親要素にposition: relativeやaspect-ratioなどを指定して位置とサイズを決める。重要な部分が欠ける切り抜きは避ける。

sizesには、レイアウト上の画像幅に合った値を指定する。ブラウザーがsrcsetから適切なリソースを選ぶための情報であり、sizesだけでは画像のバリエーションは生成されない。通常のHTMLではsrcsetと合わせて指定する。

<img
  src="/images/photo-960.webp"
  srcset="
    /images/photo-480.webp 480w,
    /images/photo-960.webp 960w,
    /images/photo-1600.webp 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1600"
  height="1067"
  alt="レンガの壁際に置かれた自転車"
  loading="lazy"
/>

next/imageでレスポンシブに表示する場合も、適切なsizesが必要です。fillでは必須で、親要素が画像領域を定義します。

<div className="relative aspect-[3/2]">
  <Image
    src="/images/photo.webp"
    alt="レンガの壁際に置かれた自転車"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
    className="object-cover"
  />
</div>

アクセシビリティとパフォーマンス

画像の最適化

• 解像度は対象デバイスのピクセル密度と実際に表示される最大サイズに合わせて選ぶ。理由なく大きすぎる元画像を配信しない。
• ファイルサイズと圧縮品質は画像ごとに決める。一律の500 KB制限やWebP品質90%という基準はない。写真、透過アイコン、大きなヒーロー画像では適した設定が異なる。
• TinyPNGなどのサービスは最適化に利用できる。圧縮後に見た目の品質と実際のファイルサイズを確認する。
• 外部ストレージやCDNから配信する画像には、適切なキャッシュを設定する。形式、サイズ、キャッシュヘッダーも個別に設定する。

画像の読み込み

• 初期表示領域の外にある画像はloading="lazy"で遅延読み込みできます。
• Largest Contentful Paint（LCP）に該当する画像や、初期表示ですぐに見える画像の読み込みを遅らせない。重要だと確認できた画像にはloading="eager"を指定し、計測結果に基づいて必要ならfetchPriority="high"も設定する。
• 多くの画像に一度に高い優先度を設定しない。ネットワークリソースを奪い合うためである。
• 標準の<img>は初期状態でeager読み込みです。遅延読み込みにはloading="lazy"を明示し、画像が表示領域に近づいたときにブラウザーが読み込みます。
• next/imageは、変更しない限り遅延読み込みを標準で使用する。重要な画像については、レンダリング後のマークアップとコンポーネント設定を確認する。

ファイルの整理

静的ファイルは用途別に整理できます。CMSから管理する画像は通常、CMSまたは接続先のストレージに置きます。

public/
  ├─ icons/                 # <img>で使う静的SVGファイル
  └─ images/                # 静的なラスター画像

src/
  └─ shared/
    └─ icons/               # 再利用するSVGコンポーネント

確認

LighthouseとブラウザーのDevToolsでの確認項目は次のとおり。

• 内容を伝える画像には適切なaltがあり、装飾画像にはalt=""が指定されている。
• widthとheightまたは明示した縦横比により、読み込み前に領域が確保される。
• レスポンシブ画像では適切なsrcsetが選ばれ、sizesが実際のレイアウトに合っている。
• 高い優先度を付けた画像が必要最小限で、画面下部の画像が初期表示領域の読み込みを妨げない。
• 一般的な画面サイズで、トリミング、画質、キャッシュ、CLSを確認している。

最終例

表示領域を確保した内容画像:

<img
  src="/images/photo.webp"
  width="1200"
  height="800"
  alt="レンガの壁際に置かれた自転車"
  loading="lazy"
/>

独立したリソースとして表示するSVG:

<img src="/icons/user.svg" width="24" height="24" alt="ユーザープロフィール" />

複数の候補を持つレスポンシブ画像:

<img
  src="/images/photo-960.webp"
  srcset="/images/photo-480.webp 480w, /images/photo-960.webp 960w, /images/photo-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1600"
  height="1067"
  alt="レンガの壁際に置かれた自転車"
  loading="lazy"
/>

初期表示領域にある重要な画像:

<Image
  src="/images/hero.webp"
  width={1600}
  height={900}
  alt="窓際に作業台がある自転車工房"
  loading="eager"
  fetchPriority="high"
  sizes="(max-width: 768px) 100vw, 50vw"
/>