Permalink
Switch branches/tags
AnushPatel-patch-1 JanoshRiebesell-patch-1 KyleAMathews-patch-1 Partner-program add-depn add-escalade-sports-case-study add-mobile-performance-post add-plugin-documentation alter-blog-post-date amberleyromo-7730-starter-showcase-sourcing amberleyromo-patch-1 array-doclets berrak-responsive-layout blogpost-gatsby-days-preso calcsam-patch-1 ccustom-algolia-index change-hacktoberfest-title config-api coreyward-patch-1-1 cypress-timeouts docs-rename-starter docs/gatsby-remark-images-sharp documentation-project-blogpost-new-title drop-alpha-support filter-css fix-broken-link fix-doc fix-docs-reload fix/starter-detail-dependency-grid fix/typescript-reach-router fixes-to-plugin-library gatsby-ssr-silent-fail graphql-filter-sort gvarandas-patch-1 hu0p-patch-1 imagentleman-patch-1 link-container m-allanson-patch-1 marisamorby-swag-store-post master mikeriley131-patch-1 neo/move-prefixPath netlify-identity-blogpost old-master-3 old-master-4 old-master-6 old-master-7 page-metadata-splitting plugin-blogpost-edit plugin-cli pr/8963 revert-4254-blog-documentation-project revert-5047-update-remark revert-workspaces rfbotto-patch-1 sample-branch-example sebastienfi-wp-orderby-date-asc shannonbux-docs-contributions sharp-images-no-ext sort-chunks starterShowcase2 style-guide-update styled-components-babelrc-config-doc sw-yx-patch-1 test-builds topics/gatsby-plugin-sharp-tracesvg-fluid topics/inconsistent-accordian-behavior-docs-sidebar topics/using-gatsby-image-design-refresh topics/www-bump-remark-autolink-headers topics/www-sidebar-move-expand-all-down tryzniak-patch-1 update-imagemin-deps updated-style-guide-tutorial-details v1 v2 valse-disable-default-pageview valse-resolve-env worker
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
36 lines (25 sloc) 866 Bytes

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 --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.