gatsby-sharp

What is gatsby-sharp?

gatsby-sharp is a Gatsby plugin that provides image processing capabilities using the Sharp image processing library. It allows you to perform various image transformations such as resizing, cropping, and creating responsive images with ease.

What are gatsby-sharp's main functionalities?

Resize Images

This feature allows you to resize images to a specified width while maintaining the aspect ratio. The code sample demonstrates how to query for images and resize them to a maximum width of 800 pixels.

const { fluid } = require('gatsby-sharp');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    {
      allFile {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);

  result.data.allFile.edges.forEach(({ node }) => {
    createPage({
      path: `/image/${node.childImageSharp.fluid.src}`,
      component: require.resolve('./src/templates/image.js'),
      context: {
        fluidImage: node.childImageSharp.fluid
      }
    });
  });
};

Crop Images

This feature allows you to crop images to specified dimensions. The code sample demonstrates how to query for images and crop them to a width and height of 400 pixels.

const { fixed } = require('gatsby-sharp');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    {
      allFile {
        edges {
          node {
            childImageSharp {
              fixed(width: 400, height: 400) {
                ...GatsbyImageSharpFixed
              }
            }
          }
        }
      }
    }
  `);

  result.data.allFile.edges.forEach(({ node }) => {
    createPage({
      path: `/image/${node.childImageSharp.fixed.src}`,
      component: require.resolve('./src/templates/image.js'),
      context: {
        fixedImage: node.childImageSharp.fixed
      }
    });
  });
};

Create Responsive Images

This feature allows you to create responsive images that adapt to different screen sizes. The code sample demonstrates how to query for images and generate responsive images with a maximum width of 1200 pixels.

const { fluid } = require('gatsby-sharp');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    {
      allFile {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 1200) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);

  result.data.allFile.edges.forEach(({ node }) => {
    createPage({
      path: `/image/${node.childImageSharp.fluid.src}`,
      component: require.resolve('./src/templates/image.js'),
      context: {
        fluidImage: node.childImageSharp.fluid
      }
    });
  });
};

Other packages similar to gatsby-sharp

sharp

Sharp is a high-performance image processing library for Node.js. It provides a wide range of image manipulation capabilities such as resizing, cropping, and format conversion. Unlike gatsby-sharp, which is specifically designed for use with Gatsby, sharp can be used in any Node.js application.

jimp

Jimp is an image processing library for Node.js that supports various image manipulation operations such as resizing, cropping, and color adjustments. It is similar to sharp but is written entirely in JavaScript, making it easier to install and use in environments where native modules are problematic.

gm

gm (GraphicsMagick for Node.js) is a Node.js wrapper for the GraphicsMagick and ImageMagick image processing libraries. It provides extensive image manipulation capabilities and supports a wide range of image formats. Compared to gatsby-sharp, gm offers more advanced features but requires the installation of external dependencies.

README

The README file is missing