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

用語解説

2024.12.11

この記事は約4分で読めます。

よっしー

こんにちは。よっしーです(^^)

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

背景
@sveltejs/enhanced-img
1. 解説
セットアップ
おわりに

背景

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

@sveltejs/enhanced-img

@sveltejs/enhanced-imgは、Viteの組み込みアセット処理機能の上に提供されるプラグインです。このプラグインは、avifやwebpなどの小さなファイルフォーマットの提供、レイアウトシフトを防ぐための画像の固有のwidthとheightの自動設定、様々なデバイス向けの複数サイズの画像生成、プライバシーのためのEXIFデータの削除など、プラグアンドプレイの画像処理を提供します。このプラグインは、SvelteKitプロジェクトに限らず、Viteベースのあらゆるプロジェクトで動作します。

ビルドプラグインとして、@sveltejs/enhanced-imgはビルドプロセス中にローカルマシン上にあるファイルのみを最適化できます。データベース、CMS、バックエンドから提供されるパスなど、他の場所にある画像がある場合は、CDNからの動的な画像読み込みに関する説明をご参照ください。

警告：@sveltejs/enhanced-imgパッケージは実験的なものです。1.0以前のバージョニングを使用しており、マイナーバージョンのリリースごとに破壊的な変更が導入される可能性があります。

解説

プラグインの主な機能：

最適化された画像フォーマットの生成：
- avifフォーマットサポート
- webpフォーマットサポート
レイアウト最適化：
- 固有のwidthとheightの自動設定
- Cumulative Layout Shift（CLS）の防止
レスポンシブ対応：
- 複数デバイス向けの異なるサイズの画像生成
プライバシー保護：
- EXIFデータの自動削除

使用上の制限事項：

ローカルファイルのみの最適化
外部画像（DB、CMS、バックエンド）は対象外
CDNからの動的読み込みは別途対応が必要

実験的な性質：

プレリリース段階（1.0未満）
破壊的変更の可能性
マイナーバージョンでの仕様変更の可能性

このプラグインは、画像最適化の包括的なソリューションを提供しますが、実験的な性質を理解した上で使用する必要があります。特に本番環境での使用には注意が必要です。

セットアップ

インストール

npm install --save-dev @sveltejs/enhanced-img

vite.config.jsの調整

import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        enhancedImages(),
        sveltekit()
    ]
});

画像変換の計算コストにより、最初のビルドは時間がかかります。しかし、ビルド出力は./node_modules/.cache/imagetoolsにキャッシュされるため、以降のビルドは高速になります。」

解説

インストール手順：

npm（Node Package Manager）を使用
開発依存関係（–save-dev）としてインストール
パッケージ名：@sveltejs/enhanced-img

設定ファイルの変更：

vite.config.jsの修正
必要なモジュールのインポート：
- sveltekit：SvelteKitの基本機能
- enhancedImages：画像最適化プラグイン
- defineConfig：Viteの設定定義用
プラグインの設定：
- enhancedImages()をsveltekit()の前に配置
- プラグインの実行順序が重要