Gatsby：画像の最適化

参考にさせて頂いた qiita のサイトに、「画像の最適化こそがGatsby.jsを使う最大の理由」と書いてありましたが、具体的にはどういうことなのかは今のところわかりません。

しかし、最大のメリットであれば使うしかないと思い、コピペして動かしてみました。

今回は、my-gatsby-site がすでに作成された後の話です。

画像最適化のためのプラグインを追加

cd ~/my-gatsby-site
yarn add gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem 

~/my-gatsby-site/src/images/sample1.jpg を用意します。

~/my-gatsby-site/gatsby-config.js

module.exports = {
  /* Your site config here */
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
  ],
}

画像を表示するためのコンポーネントを作成

touch ~/my-gatsby-site/src/components/image.js

~/my-gatsby-site/src/components/image.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

export default props => {
  const { allImageSharp } = useStaticQuery(graphql`
    query {
      allImageSharp {
        nodes {
          fluid(maxWidth: 1200) {
            originalName
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)
  return (
    <figure className={props.className} style={props.style}>
      <Img
        fluid={
          allImageSharp.nodes.find(n => n.fluid.originalName === props.filename)
            .fluid
        }
        alt={props.alt}
      />
    </figure>
  )
}

トップページで画像を表示

~/my-gatsby-site/src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"

export default () => (
  <Layout>
    <div>
      <p>トップページのメインコンテンツ！</p>  
      <Link to={"/second/"}>Secondページへのリンク</Link>
      <Image filename="sample1.jpg" alt="サンプル画像" />
    </div>
  </Layout>
)

サーバーを起動すると、

css を設定していないので画像が全画面に表示されます。

ヘッダーなどは左上に小さく表示されています。

sample1.jpg は ~/my-gatsby-site/public/static の中で webp ファイルに変換されそれが表示されるようです。webp はオリジナルの 1/4 程度に圧縮されているようです。