Gatsbyウェブサイトに画像を追加する(Static Image)

Gatsbyのウェブサイトを作成し、公開できるようになりました。ただ、ここまでまだ画像を1枚も使っていませんよね。

普通のHTMLのウェブサイトと同じように画像を載せてもいいのですが、Gatsbyのプラグインを利用すると、画像の最適化を簡単に行うことができます。

Gatsbyプラグインは、Gatsbyウェブサイトに簡単に機能を追加することができる要素です。画像の最適化とは、画像の大きさを調整したり、画像の形式を変更して容量を減らしたりすることと言います。

画像をウェブサイトに追加する前にこうした作業を行っても良いのですが、作業を忘れることもあるかもしれないですし、１枚１枚修正するのは面倒です。こうした作業を、画像を追加するだけで、Gatsbyがやってくれるようになります。

gatsby-plugin-imageのインストール

まず、Gatsbyのプラグインは以下のページにまとまっています。この中から、使いたいプラグインを選んで、詳細を見たり使うことができます。

Gatsby Plugin Library | Search 2500+ Plugins

Gatsbyプラグインのインストール自体は、npmを利用してインストールすることになります。

今回はgatsby-plugin-imageというプラグインを利用します。このプラグインを利用することでレスポンシブ対応した画像をウェブサイトで使えるようになります。

また、gatsby-plugin-imageが利用しているプラグインも同時に追加しておきます。gatsby-plugin-sharpとgatsby-source-filesystemです。

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem

gatsby-plugin-sharpが画像の処理を行い、gatsby-source-filesystemはプロジェクトに追加したファイルを取得することができるようになります。

gatsby-config.jsの編集

次に、これらのプラグインをGatsbyウェブサイトで利用するように、gatsby-config.jsファイルを編集します。

# gatsby-config.js

module.exports = {
 siteMetadata: {
   siteurl: "https://localhost:8000",
   title: "GatsbyTutorial",
   lang: "ja",
   description: "Gatsbyウェブサイトの作り方を説明しています",
 },
 plugins: [
   "gatsby-plugin-image",
   "gatsby-plugin-sharp",
   {
     resolve: "gatsby-source-filesystem",
     options: {
       name: `images`,
       path: `${__dirname}/src/images`,
     }
   },
 ]
};

使いたいプラグインを""で囲んで記載するだけです。ただし、プラグインにオプションを設定したいときは、gatsby-source-filesystemのように記載します。

このオプションではsrc/imagesフォルダにあるファイルを、gatsby-source-filesystemが認識するように設定しています。

このファイルを編集した際にローカル開発サーバーが起動されている場合、以下のようなwarningが出るようになります。

gatsby-config.jsの設定を反映するために、一度再起動しておきましょう。

あとは実際にGatsbyウェブサイトのページで、gatsby-plugin-imageを利用するだけです。

Gatsbyのページにウェブ上の画像を追加する

gatsby-plugin-imageをインストールしたことで、<StaticImage>というコンポーネントが使えるようになりました。まずは、このStaticImageをインポートして、コード内で使えるようにします。

import { StaticImage } from 'gatsby-plugin-image'

このStaticImageは通常の<img>タグと同じように利用できます。

<StaticImage
    alt="猫かわいい！"
    src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
/>

StaticImageには２つの引数を渡します。1つはalt属性で、画像の説明文をつけたいときに使います。SEOに対応するのであれば、しっかりと画像を説明するようにしておきましょう。

もう１つはsrcです。これは画像がどこにあるか(source)を示します。今回の場合は、他のウェブページにある画像を持ってきているので、urlを記載しているというわけですね。

これを試しにindex.jsに貼り付けてみましょう。今回はPexelsから無料の猫の画像をお借りします。

# src/pages/index.js

import * as React from 'react'
import Layout from '../components/layout'
import { StaticImage } from 'gatsby-plugin-image'

const TopPage = () => {
 return (
   <Layout pageTitle="TopPage">
     <h1>Hello World!</h1>
      <p>これはStaticImageでウェブ上の画像を表示しています</p>
     <StaticImage
       alt="猫かわいい！"
       src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
     />
   </Layout>
  )
}
export default TopPage

猫の画像が表示されましたね。猫かわいい！

実装結果

Tutorial:StaticImage | 好かれるマーケティング研究室

Gatsbyページにローカルファイルの画像を追加する

ウェブ上にある画像ではなく、プロジェクト内にあるファイルを表示するのも簡単です。

srcのアドレスにローカルファイルのある場所を指定するだけです。ここでは先程の画像をダウンロードして名前をcat.jpgに変更して、src/imagesフォルダの中に入れています。

# src/pages/index.js

import * as React from 'react'
import Layout from '../components/layout'
import { StaticImage } from 'gatsby-plugin-image'

const TopPage = () => {
 return (
   <Layout pageTitle="TopPage">
     <h1>Hello World!</h1>
     <p>これはStaticImageでローカルファイルの画像を表示しています</p>
     <StaticImage
      alt="猫かわいい！"
      src="../images/cat.jpg"
     />      
   </Layout>
  )
}
export default TopPage

これでローカルファイルの画像を表示することができるようになりました。

実装結果

Tutorial:StaticImage locale | 好かれるマーケティング研究室

まとめ

画像を右クリックして、画像のアドレスをコピーしてみてください。

アドレスを表示してみると、画像が.webpという形式に変わっていることに気づくと思います。このようにプラグインを利用すると、画像を軽量化された形式に自動的に変換してくれます。

これによって、ユーザーに画像が表示される速度が向上します。

画像をたくさん使っていればいるほど、この軽量化の恩恵を感じることができることでしょう。

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