Svelte入門：SvelteKitでの画像の扱い -Vol.7-

今日は、SvelteKitでの画像の扱いについて解説しています。

背景

SvelteKitでの画像の扱いについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

@sveltejs/enhanced-img

srcsetとsizes

ヒーローイメージのようにデザインの幅いっぱいに大きな画像を配置する場合、小さいデバイスでより小さいバージョンがリクエストされるようにsizesを指定する必要があります。例えば、1280pxの画像がある場合、次のような指定が必要かもしれません：

<enhanced:img src="./image.png" sizes="min(1280px, 100vw)"/>

sizesが指定されている場合、<enhanced:img>は小さいデバイス用に小さな画像を生成し、srcset属性を設定します。

自動生成される最小の画像の幅は540pxです。より小さい画像が必要な場合や、カスタムの幅を指定したい場合は、wクエリパラメータを使用して指定できます：

<enhanced:img
  src="./image.png?w=1280;640;400"
  sizes="(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px"
/>

sizesが指定されていない場合、HiDPI/Retina用の画像と標準解像度の画像が生成されます。ブラウザが高いデバイスピクセル比のデバイスでその画像を表示できるように、表示したい解像度の2倍の解像度の画像を提供する必要があります。

解説

1. sizes属性の使用：

• 目的：
  • レスポンシブ画像の制御
  • デバイスサイズに応じた最適な画像提供
• 基本構文：
  • min()関数の活用
  • ビューポート幅（vw）との組み合わせ

1. 自動生成される画像について：

• 最小サイズ：540px
• 自動的なsrcset属性の生成
• 複数解像度への対応

1. カスタム幅の指定：

• wクエリパラメータの使用
• セミコロン区切りでの複数サイズ指定
• メディアクエリと組み合わせた詳細な制御

1. サイズ指定のシナリオ：

• sizes指定あり：
  • レスポンシブな画像サイズ
  • デバイスに応じた最適化
• sizes指定なし：
  • 2種類の解像度（標準とHiDPI）
  • 2倍解像度の元画像が必要

1. 実装の考慮点：

• デバイスピクセル比への対応
• パフォーマンスとユーザー体験の最適化
• 適切な画像サイズの選択

この機能により、様々なデバイスやディスプレイに対して最適な画像を提供することが可能になり、ウェブサイトのパフォーマンスと視覚品質を向上させることができます。

おわりに

今日は、 SvelteKitでの画像の扱いについて解説しました。