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で表示してくれます。