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

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

背景

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

ベストプラクティス

• 各画像タイプに対して、上記で説明した解決策から適切なものを使用してください。1つのプロジェクトで3つの解決策すべてを組み合わせることができます。例えば、<meta>タグの画像にはViteの組み込み処理を使用し、ホームページの画像表示には@sveltejs/enhanced-imgを使用し、ユーザー投稿コンテンツには動的アプローチを使用することができます。
• 使用する画像最適化の種類に関係なく、すべての画像をCDN経由で提供することを検討してください。CDNは静的アセットのコピーをグローバルに配布することで遅延を削減します。
• 元の画像は良好な品質/解像度を持ち、HiDPIデバイスに対応するため表示サイズの2倍の幅を持つべきです。画像処理により、小さい画面に対応する際に画像サイズを縮小してバンド幅を節約できますが、画像を拡大するためにピクセルを生成するのはバンド幅の無駄になります。
• ページデザインの幅を取るヒーロー画像など、モバイルデバイスの幅（およそ400px）よりもかなり大きい画像の場合、sizesを指定して小さいデバイスにはより小さい画像を提供できるようにします。
• 最大視覚コンテンツ描画（LCP）画像などの重要な画像には、fetchpriority="high" loading="eager"を設定して、可能な限り早い段階での読み込みを優先します。
• 画像にコンテナやスタイリングを与え、ページ読み込み中に画像が飛び回って累積レイアウトシフト（CLS）に影響を与えないように制約をかけます。widthとheightは画像がまだ読み込み中の間、ブラウザがスペースを確保するのに役立つため、@sveltejs/enhanced-imgがwidthとheightを追加します。
• 常に適切なaltテキストを提供してください。Svelteコンパイラーは、これを行わない場合に警告を出します。
• sizesでemやremを使用せず、これらの単位のデフォルトサイズを変更しないでください。sizesや@mediaクエリで使用される場合、emとremはどちらもユーザーのデフォルトfont-sizeを意味すると定義されています。sizes=”(min-width: 768px) min(100vw, 108rem), 64rem”のようなsizes宣言では、CSSによって変更された場合、ページ上で画像がレイアウトされる方法を制御する実際のemやremが異なる可能性があります。例えば、html { font-size: 62.5%; }`のようなことは行わないでください。ブラウザのプリローダーによって確保されたスロットが、作成後のCSSオブジェクトモデルの実際のスロットよりも大きくなってしまいます。

解説

画像の最適な取り扱い方について、以下の主要な観点から説明しています。

1. 柔軟な実装アプローチ

• 異なる解決策の組み合わせ
• 用途に応じた適切な方法の選択

1. パフォーマンス最適化

• CDNの活用による遅延削減
• 適切な画像サイズと解像度の選択
• HiDPIデバイス対応

1. レスポンシブデザイン

• モバイルデバイスへの配慮
• sizes属性の適切な使用
• 画像の優先度設定

1. ユーザー体験の改善

• レイアウトシフト（CLS）の防止
• アクセシビリティ（alt テキスト）
• 適切なスタイリング

1. 技術的な注意点

• em/remの使用に関する注意
• フォントサイズの設定による影響

これらのベストプラクティスは、パフォーマンス、アクセシビリティ、ユーザー体験を考慮した包括的なガイドラインとなっています。

おわりに

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