gatsby-transformer-sharp
Advanced tools
Package description
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.
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);
});
};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 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 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
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.
npm install gatsby-transformer-sharp gatsby-plugin-sharp
// 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.
It recognizes files with the following extensions as images.
Each image file is parsed into a node of type ImageSharp.
checkSupportedExtensions [boolean][optional]
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,
},
},
],
}
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-sharpgatsby-plugin-manifestgatsby-remark-images-contentfulgatsby-source-contentfulgatsby-transformer-sharpgatsby-transformer-sqipTo 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.
FAQs
Gatsby transformer plugin for images using Sharp
The npm package gatsby-transformer-sharp receives a total of 133,236 weekly downloads. As such, gatsby-transformer-sharp popularity was classified as popular.
We found that gatsby-transformer-sharp demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In June 2023, Google sold all Google Domains accounts to Squarespace but more than a dozen customers have had their domains hijacked in the last week due to weak security defaults and migration issues.
![Massive Automated Spam Campaign Abuses GitHub to Flood npm Registry with Thousands of Garbage Tea[.]xyz Packages](https://cdn.sanity.io/images/cgdhsj6q/production/a74d1072ff2bb5cb96a404be58a649931ced2ba5-1024x1024.webp?w=400&fit=max&auto=format)
Security News
In a reprisal of their previous Tea[.]xyz spam campaign, a new wave of thousands of garbage packages are hitting npm, to artificially inflate the number of dependents for spammers' projects.
Security News
The maintainer of the node-ip project restored the GitHub repo after disputing an exaggerated CVE rating, highlighting the impact of bogus CVEs on open source projects.