• 商品一覧
  • お問合せ
  • ブログ記事
お仕事の依頼
好かれるマーケティング研究室のデフォルトサムネイル画像

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

2021-11-12
Gatsbyのウェブサイトを作成し、公開できるようになりました。ただ、ここまでまだ画像を1枚も使っていませんよね。
普通のHTMLのウェブサイトと同じように画像を載せてもいいのですが、Gatsbyのプラグインを利用すると、画像の最適化を簡単に行うことができます。
Gatsbyプラグインは、Gatsbyウェブサイトに簡単に機能を追加することができる要素です。画像の最適化とは、画像の大きさを調整したり、画像の形式を変更して容量を減らしたりすることと言います。
画像をウェブサイトに追加する前にこうした作業を行っても良いのですが、作業を忘れることもあるかもしれないですし、1枚1枚修正するのは面倒です。こうした作業を、画像を追加するだけで、Gatsbyがやってくれるようになります。

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

まず、Gatsbyのプラグインは以下のページにまとまっています。この中から、使いたいプラグインを選んで、詳細を見たり使うことができます。
Gatsby Plugin Library Gatsby Plugin Library
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 gatsby-config.js編集後の再起動
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には2つの引数を渡します。1つはalt属性で、画像の説明文をつけたいときに使います。SEOに対応するのであれば、しっかりと画像を説明するようにしておきましょう。
もう1つは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
猫の画像が表示されましたね。猫かわいい!
Gatsby 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
これでローカルファイルの画像を表示することができるようになりました。
Gatsby StaticImage プロジェクト内の猫の画像

まとめ

ところで、画像を右クリックして、画像のアドレスをコピーしてみてください。
画像のアドレスのコピー
アドレスを表示してみると、画像が.webpという形式に変わっていることに気づくと思います。このようにプラグインを利用すると、画像を軽量化された形式に自動的に変換してくれます。
これによって、ユーザーに画像が表示される速度が向上します。
画像をたくさん使っていればいるほど、この軽量化の恩恵を感じることができることでしょう。

無料メルマガ

今すぐもっと好かれる!

プロフィール

西松 大輝:マーケティング・サイエンティスト

数字から愛へ
・「何を変えるか?」を行動経済学・TOCLSSで分析する。
・「何を伝えるか?」を戦略・マーケティングで明確にする。
・「何を測定するか?」を機械学習・ITで支援する。

"全部"やらなくっちゃあならないってのが 「マーケティング・サイエンティスト」のつらいところだな。
覚悟はいいか?僕はできてる
  • お仕事の依頼
  • お問合せ
  • プライパシーポリシー
  • 特定商取引法に基づく表記
2019-2022, 好かれるマーケティング研究室©