次世代Gatsby-Imageで画像最適化を行う

執筆日: 2021-03-24

概要

Gatsbyには画像最適化のためのプラグインであるgatsby-imageがあります。
今日ではgatsby-imageに変わり、新しい画像最適化プラグインであるgatsby-plugin-imageが使用できます。

今回は次世代のgatsby-plugin-imageの使用方法についてご紹介します。

gatsby-plugin-imageの特徴

gatsby-imageに比べて、gatsby-plugin-imageには以下のような特徴があります。

  • graphqlのフィールド指定をしなくても良い(gatsbyImageDataを指定するのみ)
  • スタイルシート周りの設定もGatsbyImageの中で完結するようになっている

機能

特徴を踏まえて詳しくみていきましょう。

GraphQL周りの設定

今までは以下のようにGraphQLからフィールドを発行し、それを取得してコンポーネントに入れ込む必要がありました。

公式より
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
export default function Image() {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "images/default.jpg" }) {
        childImageSharp {
          # Specify a fixed image and fragment.
          # The default width is 400 pixels
          fixed {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)
  return (
    <div>
      <h1>Hello gatsby-image</h1>
      <Img
        fixed={data.file.childImageSharp.fixed}
        alt="Gatsby Docs are awesome"
      />
    </div>
  )
}

Imgコンポーネントにfixedを設定する必要があります。
Fluidならばfluidフィールドを発行したりと、分ける必要がありました。

しかし、gatsby-plugin-imageの場合はそのように分ける必要はなくなります。

公式より
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function BlogPost({ data }) {
  // takes file, return file.childImageSharp.gatsbyImageData
 const image = getImage(data.blogPost.avatar)
 return (
   <section>
     <h2>{data.blogPost.title}</h2>
     <GatsbyImage layout="fixed" image={image} alt={data.blogPost.author} />
     <p>{data.blogPost.body}</p>
   </section>
 )
}

export const pageQuery = graphql`
 query {
   blogPost(id: { eq: $Id }) {
     title
     body
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
           width: 200
           placeholder: BLURRED
           formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

GatsbyImageコンポーネントにgatsbyImageDataを指定し、layoutプロパティに fixed, fullWidthといった指定をするのみで画像の最適化が可能になります。

StaticImageで画像パスを指定できる

画像を相対パスで指定できるようになりました。

公式より
import { StaticImage } from "gatsby-plugin-image"

export function Dino() {
 return (
   <StaticImage
     src="../images/dino.png"
     alt="A dinosaur"
     placeholder="blurred"
     layout="fixed"
     width={200}
     height={200}
   />
 )
}

この機能は簡単に画像を指定できることから、嬉しい機能であることがわかります。

使用する際の注意

使用する際の注意点があります。
必要なプラグインのインストールと、gatsbyの必要バージョンなどです。

詳しくは 公式より 参照してみてください。

結論

画像最適化の手段が簡単になるのは喜ばしいことです。
しかし、いつもと違う指定の方法なので、よくドキュメントを見つつ導入することをお勧めします。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店