Gatsby – Working with Images

Gatsby is an awesome open source framework based on React. By using Gatsby we can build ⚡️ fast websites and apps. Gatsby provides the easiest way to develop, build and deploy your apps through the command line. Gatsby provides a great plugin to handle image compression and much more functionality that impresses you.

Working with Images

Gatsby provides the gatsby-image plugin. This plugin uses the advanced image loading techniques to easily and completely optimize image loading for your sites.

Features provided by gatsby-image

  • Resizing large images that needs your design
  • Auto generating multiple small images that need for smartphone and tablets
  • Auto Optimize all the loaded images
  • Efficiently lazy-loading images to speed initial page load and save bandwidth
  • Use the Blur-up technique
  • Hold the image position so your page doesn’t jump while the images load

Lets start to install the gatsby-image plugin and its related dependencies.

npm install --save gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

The gatsby-image plugin uses two more plugins to provide better result to load images they are gatsby-transformer-sharp and gatsby-plugin-sharp.

Now we have to load these dependencies to gatsby-config.js file:

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]

Also make sure you have setup the source plugin, so your images are available in graphql queries.

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

This is how we can use the image:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "images/slider_1.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.