Zenn
Closed21

GatsbyJSと挿入する画像の最適化（gatsby-image）

Gatsby.js
shotakahashotakaha

画像の最適化を改めて考える

  1. 大きな画像はリサイズが必要
  2. スマホ／タブレット用のサイズの画像も複数必要
  3. 不要なメタデータを削除してJPEG／PNGを最適化
  4. 画像はlazy loadさせる
  5. 画像をロードするときはblur-upテクニックを使う
  6. 画像の場所をキープする（画像がロードされるにしたがってページがスクロールしないように）

ものすごく適当に翻訳したが「画像の最適化」といってもいろいろ大変なことが分かった。
これらはぜひ自動でやってもらいたい。だからGatsby Imageを使う。

shotakahashotakaha

gatsby-config.jsに設定を書く

  1. gatsby-plugin-sharpとgastby-transformer-sharpのプラグインを追加する
  2. gatsby-source-filesystemに画像があるディレクトリのパスを追加する

まずgatsby-config.jsを変更することは、チュートリアルをやったので分かる

shotakahashotakaha
  • src/assets/images/に写真を置くことにする
  • name: "images"と名前（なんて呼ぶんだろう）をつけておく
module.exports = {
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images/`,
      },
  ],
}
shotakahashotakaha

GraphQLする

  1. ページコンポーネントにGraphQLクエリを書く
  2. GraphQL "fragments"を使う

https://www.gatsbyjs.com/plugins/gatsby-image/#fragments

fragmentsは後で戻ってくる

shotakahashotakaha
  • src/assets/images/pic01.jpgをGraphQLする
  • とりあえずGraphiQLでクエリを作成する
  • file > relativePathの部分でファイル名を指定する（eq）
  • childImageSharp > fluidを選択、..GatsbyImageSharpFluidのfragmentを挿入
  • HowToガイドにはfragmentは使えないと書いてあるが ...GatsbyImageSharpFluidは使えた
shotakahashotakaha
  • クエリ
query MyQuery {
  file(relativePath: {eq: "pic01.jpg"}) {
    childImageSharp {
      fluid {
        ...GatsbyImageSharpFluid
      }
    }
  }
}
shotakahashotakaha
  • 結果
GraphiQLの結果
{
  "data": {
    "file": {
      "childImageSharp": {
        "fluid": {
          "base64": "data:image/jpeg;base64,/9j/2w...(適当に省略)...2Q",
          "aspectRatio": 1.408450704225352,
          "src": "/static/f7...42/6aab9/pic01.jpg",
          "srcSet": "/static/f7...42/f836f/pic01.jpg 200w,\n
                    /static/f7...42/2244e/pic01.jpg 400w,\n
                    /static/f7...42/6aab9/pic01.jpg 576w",
          "sizes": "(max-width: 576px) 100vw, 576px"
        }
      }
    }
  },
  "extensions": {}
}
shotakahashotakaha

gatsby-imgする

  1. import Img from "gatsby-image"する
  2. Imgを使う

Imgが持ってる属性（props?）はどのページを調べたらいいんだろう

shotakahashotakaha

修正ポイント

  1. ファイルの先頭でgraphqlとImgをimportする
  2. ページコンポーネントの場合、ファイルの末尾にページクエリを書く
  3. 本文のimgをImgに置き換える
import { graphql } from `gatsby`
import Img from `gatsby-image`


const Landing = ({ data }) => (
    <Layout>
    .... いろいろ書く

    <Img fluid={ data.file.childImageSharp.fluid } alt="" />

    .... つづきもいろいろ
    </Layout>
)

export default Landing


export const query = graphql`
  query MyQuery {
    file(relativePath: { eq: "pic08.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`
shotakahashotakaha

複数の画像をクエリする

  • ファイル名を指定して複数クエリを作成する
  • そのままだとエラーがでるので、クエリにaliasをつける
export const query = graphql`
  query MyQuery {
    pic08: file(relativePath: { eq: "pic08.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    pic09: file(relativePath: { eq: "pic09.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`
shotakahashotakaha

ページコンポーネント

  • data.file.の.file.をエイリアス名に変更する
<Img fluid={ data.pic08.childImageSharp.fluid } alt="" />
<Img fluid={ data.pic09.childImageSharp.fluid } alt="" />
shotakahashotakaha

ここまでで分かってないことのまとめ

  1. fragmentsの種類と内容
  2. Imgで指定可能なprops
このスクラップは2021/02/14にクローズされました