[2023年6月版]Astro.js 小ネタ集 その9 画像の最適化
前回に引き続きAstro.jsでの小ネタを紹介していきます。
ここではAstroのExperimental機能である画像最適化サービスと'sharp'モジュールについてご紹介いたします。
また背景画像に対しての画像最適化サービスの適応についてもご紹介いたします。
画像サービスで画像の最適化
本家のチュートリアルでは以下のページです。
Exprerimental な機能ですが、@astrojs/image を使用しない組み込みの画像最適化サービスを有効にします。
さらにsharpを使って画像の最適化を行ってみます。
パッケージの追加と機能の有効化
まずは使用するパッケージをインストールします。
$ npm install sharp
続いて astro.config.mjs で最適化サービスを有効にします。
import { defineConfig, sharpImageService } from 'astro/config';
...
export default defineConfig({
...
experimental: {
assets: true
},
image: {
service: sharpImageService(),
},
...
});
experimental: {assets: true} と image:{ service: sharpImageService()}を追加します。
設定は以上でOKです。
この設定を有効にした後は、public フォルダなどにおいてある画像は、src/assets 以下に移動させてください。
content以下の.mdファイルなどからは  などのように相対パスで指定ができます。
これでassets以下にある画像に対して webp形式の画像が生成され、webp形式の画像が使用できる環境では.webp拡張子のファイルがダウンロードされます。
背景画像の最適化
上記で有効にした画像最適化サービスですが今のところCSS の background-image では対応できていないので、このままでは結局public の画像ファイルを使用することになってしまいます。。。
このままではイケてないので、以下のパッケージを使用し、背景画像についても画像最適化サービスに対応させます。
リファレンスは以下です。
では、パッケージをインストールしてみましょう。
$ npm install astro-imagetools
astroファイルでは、背景画像を指定したいブロックを <BackgroundPicture> タグで囲みます。
だいたい以下のような感じです。
...
<BackgroundPicture
src={`src/assets/cover/${entry.data.cover}`}
saturation={0.5}
>
<h2>{p.data.title}</h2>
</BackgroundPicture>
...
これで背景画像についても webp 形式の画像を使用した最適化が適応されちゃいます💪🏽
今回はここまでといたします。
Discussion