Gatsby.js を使ってマークダウンファイルで記事を書いていますが、記事内の画像（.png や.jpg）を自動で webp にビルドして軽量化する方法についてまとめました。

実装方法（結論）

gatsby-remark-imagesを使います。

ドキュメント

コマンドでプラグインを入れる

必要なプラグインを入れます。

スターターを使って Gatsby.js のプロジェクトを始めた人はすでに入っているものも多いはずです。

npm install gatsby-remark-images gatsby-plugin-sharp gatsby-transformer-remark

gatsby.config.js を修正

すでにこれらのプラグインが入っている可能性があるので、重複しないように文字検索などして確認してください。

plugins: [
  `gatsby-plugin-sharp`,
  {
    resolve: `gatsby-transformer-remark`, //すでに書かれている可能性が高いです
    options: {
      plugins: [
        //他プラグインがすでにあるかも
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 630,
            showCaptions: false,
            withWebp: true, //webpにしてくれる
            withAvif: true, //Avifにしてくれる
          },
        },
      ],
    },
  },
]

このプラグインのオプションについては、以下の記事で詳しく書きました。

gatsby-remark-images の使い方

画像を置く場所が filesystems に定義されているか確認する

今回はこのように追記しました。

gatsby.config.js

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content-images`,
        path: `${__dirname}/content/images`,
      },
    },

画像を相対パスで md ファイルから呼び出す

色々試してみたのですが、絶対パスではうまく行かなかったため相対パスで実装しました。

../が多くあまり気持ちの良い形ではないですが、妥協しました。

├── content
│    ├── blog
     │    └── slug
     │         └── ja.md //記事ファイル
     └── images
           └── sample.png

記事ファイルから呼び出すとき

![](../../images/sample.png)

自分の場合、「別記事でも同じ画像を使いたい」という理由で、このようなディレクトリ構成に辿り着きましたが、後述する方法でもいけます。

うまく行かなかったパターン

1. 画像を置いた場所が filesystems で定義されていない
2. 相対パスで書いていなかった
3. キャッシュが生成されなかった

キャッシュの生成がうまく行かなかったとき

画像フォルダをまるっとコピペしたら画像のキャッシュが生成されなかったので、一旦ローカルサーバーを停止して、

.cacheディレクトリと

publicディレクトリ

の中身を全て削除して再びローカルサーバーを起動したら生成されました。

gatsby develop

まとめ

以上です。

終わってみれば簡単な作業でした。

画像ファイルの読み込み速度の改善ができたので良かったですし、色々と理解が深まった気がしたのでよしっ！

絶対パスで書く方法が実はあったりしたらぜひ教えてください。もやもやしてます。

実は今回の作業で初めて Avif という圧縮形式を知りました。

自分の中では webp が最新だったのに、技術の進歩についていくので必死です。

誰かの参考になれば幸いです。