Gatsby transformer plugin for images using Sharp


2.1.1-rc.84 years ago4 years agoMinified + gzip package size for @alexkirsz/gatsby-transformer-sharp in KB



Creates ImageSharp nodes from image types that are supported by the Sharp image processing library and provides fields in their GraphQL types for processing your images in a variety of ways including resizing, cropping, and creating responsive images.

Live demo (source)


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

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-sharp`, `gatsby-transformer-sharp`],

Parsing algorithm

It recognizes files with the following extensions as images.

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

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.