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

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

背景

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

@sveltejs/enhanced-img

固有の寸法

widthとheightは、ソース画像から推測可能であり、<enhanced:img>タグが前処理される際に自動的に追加されるため、オプションです。これらの属性により、ブラウザは正しいスペースを確保でき、レイアウトのシフトを防ぐことができます。異なるwidthとheightを使用したい場合は、CSSで画像のスタイルを設定できます。プリプロセッサーがwidthとheightを追加するため、いずれかの寸法を自動計算したい場合は、それを明示的に指定する必要があります：

<style>
    .hero-image img {
        width: var(--size);
        height: auto;
    }
</style>

解説

1. 自動寸法設定の仕組み：

• ソース画像からの寸法の自動検出
• widthとheight属性の自動追加
• プリプロセス段階での処理

1. レイアウトシフト防止：

• 画像ロード前のスペース確保
• Cumulative Layout Shift (CLS)の改善
• ページの安定性向上

1. カスタム寸法設定：

• CSSによるスタイリング
• widthやheightの上書き
• レスポンシブデザインへの対応

1. 自動計算の指定方法：

• width固定の場合：
  • height: autoを指定
  • アスペクト比の維持
• height固定の場合：
  • width: autoを指定
  • アスペクト比の維持

1. CSSでの実装例：

• カスタムプロパティ（CSS変数）の使用
• クラスベースのスタイリング
• 特定の画像要素へのターゲティング

この機能により、画像の寸法管理が簡単になり、特にレイアウトシフトの防止とレスポンシブデザインの実装が効率的に行えます。

おわりに

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