gatsby-image＆gatsby-plugin-sharpを使用したGatsbyの画像

投稿日: 2022-04-20 2022-04-20
タグ: GatsbyJS

ユーザーがウェブ上の画像で最高のエクスペリエンスを確実に得られるようにすることは、退屈な作業になる可能性があります。ただし、Gatsbyを使用すると、 Sharp のパワーを活用して、わずかなセットアップと豊富なツールセットで最高のパフォーマンスを得ることができます。

この記事では、 gatsby-image コンポーネントと、さまざまなシナリオで画像を使用するプロセスを簡素化する方法について説明します。このガイドの手順は、Gatsbyプロジェクトが機能していることを前提としています。したがって、まだ行っていない場合は、 Gatsby FirstStepsの記事に従ってGatsbyを開始できます。

入門

必要なプラグインをインストールすることから始めましょう。使用しているGatsbyスターターによっては、これらがすでにインストールされている場合があります。 package.jsonをチェックして、それが当てはまるかどうかを確認してください。

インストール

ここにいくつかのものをインストールします。それぞれが画像設定で異なる役割を果たします。これについては、もう少し詳しく説明します。

$ npm install --save gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

構成

次に、これらをgatsby-config.jsに追加します。

gatsby-config.js

const path = require('path');

module.exports = {
  plugins: [
    ...
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: path.join(__dirname, `src`, `images`),
      },
    },
  ],
}

gatsby-source-filesystemも構成していることに注意してください。これは、画像からファイルノードを作成して、graphqlクエリで使用できるようにするためです。このガイドでは、画像をsrc/imagesディレクトリに配置しています。

他のプラグインについて：

gatsby-plugin-sharp は、Sharpとgatsby-imageの間の接続を強化する低レベルのヘルパーです。また、いくつかの画像処理機能を公開しています。
gatsby-transformer-sharp は、適切なサイズと解像度の複数の画像の作成を容易にします。

画像の操作

セットアップが完了したので、サイトで画像の操作を開始できます。画像で使用するhero.jsコンポーネントを作成しましょう。

src / components / hero.js

import React from 'react';

export default ({ data }) => (
  <section>
    <div>
      <h1>Hi, I like websites.</h1>
      <p>Sometimes I make them.</p>
    </div>
  </section>
)

画像のクエリ

gatsby-transformer-sharp プラグインは、クエリ用にタイプImageSharpのノードを作成します。 fixedまたはfluidのいずれかになります。

Fixed は、クエリでwidthおよびheigh引数を取り、固定サイズの画像を提供します。
Fluid は、クエリの引数としてmaxWidthとmaxHeightを取り、レスポンシブな画像サイズを提供します。

これらの両方には、を利用するさまざまなファイルサイズがありますメディアブレークポイントに基づいて適切なファイルサイズをロードする要素。

src / components / hero.js

export const query = graphql`
  query {
    file(relativePath: { eq: "images/heroImage.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 1600, maxHeight: 800) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`

クエリには、...GatsbyImageSharpFluid_withWebp Fragment が含まれています。これは、基本的にいくつかの事前定義されたプロパティをインポートします。利用可能なフラグメントの詳細については、 gatsby-imageReadmeを参照してください。

このクエリをGraphiQLで実行して、自由に使用できるいくつかの便利なプロパティを参照できます。

Gatsby画像コンポーネントの使用

クエリができたので、前に作成したhero.jsコンポーネントで使用してみましょう。 gatsbyからgraphqlをインポートし、gatsby-imageからImgをインポートする必要があります。

src / components / hero.js

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';

export default ({ data }) => (
  <section>
    <Img
      fluid={data.file.childImageSharp.fluid}
      alt="This is a picture of my face."
    />
    <div>
      <h1>Hi, I like websites.</h1>
      <p>Sometimes I make them.</p>
    </div>
  </section>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "images/heroImage.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 1600, maxHeight: 800) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`

altプロップを使用する以外に、Imgコンポーネントは、styleおよびimgStyleを、親コンテナーおよびimg要素。完全なリストについては、コンポーネントのドキュメントを確認してください。

Gatsbyは、レスポンシブで遅延読み込みされた一連の画像をレンダリングします。これらは圧縮され、不要なメタデータが削除され、負荷に対する「ブラーアップ」効果が含まれます。悪くない！

ポリフィル

object-fit / object-positionCSSプロパティで使用できるポリフィルもあります。代わりに、gatsby-image/withIEPolyfillからインポートできます。コンポーネントは、object-fit-imagesポリフィルを画像に自動的に適用するようにGatsbyに指示します。

src / components / hero.js

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image/withIEPolyfill';

export default ({ data }) => (
  <section>
    <Img
      fluid={data.file.childImageSharp.fluid}
      objectFit="cover"
      objectPosition="50% 50%"
      alt="This is a picture of my face."
    />
    ...
  </section>
)

...

画像圧縮

デフォルトでは、gatsby-plugin-sharpはさまざまな圧縮ライブラリを使用します。ただし、デフォルトの動作を変更したい場合は、いくつかのオプションを設定できます。

gatsby-config.js

module.exports = {
  plugins: [
    ...
    {
      resolve: 'gatsby-plugin-sharp',
      options: {
        useMozJpeg: false,
        stripMetadata: true,
        defaultQuality: 75,
      },
    },
  ],
}

オプションでMozJPEGを使用して、JPEG圧縮をさらに向上させることができます。ただし、これによりビルド時間が大幅に増加する可能性があることに注意してください。

画像を変更および最適化するために利用できるすべての方法については、プラグインのドキュメントを確認してください。

結論

これは、ギャツビーの画像でできることのほんの一部にすぎません。可能な限り多くのパフォーマンスを絞り出したい場合でも、ユーザーに高品質のエクスペリエンスを提供したい場合でも、Gatsbyの豊富なツールセットで対応できます。リンクされているすべてのリソースを読み、プラグインを試して、ニーズに最適なものを見つけることをお勧めします。

getdocs

13036