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

最新の記事

特定のHTML要素のclassListを全て削除(リセット)する方法
2021-10-14

特定のHTML要素のclassListを全て削除(リセット)する方法

JavaScript
KintoneからChatworkのユーザ一覧を取得する
2021-9-15

KintoneからChatworkのユーザ一覧を取得する

JavaScriptKintone
TypeScriptで楽天ブックス書籍検索APIを使う📚
2021-9-13

TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptJavaScript
【kintone】Webフォントを適用する
2021-9-8

【kintone】Webフォントを適用する

KintoneJavaScript
KintoneからChatworkにメッセージを送る
2021-9-6

KintoneからChatworkにメッセージを送る

JavaScript