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

Contentful からマークダウン形式で記事情報を取得した際、埋め込まれている画像情報は最適化されていません。今回は埋め込みの画像まで最適化し、対応ブラウザで WebP に変換して表示する方法を紹介します。

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

今回使用するのは、gatsby-remark-images-contentfulというプラグインです。以下のコマンドからインストールできます。

npm i -D gatsby-remark-images-contentful

プラグインを使うにあたって、gatsby-transformer-remark プラグインが必須となります。外部コンテンツを API で取得後再加工するために必要となるプラグインですので、入っていないことは少ないと思いますが、追加されていない方は合わせてインストールしてください。

npm i -D gatsby-transformer-remark

プラグインを追加する

続いてインストールしたプラグインを gatsby.config.js へ追加していきます。

追加方法が少し特殊で、gatsby-transformer-remark プラグインのプラグインとして追加します。

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

gatsby-transformer-remark プラグインのオプションにはさらにプラグインを設定できるようになっており、そこに gatsby-remark-images-contentful を追加します。

そして、gatsby-remark-images-contentful のオプションに withWebp: true を設定することで、記事中の画像が最適化され、対応ブラウザでは webp で表示してくれます。