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

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

背景

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

@sveltejs/enhanced-img

画像ごとの変換

デフォルトでは、拡張画像はより効率的なフォーマットに変換されます。ただし、ぼかし、品質、平坦化、回転などの他の変換を適用したい場合があるかもしれません。クエリ文字列を追加することで、画像ごとの変換を実行できます：

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

利用可能なディレクティブの完全なリストについては、imagetoolsリポジトリを参照してください。

解説

1. デフォルトの変換処理：

• 効率的なフォーマットへの自動変換
• 最適化の自動適用

1. カスタム変換オプション：

• blur（ぼかし）
• quality（品質）
• flatten（平坦化）
• rotate（回転）

1. 変換の適用方法：

• クエリパラメータの使用
• URLクエリ文字列形式での指定
• 画像パスへのパラメータ追加

1. 実装例の解説：

• ?blur=15：
  • ぼかしエフェクトの適用
  • 強度パラメータの指定（15）
• 代替テキストの保持

1. 使用上の注意点：

• 変換の組み合わせが可能
• パフォーマンスへの影響考慮
• 適切な変換パラメータの選択

このような画像ごとの変換機能により、個々の画像に特化した最適化や視覚効果の適用が可能になり、より柔軟な画像処理が実現できます。詳細なオプションについては、公式のimagetoolsリポジトリを参照することが推奨されています。

おわりに

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