4.2.0 • Published 2 months ago

gatsby-transformer-sharp v4.2.0

Weekly downloads
267,452
License
MIT
Repository
github
Last release
2 months ago

gatsby-transformer-sharp

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)

Install

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

How to use

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

Please note that you must have a source plugin (which brings in images) installed in your project. Otherwise, no ImageSharp nodes can be created for your files. Examples would be gatsby-source-filesystem or source plugins for (headless) CMSs like gatsby-source-wordpress.

Note: An exception to this is when using gatsby-source-contentful, as the source plugin and the assets are not downloaded to the local filesystem. By default, the gatsby-source-contentful plugin creates a ContentfulAsset node for every image with links to Contentful’s CDN, therefore it is not necessary to use gatsby-transformer-sharp together with gatsby-source-contentful.

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.

Configuration options

checkSupportedExtensions boolean

Sharp only supports certain image formats (see the Parsing algorithm section above) and hence throws a warning when you e.g. use a .gif in an ImageSharp query. You'll need to use publicURL instead. With this option you can disable the warning behavior.

// In your gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-sharp`,
      options: {
        // The option defaults to true
        checkSupportedExtensions: false,
      },
    },
  ],
}

Troubleshooting

Incompatible library version: sharp.node requires version X or later, but Z provides version Y

This means that there are multiple incompatible versions of the sharp package installed in node_modules. The complete error typically looks like this:

Something went wrong installing the "sharp" module

dlopen(/Users/misiek/dev/gatsby-starter-blog/node_modules/sharp/build/Release/sharp.node, 1): Library not loaded: @rpath/libglib-2.0.dylib
  Referenced from: /Users/misiek/dev/gatsby-starter-blog/node_modules/sharp/build/Release/sharp.node
  Reason: Incompatible library version: sharp.node requires version 6001.0.0 or later, but libglib-2.0.dylib provides version 5801.0.0

To fix this, you'll need to update all Gatsby plugins in the current project that depend on the sharp package. Here's a list of official plugins that you might need to update in case your projects uses them:

  • gatsby-plugin-sharp
  • gatsby-plugin-manifest
  • gatsby-remark-images-contentful
  • gatsby-source-contentful
  • gatsby-transformer-sharp
  • gatsby-transformer-sqip

To update these packages, run:

npm install gatsby-plugin-sharp gatsby-plugin-manifest gatsby-remark-images-contentful gatsby-source-contentful gatsby-transformer-sharp gatsby-transformer-sqip

If updating these doesn't fix the issue, your project probably uses other plugins from the community that depend on a different version of sharp. Try running npm list sharp or yarn why sharp to see all packages in the current project that use sharp and try updating them as well.

@pil0t/gatsby-theme-novela@storycopter/gatsby-starter-storycopter@thirdwave-network/thirdwave-gatsby-theme@lucasbarcelos/gatsby-theme-mercadolibre-store-custom@stton/gatsby-theme-shopifyshycat-theme-shopify@cangir/gatsby-blog-core@sachinjadhav/gatsby-theme-bloggatsby-plugin-rave@smartassdesign/gatsby-theme-themifygatsby-theme-sky-lite-master@puzzledbytheweb/gatsby-theme-ecommerce-core@studiobear/gatsby-theme-ionic@studiobear/gatsby-theme-blog@prg/gatsby-theme-bedrock@kyrelldixon/gatsby-theme-novela@one-builder/gatsby-theme-ob-master@studiobear/gatsby-theme-blog-ionicgatsby-theme-ob-masterjamstack-boilerplate@hacktion/test-library@shycat/shycat-theme-shopifygatsby-theme-sanity-evelanportfolio-gatsbygatsby-theme-ghost-reloadedgatsby-theme-crystyallizegatsby-startyer-crystyallize@cangir/gatsby-theme-phoenix@cangir/gatsby-theme-photo-core@cangir/gatsby-theme-portfolio-coregatsby-universal@nowseemee/monument@jayellul/gatsby-theme-craftcms@i1r0/gatsby-theme-nehalemgatsby-theme-contactless-menugatsby-theme-minimal-blog-core@rubrik/docs@molecule-ui/system@component-driven/gatsby-theme-content-collectionsgatsby-theme-kuworking-landing-onewebiu-testjeffs-websitegatsby-theme-bejamas-coregatsby-theme-fierce-vanillagatsby-theme-lumengatsby-theme-css-modules-demogatsby-theme-memoriestorichegatsby-theme-katahdingatsby-theme-factlycustom-gatsby-theme-novelatheme-gatsby-shopifyjam-cms-startergatsby-theme-jdoesix-foot-six-designsgatsby-theme-cumberland@juancamiloqhz/gatsby-theme-affiliate-links@ekampf/gatsby-theme-networked-thought@fujuntao/use-form-websitegatsby-typescript-default-startergatsby-typescript-material-ui-startergatsby-typescript-tailwind-starter@dxos/theme-docs@garytee/gatsby-woo-elementorgatsby-woocommerce-elementor-theme@leptest/gatsby-netlify-cmstest-theme-shawacademygatsby-theme-wom-browsegatsby-theme-wom-cartgatsby-theme-wom-checkoutgatsby-theme-wom-login@fengshangwuqi/gatsby-config@mlapida/gatsby-theme-minimal-blog-core@priyank-vaghela/gatsby-custom-theme-instagram@sandalboyz/gatsby-theme-sandalboyzgatsby-theme-sandalboyz@kennethwangdotdev/gatsby-theme-dotdev@pehaa/gatsby-theme-wp-core@pehaa/gatsby-theme-wp-parent@webmaeistro/gatsby-theme-graphql-wp@weknow/gatsby-theme-drupal-boina@wesleylhandy/gatsby-theme-author-base@wesleylhandy/gatsby-theme-author-wpgraphql@whitespace/gatsby-theme-wordpress-basic@westegg/gatsby-theme-recipes@westegg/theme-jasper@westegg/city-limits@westegg/core@westegg/gatsby-theme-casper@westegg/gatsby-theme-core@wkocjan/gatsby-theme-intro@webhostingcoop/gatsby-theme-whc@webhostingcoop/gatsby-theme-whc-dev@yiqilaitech/gatsby-theme-core@zahradnik-io/gatsby-theme-novela@zairon87/gatsby-theme-pixafy@xbge/gatsby-theme@xops.net/gatsby-openrpc-themea-nice-bloggo-themegatsby-emotion-tailwind-starter@supervenz/service-industry-lead-collector
4.2.0-next.1

