よっしー
こんにちは。よっしーです(^^)
今日は、SvelteKitでの画像の扱いについて解説しています。
スポンサーリンク
背景
SvelteKitでの画像の扱いについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
Viteの組み込み処理
Viteは、インポートされたアセットを自動的に処理してパフォーマンスを向上させます。これには、CSSのurl()関数を通して参照されるアセットも含まれます。ファイル名にハッシュが追加されることでキャッシュが可能になり、assetsInlineLimitより小さいアセットはインライン化されます。Viteのアセット処理は主に画像に使用されますが、動画や音声などにも有効です。
<script>
import logo from '$lib/assets/logo.png';
</script>
<img alt="The project logo" src={logo} />解説
- Viteの自動アセット処理機能について：
- インポートされたアセットの自動最適化
- パフォーマンス向上のための自動処理
- CSSの
url()関数で参照されるアセットも対象
- 主な処理内容：
- ハッシュ化：
- ファイル名にハッシュを追加
- 効果的なキャッシング戦略の実現
- インライン化：
assetsInlineLimitのサイズ制限より小さいアセット- Base64エンコードされてHTMLやCSSに直接埋め込まれる
- 適用範囲：
- 主に画像ファイル
- 動画ファイル
- 音声ファイル
- その他のアセット
- 実装例の説明：
$lib/assets/logo.pngから画像をインポート- インポートした画像を
img要素のsrc属性に設定 - 適切な
alt属性の設定による アクセシビリティへの配慮
この機能により、開発者は手動でアセットの最適化を行う必要がなく、Viteが自動的に効率的なアセット管理を提供します。これは開発効率の向上とパフォーマンスの最適化の両方に貢献します。
おわりに
今日は、 SvelteKitでの画像の扱いについて解説しました。
よっしー
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント