Ribbit.work

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

GatsbyContentful

last modified date2021-7-9

publish date2021-6-13

こんにちはリビットです。

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

この記事をシェア

最新の記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript