Zenn
🤖

[2023年6月版]Astro.js 小ネタ集 その9 画像の最適化

2023/06/28に公開
sharp
Astro
tech

前回に引き続きAstro.jsでの小ネタを紹介していきます。

ここではAstroのExperimental機能である画像最適化サービスと'sharp'モジュールについてご紹介いたします。
また背景画像に対しての画像最適化サービスの適応についてもご紹介いたします。

画像サービスで画像の最適化

本家のチュートリアルでは以下のページです。

Exprerimental な機能ですが、@astrojs/image を使用しない組み込みの画像最適化サービスを有効にします。

さらにsharpを使って画像の最適化を行ってみます。

パッケージの追加と機能の有効化

まずは使用するパッケージをインストールします。

$ npm install sharp

続いて astro.config.mjs で最適化サービスを有効にします。

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ファイルなどからは ![sample image](../../assets/sample_image_001.png) などのように相対パスで指定ができます。

これでassets以下にある画像に対して webp形式の画像が生成され、webp形式の画像が使用できる環境では.webp拡張子のファイルがダウンロードされます。

背景画像の最適化

上記で有効にした画像最適化サービスですが今のところCSS の background-image では対応できていないので、このままでは結局public の画像ファイルを使用することになってしまいます。。。

このままではイケてないので、以下のパッケージを使用し、背景画像についても画像最適化サービスに対応させます。

リファレンスは以下です。

では、パッケージをインストールしてみましょう。

$ npm install astro-imagetools

astroファイルでは、背景画像を指定したいブロックを <BackgroundPicture> タグで囲みます。

だいたい以下のような感じです。

src/pages/index.astro
...
  <BackgroundPicture
    src={`src/assets/cover/${entry.data.cover}`}
    saturation={0.5}
  >
      <h2>{p.data.title}</h2>
  </BackgroundPicture>
...

これで背景画像についても webp 形式の画像を使用した最適化が適応されちゃいます💪🏽

今回はここまでといたします。

Discussion