How to Gatsby: The Complete Course/

...

/

Working with Images

Working with Images

Learn how to use images in a Gatsby site.

We'll cover the following...

Introduction

Images are essential in websites and applications, and we can hardly do without them. Therefore, we need to properly and responsively render them in the best way possible for different sizes. Doing this ourselves can be very difficult. This is why Gatsby provides us with a plugin that provides us optimized images in multiple formats and sizes.

The plugin we are referring to is gatsby-plugin-image, and we demonstrate how this works by adding images to the Me page.

Usage

To begin, we need to install this plugin together with the other plugins it needs to work effectively. To do this, let’s run the following command:

Press + to interact
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp

Note: All these plugins come bundled with the default starter we used to bootstrap our project. However, we’ll install it anyway to ensure it’s up to date.

The next step is to add the plugins to gatsby-config.js, if they’re not already there:

Press + to interact
plugins: [
  `gatsby-plugin-image`,
  `gatsby-plugin-sharp`,
  `gatsby-transformer-sharp`,
  // Configure gatsby-source-filesystem
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: `${__dirname}/src/images`,
    },
  },
],

The StaticImage vs. the GatsbyImage component

The gatsby-plugin-image plugin provides us with two components to render responsive images. Based on our use case, we have to decide on which one to use.

The StaticImage component

This component is used to render static images. These images don’t change and are the same each time the component is used. These can be images such as site logos, hero images, etc. Images like these can be stored either as local files or hosted remotely and accessed via a web URL. In the case of the latter, the images are downloaded at build time.

We’ll use this good-looking image of a superhero to show how this is used.

If we want to try it out on a local server, we can download the file below and move the image to the src/images folder:

Super Hero

We then replace the code of our me.js file with the code below:

Press + to interact
import React from 'react'
import Seo from "../components/seo"
import { StaticImage } from 'gatsby-plugin-image'
const Me = () => {
    return (
        <>
            <Seo title="Me" description="This page talks about who I am."/>
            <p>Hey, look at me! I'm super cool!</p>
            <h2>Static Image</h2>
            <div>
                <h3>Using local file</h3>
                <StaticImage src="../images/super-hero.png" width={400} height={400} alt='Super-Hero'/>
            </div>
            <br />
            <div>
                <h3>Using remote file</h3>
                <StaticImage src="https://placedog.net/500/280" alt='A dog'/>
            </div>
        </>
    )
}
export default Me;

In the code above, we import the StaticImage component from the plugin. On lines 14 and 20, we use the component for our local and remote files, respectively. The superhero image used is too large, so we set a width and height property on the component. If all works, we should have something similar to the images below:

Note: The image of the dog may be different, as the API returns a random dog ...