@sveltejs/enhanced-imgによる画像最適化
enhanced:imgコンポーネントで、適切なサイズの次世代画像を配信します。
「@sveltejs/enhanced-imgによる画像最適化」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
画像の最適化
@sveltejs/enhanced-img プラグインは、ビルド時にレスポンシブ画像と最新形式の画像を生成します。
インストール
開発用依存関係に追加し、Vite の設定に登録します。
npm install -D @sveltejs/enhanced-imgVite の設定
vite.config.js にプラグインを追加します。
import { enhancedImages } from "@sveltejs/enhanced-img/vite";
plugins: [enhancedImages(), sveltekit()]コンポーネントの使用
専用のクエリを付けて画像をインポートし、<enhanced:img> を使用します。
import Hero from "./hero.jpg?enhanced";
<enhanced:img src={Hero} alt="Hero" />srcset の自動生成
プラグインは、srcset 用に複数のサイズと形式（AVIF、WebP）を生成します。
遅延読み込み
ファーストビューより下にある画像には、loading="lazy" を追加します。
<enhanced:img src={Hero} alt="..." loading="lazy" />アスペクト比
プラグインは幅と高さを含めるため、レイアウトシフトを防止できます。
CDN ホスティング
動的な画像には、実行時のリサイズに対応した Cloudinary、Imgix、または Vercel's Image Optimization の利用を検討してください。
最新形式
AVIF と WebP を使用すると、JPEG/PNG と比べてファイルサイズを 30～70% 削減できます。
パフォーマンスへの影響
画像の最適化は、コンテンツサイトにおいて、多くの場合で単独で最も大きなパフォーマンス改善効果をもたらします。
ビルドコスト
画像処理によってビルド時間が長くなります。インクリメンタルビルドのために出力をキャッシュしてください。
確認
enhanced-img は何を生成しますか？
まとめ
@sveltejs/enhanced-img を使用すると、最新形式と srcset に対応したレスポンシブ画像をビルド時に生成できます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「@sveltejs/enhanced-imgによる画像最適化」レッスンは無料ですか？
はい。「@sveltejs/enhanced-imgによる画像最適化」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「@sveltejs/enhanced-imgによる画像最適化」で何を学びますか？
enhanced:imgコンポーネントで、適切なサイズの次世代画像を配信します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「@sveltejs/enhanced-imgによる画像最適化」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- コード分割と動的インポート
- @sveltejs/enhanced-imgによる画像最適化
- コンポーネントの遅延読み込み
- SvelteKitアプリのプロファイリング