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

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

背景

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

@sveltejs/enhanced-img

基本的な使用方法

.svelteコンポーネントで使用する際は、通常の<img>の代わりに<enhanced:img>を使用し、Viteのアセットインポートパスで画像ファイルを参照します：

<enhanced:img src="./path/to/your/image.jpg" alt="代替テキスト" />

ビルド時に、<enhanced:img>タグは<picture>で囲まれた<img>に置き換えられ、複数の画像タイプとサイズが提供されます。画質を損なうことなく画像を縮小することのみが可能なため、必要とする最高解像度の画像を提供する必要があります — 様々なデバイスタイプ向けに小さいバージョンが生成されます。

HiDPI（いわゆるRetinaディスプレイ）向けに2倍の解像度で画像を提供する必要があります。<enhanced:img>が自動的に小さいデバイスへの適切なバージョンの提供を処理します。

<enhanced:img>にスタイルを追加したい場合は、classを追加してそれをターゲットにしてください。」

解説

1. 基本的な実装方法：

• 従来の<img>タグの代替として<enhanced:img>を使用
• 画像パスはViteのアセットインポートパス形式で指定
• 適切なalt属性の設定が必要

1. ビルド時の処理：

• <enhanced:img>から<picture>要素への変換
• 複数の画像フォーマットとサイズの生成
• 最適化された画像の自動生成

1. 画像サイズに関する考慮事項：

• 画質維持のための制約：
  • ダウンスケールのみ可能
  • 最大必要解像度での提供が推奨
• HiDPI対応：
  • 2倍解像度での画像提供
  • デバイスに応じた自動サイズ調整

1. スタイリング：

• class属性を使用したスタイル適用
• CSSでのターゲット指定が必要

このプラグインを使用することで、画像の最適化とレスポンシブ対応が自動化され、開発者の負担が軽減されます。特にマルチデバイス対応とパフォーマンス最適化の面で効果的です。

おわりに

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