Gatsby.jsでマークダウン内の外部URLの画像もgatsby-imageで最適化したい！

3472 ワード
gatsby JavaScript JavaScript テキストリンク

はじめに

こんにちは。いきものがかりのほっちが卒業することを発表しました。ファンとしては残念ですが、これからの活動を応援しております！

さて、Gatsby.jsで画像の最適化を行うgatsby-imageを使用しています。

その際に、マークダウン中に挿入している画像が、外部URLの場合にも、gatsby-imageを適用する方法を見つけましたので共有します！

これで行けます

以下を使用すると、外部URLの画像をダウンロードしてbuild時にstaticファイルとして配置してくれます
https://www.gatsbyjs.com/plugins/gatsby-remark-images-anywhere/

まずはパッケージをインストールします。

$ npm install gatsby-remark-images-anywhere

で設定に以下を追加します。

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images-anywhere`,
          },
        ],
      },
    },
  ]
}

あとはbuild等々すればOK！

実施前

![sample](https://example.com/sample.jpg)
↓
<img src="https://example.com/sample.jpg" alt="sample" title="sample" />

追加後

![sample](https://example.com/sample.jpg)
↓
<img
  class="gria-image"
  src="/static/xxxxxx/aaaaa/181128.jpg"
  srcset="
    /static/xxxxxx/bbbbb/181128.jpg 200w,
    /static/xxxxxx/ccccc/181128.jpg 400w,
    /static/xxxxxx/ddddd/181128.jpg 784w"
  title="sample"
  alt="sample"
  style="
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;"
/>

おわりに

これでマークダウンで挿入した外部URLの画像もgatsby-imageによって最適化されて表示できます
サイトのパフォーマンス改善にぜひ！