2 months ago

4.2.0

2 months ago

4.3.0-next.0

2 months ago

4.2.0-next.0

3 months ago

4.1.0

3 months ago

4.0.0

3 months ago

4.1.0-next.0

3 months ago

4.0.0-zz-next.3

3 months ago

4.0.0-zz-next.2

3 months ago

3.14.0

4 months ago

4.0.0-zz-next.1

4 months ago

4.0.0-zz-next.8

4 months ago

4.0.0-next.1

4 months ago

4.0.0-next.0

4 months ago

3.14.0-next.2

5 months ago

3.14.0-next.1

5 months ago

3.13.0

5 months ago

3.14.0-next.0

5 months ago

3.13.0-next.1

5 months ago

3.12.0

5 months ago

3.13.0-next.0

5 months ago

3.12.0-next.3

6 months ago

3.12.0-next.2

6 months ago

3.12.0-next.1

6 months ago

3.11.0

6 months ago

3.12.0-next.0

6 months ago

3.10.0

6 months ago

3.11.0-next.0

6 months ago

3.10.0-next.1

7 months ago

3.9.0

7 months ago

3.10.0-next.0

7 months ago

3.8.0

7 months ago

3.9.0-next.0

7 months ago

3.8.0-next.0

8 months ago

3.8.0-next.1

8 months ago

3.7.1

8 months ago

3.7.0

8 months ago

3.7.0-next.2

8 months ago

3.7.0-next.1

8 months ago

3.6.0

8 months ago

3.5.0-next.0

9 months ago

3.7.0-next.0

8 months ago

3.6.0-next.0

9 months ago

3.5.0

8 months ago

3.4.0

9 months ago

3.3.0

9 months ago

3.4.0-next.0

10 months ago

3.3.0-next.1

10 months ago

3.2.0

10 months ago

3.3.0-next.0

10 months ago

3.1.0

10 months ago

3.2.0-next.0

11 months ago

3.1.0-next.2

11 months ago

2.12.1

11 months ago

3.0.0

11 months ago

3.0.0-v3rc.2

11 months ago

3.0.0-v3rc.1

11 months ago

3.1.0-next.1

11 months ago

3.0.0-v3rc.0

11 months ago

3.1.0-next.0

11 months ago

3.0.0-next.2

11 months ago

3.0.0-next.1

11 months ago

3.0.0-next.0

12 months ago

2.12.0

12 months ago

2.13.0-next.0

12 months ago

2.12.0-next.1

12 months ago

2.11.0

1 year ago

2.12.0-next.0

1 year ago

2.10.1

1 year ago

2.11.0-next.1

1 year ago

2.10.0

1 year ago

2.11.0-next.0

1 year ago

2.10.0-next.3

1 year ago

2.10.0-avif.18

1 year ago

2.10.0-avif.21

1 year ago

2.10.0-next.2

1 year ago

2.10.0-next.1

1 year ago

2.9.0

1 year ago

2.10.0-next.0

1 year ago

2.8.0

1 year ago

2.9.0-next.0

1 year ago

2.7.0

1 year ago

2.8.0-next.1

1 year ago

2.8.0-next.0

1 year ago

2.7.0-next.1

