How To Start With GatsbyJS – part 3: Gatsby Image

Share

This article is part 3 of “How to start with Gatsby JS” series.

Step 6. Gatbsy Image

One of the most important advantages of Gatsby is it works very fast.

Many delays in loading pages are caused by too big and non-optimized images. Gatsby has several useful plugins that help completely optimize images and maintain great performance on our website.

The recommended approach is to use gatbsy-image – React component designed to work with Gatsby’s GraphQL queries.

It generates multiple sizes and resolutions of each image so you don’t load large images on a mobile device. You have already installed gatsby-image and others needed plugins (gatsby-transformer-sharp, gatsby-plugin-sharp and gatsby-source-filesystem) in the starter (take a look package.json).

Add some images to assets/images. You can download beautiful and free images from https://unsplash.com.

Navigate to the gatsby-config.js and set up a source-filesystem plugin so that your images are available in image queries.

{
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/src/assets/images`,
    name: 'images',
  },
},

Gatbsy-image supports two types of responsive images:

  • fixed (images that have fixed width and height)
  • fluid (images that stretch when the page is resized).

Here you can find more info about the type of responsive images.

So let’s create a Gatsby image! This example shows a gallery of two images using two methods. Import Graphql from Gatsby and gatsby-image and use it in place of the built-in img.

pages/index.js

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

const IndexPage = ( {data} ) => (
  <ThemeProvider theme={theme}>
    <Layout>
      <Img fluid={data.dogOne.childImageSharp.fluid} />
      <Img fixed={data.dogTwo.childImageSharp.fixed} />
    </Layout>
  </ThemeProvider>
);

export default IndexPage;

Next, write a GraphQL query using one of the included GraphQL fragments which specify the fields needed by gatsby-image. The GraphQL query creates multiple thumbnails with optimized JPEG and PNG compression.

pages/index.js

export const query = graphql`
  query {
    dogOne: file(relativePath: { eq: "picture-1.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 500, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    dogTwo: file(relativePath: { eq: "picture-2.jpeg" }) {
      childImageSharp {
        fixed(width: 500, quality: 100) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

Test your query using https://www.gatsbyjs.org/docs/running-queries-with-graphiql/ a tool that helps you structure GraphQL queries correctly. You can access it when your site’s development server is running at http://localhost:8000/___graphql

Fluid image (dogOne) will stretch when the page is resized and the fixed image (dogTwo) will have fixed width and height. The result is:

Gatsby-image Example

Gatbsy-image lazy loads your images with a pretty nice “blur-up” effect. If you don’t want to use this effect, you can experiment with others value at the end of fragment.

To learn more, read the Fragments section https://www.gatsbyjs.org/packages/gatsby-image/

For example:

dogOne: file(relativePath: { eq: "picture-1.jpeg" }) {
  childImageSharp {
    fluid(maxWidth: 500, quality: 100) {
      ...GatsbyImageSharpFluid_noBase64
    }
  }
}
dogTwo: file(relativePath: { eq: "picture-2.jpeg" }) {
  childImageSharp {
    fixed(width: 500, quality: 100) {
      ...GatsbyImageSharpFixed_tracedSVG
    }
  }
}

Images are loaded with other effects.

Gatsby-image Example

Remember that gatbsy-image doesn’t support GIF and SVG images.

To use GIF image, Gatsby recommends to import the image directly. In the case of SVG, creating multiple variants of the image doesn’t make sense because it is vector-based graphics that you can freely scale without losing quality.

Conclusion

As you can see, work with Gatsby is pleasant, and the benefits of using it are really great. Hope you enjoyed this article and got inspired to broaden your knowledge about Gatsby 🙂 I encourage you to dive into more documentation and tutorials on https://www.gatsbyjs.org/docs/.

Resources

Would you add anything?

GatsbyJS is still a hot thing, so do not hesitate to add your thoughts and share your experience with it in the comment.

Comments
    Leave a Reply

    View Comments (0)...

    Related articles:

    What is JAMstack?

    How To Start With GatsbyJS – part 2: Typography as Dynamic Component