1 | # gatsby-transformer-sharp
|
2 |
|
3 | Creates `ImageSharp` nodes from image types that are supported by the
|
4 | [Sharp](https://github.com/lovell/sharp) image processing library and provides
|
5 | fields in their GraphQL types for processing your images in a variety of ways
|
6 | including resizing, cropping, and creating responsive images.
|
7 |
|
8 | [Live demo](https://image-processing.gatsbyjs.org/)
|
9 | ([source](https://github.com/gatsbyjs/gatsby/tree/master/examples/image-processing))
|
10 |
|
11 | ## Install
|
12 |
|
13 | `npm install --save gatsby-transformer-sharp gatsby-plugin-sharp`
|
14 |
|
15 | ## How to use
|
16 |
|
17 | ```javascript
|
18 | // In your gatsby-config.js
|
19 | module.exports = {
|
20 | plugins: [`gatsby-plugin-sharp`, `gatsby-transformer-sharp`],
|
21 | }
|
22 | ```
|
23 |
|
24 | 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`](/packages/gatsby-source-filesystem) or source plugins for (headless) CMSs like [`gatsby-source-wordpress`](/packages/gatsby-source-wordpress).
|
25 |
|
26 | **Note**: An exception to this is when using [`gatsby-source-contentful`](/packages/gatsby-source-contentful/), as the source plugin and the assets are not [downloaded to the local filesystem](https://www.gatsbyjs.org/packages/gatsby-source-contentful/#download-assets-for-static-distribution). 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`.
|
27 |
|
28 | ## Parsing algorithm
|
29 |
|
30 | It recognizes files with the following extensions as images.
|
31 |
|
32 | - jpeg
|
33 | - jpg
|
34 | - png
|
35 | - webp
|
36 | - tif
|
37 | - tiff
|
38 |
|
39 | Each image file is parsed into a node of type `ImageSharp`.
|
40 |
|
41 | ## Configuration options
|
42 |
|
43 | `checkSupportedExtensions` [boolean][optional]
|
44 |
|
45 | 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.
|
46 |
|
47 | ```javascript
|
48 | // In your gatsby-config.js
|
49 | module.exports = {
|
50 | plugins: [
|
51 | `gatsby-plugin-sharp`,
|
52 | {
|
53 | resolve: `gatsby-transformer-sharp`,
|
54 | options: {
|
55 | // The option defaults to true
|
56 | checkSupportedExtensions: false,
|
57 | },
|
58 | },
|
59 | ],
|
60 | }
|
61 | ```
|
62 |
|
63 | ## Troubleshooting
|
64 |
|
65 | ### Incompatible library version: sharp.node requires version X or later, but Z provides version Y
|
66 |
|
67 | This means that there are multiple incompatible versions of the `sharp` package installed in `node_modules`. The complete error typically looks like this:
|
68 |
|
69 | ```text
|
70 | Something went wrong installing the "sharp" module
|
71 |
|
72 | dlopen(/Users/misiek/dev/gatsby-starter-blog/node_modules/sharp/build/Release/sharp.node, 1): Library not loaded: @rpath/libglib-2.0.dylib
|
73 | Referenced from: /Users/misiek/dev/gatsby-starter-blog/node_modules/sharp/build/Release/sharp.node
|
74 | Reason: Incompatible library version: sharp.node requires version 6001.0.0 or later, but libglib-2.0.dylib provides version 5801.0.0
|
75 | ```
|
76 |
|
77 | 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:
|
78 |
|
79 | - `gatsby-plugin-sharp`
|
80 | - `gatsby-plugin-manifest`
|
81 | - `gatsby-remark-images-contentful`
|
82 | - `gatsby-source-contentful`
|
83 | - `gatsby-transformer-sharp`
|
84 | - `gatsby-transformer-sqip`
|
85 |
|
86 | To update these packages, run:
|
87 |
|
88 | ```shell
|
89 | npm install gatsby-plugin-sharp gatsby-plugin-manifest gatsby-remark-images-contentful gatsby-source-contentful gatsby-transformer-sharp gatsby-transformer-sqip
|
90 | ```
|
91 |
|
92 | 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.
|