gatsby-transformer-sharp

What is gatsby-transformer-sharp?

The gatsby-transformer-sharp package is a Gatsby plugin that allows you to transform images using the Sharp image processing library. It provides a variety of image processing functionalities such as resizing, cropping, and creating responsive images.

What are gatsby-transformer-sharp's main functionalities?

Resize Images

This feature allows you to resize images to specified dimensions. The code sample demonstrates how to resize images to 200x200 pixels using the resize method.

exports.createPages = ({ graphql }) => {
  return graphql(`
    {
      allFile {
        edges {
          node {
            childImageSharp {
              resize(width: 200, height: 200) {
                src
              }
            }
          }
        }
      }
    }
  `).then(result => {
    console.log(result.data.allFile.edges);
  });
};

Generate Thumbnails

This feature allows you to generate fixed-size thumbnails. The code sample demonstrates how to create thumbnails of 125x125 pixels using the fixed method.

exports.createPages = ({ graphql }) => {
  return graphql(`
    {
      allFile {
        edges {
          node {
            childImageSharp {
              fixed(width: 125, height: 125) {
                src
              }
            }
          }
        }
      }
    }
  `).then(result => {
    console.log(result.data.allFile.edges);
  });
};

Create Responsive Images

This feature allows you to create responsive images that adapt to different screen sizes. The code sample demonstrates how to create fluid images with a maximum width of 800 pixels using the fluid method.

exports.createPages = ({ graphql }) => {
  return graphql(`
    {
      allFile {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `).then(result => {
    console.log(result.data.allFile.edges);
  });
};

Other packages similar to gatsby-transformer-sharp

sharp

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

imagemin

Imagemin is an image optimization tool that compresses images to reduce their file size. It supports various image formats and can be used to optimize images during the build process. While it focuses on optimization rather than transformation, it can be used alongside gatsby-transformer-sharp for a complete image processing solution.

jimp

Jimp is an image processing library for Node.js that provides functionalities such as resizing, cropping, and adding filters. It is similar to Sharp but is written entirely in JavaScript, making it easier to use in environments where native modules are not supported.

README

gatsby-transformer-sharp

Creates ImageSharp nodes from image types that are supported by the Sharp image processing library.

Install

npm install --save gatsby-transformer-sharp

How to use

// In your gatsby-config.js
plugins: [
  `gatsby-transformer-sharp`,
]

Parsing algorithm

It recongnizes files with the following extensions as images.

• jpeg
• jpg
• png
• webp
• tif
• tiff
• svg

Each image file is parsed into a node of type ImageSharp.

This plugin is generally installed alongside gatsby-typegen-sharp which adds a number of ways to process your images including resizing, cropping, and creating responsive images.