Svelteの画像最適化ライブラリが公式からリリースされたので使ってみる！

はじめに

Svelteの画像最適化ライブラリがSvelte公式から2023年11月にリリースされました！
現時点ではexperimentalですが、Svelte/SvelteKitを使ってWebサイトを作る上でとても便利なので使ってみたいと思います。

インストール

動作条件としては、Viteを使っていればSvelteKit以外でも動作するようです。

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()
	]
});

使い方

通常の<img>タグを使用する代わりに<enhanced:img>タグを使用します。

<enhanced:img src="./path/to/your/image.jpg" alt="An alt text" />

ビルド時に<enhanced:img>タグは、複数の画像タイプとサイズを提供する<picture>でラップされた<img>に置き換えられますので高画質な画像を用意する必要があります。

以下のように変換されます。

<picture>
  <source srcset="/_app/immutable/assets/sveltejapan.57eed46e.avif 1x, /_app/immutable/assets/sveltejapan.c6b2fccb.avif 2x" type="image/avif">
  <source srcset="/_app/immutable/assets/sveltejapan.7ec56f0d.webp 1x, /_app/immutable/assets/sveltejapan.b0bb76f5.webp 2x" type="image/webp">
  <source srcset="/_app/immutable/assets/sveltejapan.b4e6b5a6.jpg 1x, /_app/immutable/assets/sveltejapan.32070fb0.jpg 2x" type="image/jpeg">
  <img src="/_app/immutable/assets/sveltejapan.32070fb0.jpg" alt="Some alt text" width="512" height="512">
</picture>

ビルドした中身を見てみるとそれぞれの画像タイプとサイズが生成されていることがわかります。

その他、詳しい使い方はドキュメントを確認してください。

さいごに

これからも@sveltejs/enhanced-imgの改良を続け、CDNサポートなどの機能を追加していく予定みたいです。
実際のアプリケーションではCMSからアップロードされた画像等もあると思うので今後のアップデートに期待ですね！