This article is part 3 of “How to start with Gatsby JS” series.
In the first part, we went through some fundamentals.
In the second, we learned how to use typography as a dynamic component.
And now it’s time for image optimization on Gatsby.js websites.
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
READY TO START YOUR GATSBY.JS PROJECT?
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.
Fluid image (dogOne) will stretch when the page is resized and the fixed image (dogTwo) will have fixed width and height. The result is:
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.
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.
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/.