1 year ago

2.6.0

1 year ago

2.6.0-next.1

1 year ago

2.7.0-next.0

1 year ago

2.6.0-next.0

1 year ago

2.5.21

1 year ago

2.5.20

1 year ago

2.5.19

1 year ago

2.5.18

1 year ago

2.5.17

1 year ago

2.5.16

1 year ago

2.5.15

1 year ago

2.5.14

1 year ago

2.5.13

1 year ago

2.5.12

1 year ago

2.5.11

2 years ago

2.5.10

2 years ago

2.5.9

2 years ago

2.5.7

2 years ago

2.5.6

2 years ago

2.5.5

2 years ago

2.5.4

2 years ago

2.5.3

2 years ago

2.5.2

2 years ago

2.5.1

2 years ago

2.5.0

2 years ago

2.4.7

2 years ago

2.4.6

2 years ago

2.4.5

2 years ago

2.4.4

2 years ago

2.4.3

2 years ago

2.4.2

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.3.19

2 years ago

2.3.18

2 years ago

2.3.17

2 years ago

2.3.16

2 years ago

2.3.15

2 years ago

2.3.14

2 years ago

2.3.13

2 years ago

2.3.12

2 years ago

2.3.11

2 years ago

2.3.9

2 years ago

2.3.7

2 years ago

2.3.6

2 years ago

2.3.5

2 years ago

2.3.4

2 years ago

2.3.3

2 years ago

2.3.2

2 years ago

2.3.1

2 years ago

2.3.0

2 years ago

2.2.23

2 years ago

2.2.22

2 years ago

2.2.21

2 years ago

2.2.20

2 years ago

2.2.19

2 years ago

2.2.17

2 years ago

2.2.16

2 years ago

2.2.15

2 years ago

2.2.14

2 years ago

2.2.13

2 years ago

2.2.12

2 years ago

2.2.11

2 years ago

2.2.10

2 years ago

2.2.9

2 years ago

2.2.8

2 years ago

2.2.7

2 years ago

2.2.6

2 years ago

2.2.5

2 years ago

2.2.4

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.21

3 years ago

2.1.20

3 years ago

2.1.19

3 years ago

2.1.18

3 years ago

2.1.17

3 years ago

2.1.16

3 years ago

2.1.16-alpha.0

3 years ago

2.1.15

3 years ago

2.1.14

3 years ago

2.1.13

3 years ago

2.1.12

3 years ago

2.1.10

3 years ago

2.1.9

3 years ago

2.1.8

3 years ago

2.1.7

3 years ago

2.1.6

3 years ago

2.1.5

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.1-rc.3

3 years ago

2.1.1-rc.2

3 years ago

2.1.1-rc.1

3 years ago

2.1.1-rc.0

3 years ago

2.1.1-beta.7

3 years ago

2.1.1-beta.6

4 years ago

2.1.1-beta.5

4 years ago

2.1.1-beta.4

4 years ago

2.1.1-beta.3

4 years ago

2.1.1-beta.2

4 years ago

2.1.1-beta.1

4 years ago

2.1.1-beta.0

4 years ago

1.6.27

4 years ago

2.1.1-alpha.2

4 years ago

2.0.1-16

4 years ago

2.0.1-15

4 years ago

2.0.1-14

4 years ago

2.0.1-13

4 years ago

1.6.26

4 years ago

2.0.1-12

4 years ago

2.0.1-11

4 years ago

2.0.1-10

4 years ago

1.6.25

4 years ago

2.0.1-9

4 years ago

2.0.1-8

4 years ago

1.6.24

4 years ago

2.0.1-5

4 years ago

2.0.1-4

4 years ago

2.0.1-3

4 years ago

1.6.23

4 years ago

2.0.1-2

4 years ago

2.0.1-1

4 years ago

1.6.22

4 years ago

1.6.21

4 years ago

1.6.20

4 years ago

2.0.1-0

4 years ago

1.6.19

4 years ago

1.6.18

4 years ago

1.6.17

4 years ago

1.6.16

4 years ago

1.6.15

4 years ago

1.6.14

4 years ago

1.6.13

4 years ago

1.6.12

4 years ago

1.6.11

4 years ago

1.6.10

4 years ago

1.6.8

4 years ago

1.6.7

4 years ago

1.6.6

4 years ago

1.6.5

4 years ago

1.6.4

4 years ago

1.6.3

4 years ago

1.6.2

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.0

4 years ago

1.4.0

4 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-beta.7

5 years ago

1.0.0-beta.6

5 years ago

1.0.0-beta.1

5 years ago

1.0.0-alpha.23

5 years ago

1.0.0-alpha.22

5 years ago

1.0.0-alpha17

5 years ago

1.0.0-alpha16

5 years ago

1.0.0-alpha15

5 years ago

1.0.0-alpha14

5 years ago

1.0.0-alpha13

5 years ago