Contentfulから取得した記事中の画像を、WebPに変換する

Gatsby + Contentful の構成で、Contentful のマークダウン本文に埋め込んだ画像は、そのままでは元のサイズ・形式で配信されてしまいます。この記事では、gatsby-remark-images-contentful プラグインを使い、本文中の画像をリサイズし、対応ブラウザには WebP で表示させる設定手順を紹介します。

前提

• Gatsby のサイトで、gatsby-source-contentful により Contentful からデータを取得している
• 記事本文は Contentful の Long text（マークダウン）フィールドで管理している
• 画像変換に使う gatsby-plugin-sharp が導入済み（未導入の場合は下記で一緒にインストールします）

プラグインをインストールする

使用するのは gatsby-remark-images-contentful です。マークダウン内の Contentful 画像を処理するプラグインで、gatsby-transformer-remark のサブプラグインとして動作します。

npm i gatsby-remark-images-contentful gatsby-transformer-remark gatsby-plugin-sharp

プラグインを追加する

gatsby-config.js に設定します。gatsby-remark-images-contentful は単独ではなく、gatsby-transformer-remark の plugins オプションの中に追加する点に注意してください。

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images-contentful`,
        options: {
          maxWidth: 980,
          withWebp: true,
        },
      },
    ],
  },
},

主なオプションは次のとおりです。

設定後に gatsby clean してからビルドし直すと、記事中の画像が srcset 付きのレスポンシブ画像となり、対応ブラウザでは WebP が読み込まれます。ブラウザの開発者ツールのネットワークタブで、画像の種類が webp になっていることを確認してください。

うまく変換されない場合

• 画像が Contentful のアセット URL（images.ctfassets.net）でないと対象になりません。外部サイトの画像は変換されません。
• gatsby-transformer-remark を使わずに別のマークダウン処理（MDX など）をしている場合、このプラグインは使えません。
• 変更が反映されないときは gatsby clean でキャッシュを削除してください。