{"_id":"@alexkirsz/gatsby-plugin-sharp","_rev":"2-20b7c199af58afd951a5e89e21b148e5","name":"@alexkirsz/gatsby-plugin-sharp","dist-tags":{"latest":"2.0.0-rc.1"},"versions":{"2.0.0-rc.0":{"name":"@alexkirsz/gatsby-plugin-sharp","description":"Wrapper of the Sharp image manipulation library for Gatsby plugins","version":"2.0.0-rc.0","author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dependencies":{"@babel/runtime":"7.0.0-beta.52","async":"^2.1.2","bluebird":"^3.5.0","fs-exists-cached":"^1.0.0","imagemin":"^5.2.2","imagemin-pngquant":"^5.1.0","imagemin-webp":"^4.0.0","lodash":"^4.17.4","mini-svg-data-uri":"^1.0.0","potrace":"^2.1.1","probe-image-size":"^4.0.0","progress":"^1.1.8","sharp":"^0.20.2","svgo":"^0.7.2"},"devDependencies":{"@babel/cli":"7.0.0-beta.52","@babel/core":"7.0.0-beta.52","cross-env":"^5.1.4"},"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme","keywords":["gatsby","gatsby-plugin","image","sharp"],"license":"MIT","main":"index.js","peerDependencies":{"gatsby":">2.0.0-alpha"},"repository":{"type":"git","url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp"},"scripts":{"build":"babel src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build","watch":"babel -w src --out-dir . --ignore **/__tests__"},"gitHead":"788133e56dd005663f353fff90ffa37ce2fd87b9","_id":"@alexkirsz/gatsby-plugin-sharp@2.0.0-rc.0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"},"dist":{"integrity":"sha512-2R2msaQxv81Mp0I5AZjaC4kTvqrep7sJ9Pm9s2DYYD6pm/Et5mChB06YYZzGAGvoUJMyBvqHUZYT6Jpp3V9qPw==","shasum":"9763072f3c56f6fee1e23cbe6df2e9c5cc80dab1","tarball":"https://registry.npmjs.org/@alexkirsz/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.0.0-rc.0.tgz","fileCount":7,"unpackedSize":36406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfDIoCRA9TVsSAnZWagAAKMsQAKI9eG7Jzg/1VxJ5CT/2\n6LAr8Flm37878/yWWtcUNyJP40hxGbdm/HH4IEhxeTbBE2VB0n3QcGVASI8O\n+3xXEKRanh2n8EPfBNj56eyi7BtF/3X6Ss2ODh7XM0evoXOn/FyFRI7OuP43\nqVExTM9FDGioMKoL89rIBRXP8CYR6mYoMtqXbpiURcg3uyhyV/F1icL9jRWm\niJZt1rzOT7sj4BNnjUQ/km1gqgmeJ9YordSdqRJpoETRmsCoNd3r+0o04noO\nstPQabqavgiQGkmnIj0Q9GsXnTqjaP2L9hMvEm/PxPBS4tZ4qOixcHXzl2ZY\nq9x8Oej064r1OXIC3QA/N6MD/yKru2ePQtMVUGijuh6YQw4RF9wbWy/DO0uW\nkXMPPoNIQPotkO28Elfd0Ynidwphpp5SOKANcH3bBXcJFNdsFeWvg7flk9RN\nUJwKTUcsfxifJWcrMvbiHQgqJMOE8um5RoLFulEpghUwMFOSBOrzaW9pw8qy\nnWZ8VPL/63MZAHuaGchYh+lmYhV67/1S3VaBuu0Kv1vEWu7ppuUHax1GSGNH\nuNlQSehotu7KY8Tfvkb7DjbRWIj7E+OIbtUvFhBZeFCGUx6ZEFkFrkxwxyX+\n/eJW92zs0r6BDmd+eJnkKsdk4fsRBJGEDyuv6b+gtWdpnYcXeEd0AxtbE2dp\nsxd/\r\n=eU8i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIeyVIkbi2m7EpIqjCL5iRW1aBInLblj9tsxapTXKY3wIhAOJeDGkzqgL1xauKVbIW5jejtivzqiIW4a0cTtfTINtN"}]},"maintainers":[{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-plugin-sharp_2.0.0-rc.0_1534865960147_0.28044866277296365"},"_hasShrinkwrap":false},"2.0.0-rc.1":{"name":"@alexkirsz/gatsby-plugin-sharp","description":"Wrapper of the Sharp image manipulation library for Gatsby plugins","version":"2.0.0-rc.1","author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dependencies":{"@babel/runtime":"7.0.0-beta.52","async":"^2.1.2","bluebird":"^3.5.0","fs-exists-cached":"^1.0.0","imagemin":"^5.2.2","imagemin-pngquant":"^5.1.0","imagemin-webp":"^4.0.0","lodash":"^4.17.4","mini-svg-data-uri":"^1.0.0","potrace":"^2.1.1","probe-image-size":"^4.0.0","progress":"^1.1.8","sharp":"^0.20.2","svgo":"^0.7.2"},"devDependencies":{"@babel/cli":"7.0.0-beta.52","@babel/core":"7.0.0-beta.52","cross-env":"^5.1.4"},"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme","keywords":["gatsby","gatsby-plugin","image","sharp"],"license":"MIT","main":"index.js","peerDependencies":{"gatsby":">2.0.0-alpha"},"repository":{"type":"git","url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp"},"scripts":{"build":"babel src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build","watch":"babel -w src --out-dir . --ignore **/__tests__"},"gitHead":"788133e56dd005663f353fff90ffa37ce2fd87b9","_id":"@alexkirsz/gatsby-plugin-sharp@2.0.0-rc.1","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"},"dist":{"integrity":"sha512-qbaTPzOQy4YRuW8O2kLIH9fFKF1l0/51JQCZ5D+1hB3P2xuz7/UAUgBj9xMHqoJ8o20vVMcYNBpBMxBWqkLXMA==","shasum":"9580f2d5d24966dedb24a03f4846f081f79362fd","tarball":"https://registry.npmjs.org/@alexkirsz/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.0.0-rc.1.tgz","fileCount":7,"unpackedSize":39518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfD3ECRA9TVsSAnZWagAAK9MP/jVChmh5ARdLzHtWmaeh\naZbfoLb5oLoJkViclPQxd3sDQb7KLCcc4PDFQWiIjUSH7NxndD8yMrEi0jgx\nmwoYl74ZJw0iqvfeCQ6jUBdaGmJVngs92ZDFP2LgLS3AB+1envo5aJWb+UqX\nAMT5lsIoLGyee7TQp/1dlKa3besyDLo+ZXuZvvwRbhGmRUm1T6LH4ct2S28l\nvIz8R9FMngl/Bu8u7pchyq9cP+jFI7K5z2fz0lCe4Af4o2usX2HrytYRGs1r\nxVTvpdle4GXCWwjf6tAVcTK2uIz6ud9+L36ijLNOhcMmgbFqd3+Fks7F3tpb\nj9pUNMjOk5/figKZDhGtlhKYokF/wCe8Tf4cfP5zR7W/owmRCfKCE2VKdd/U\nuvJ+anrh+pbkFYQL2lajNaN4o6cYU2oPfFnO07oOWU/UVhfLiZUIJpcgzRHN\nH0xAGYxZBBsKI0ESB3jfnwam5ZcYKkGPKDwppKYojHrF9NRRL784+vEC/XJx\nagU9MsTpmc4lpR8oLZCRW+F/3thW5P4MuVy91qS3JiJ4Ox5aZ73Ml4B33rVC\nIXbH87S86KdYIn/7Nh6x50+NrgT9H8pVShLJSGKpMxZO2EpyuSOPhsiMPn8n\nbV5uNDdYK84VyMDVForcccSxA2eM6wMrrB6CZGJNLidpbkamJEUtMznquxxF\n3fA5\r\n=UDN2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1bhBD3NM/DU0gQU5ojdiOv5o4pGdkffCfFXH9Wvgv+AIgEwEDLP5JrpG0tMsBbDeGybDqoZ23tY2BO6liqpBPDKA="}]},"maintainers":[{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-plugin-sharp_2.0.0-rc.1_1534868931843_0.1779078776449201"},"_hasShrinkwrap":false}},"time":{"created":"2018-08-21T15:39:19.912Z","2.0.0-rc.0":"2018-08-21T15:39:20.317Z","modified":"2022-04-04T12:40:57.783Z","2.0.0-rc.1":"2018-08-21T16:28:51.925Z"},"maintainers":[{"name":"alexkirsz","email":"a.kirszenberg@gmail.com"}],"description":"Wrapper of the Sharp image manipulation library for Gatsby plugins","homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme","keywords":["gatsby","gatsby-plugin","image","sharp"],"repository":{"type":"git","url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp"},"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"license":"MIT","readme":"# gatsby-plugin-sharp\n\nExposes several image processing functions built on the\n[Sharp image processing library](https://github.com/lovell/sharp). This is a\nlow-level helper plugin generally used by other Gatsby plugins. You generally\nshouldn't be using this directly but might find it helpful if doing very custom\nimage processing.\n\nIt aims to provide excellent out-of-the box settings for processing common web\nimage formats.\n\nFor JPEGs it generates progressive images with a default quality level of 50.\n\nFor PNGs it uses [pngquant](https://github.com/pornel/pngquant) to compress\nimages. By default it uses a quality setting of [50-75].\n\n## Install\n\n`npm install --save gatsby-plugin-sharp`\n\n## How to use\n\n```javascript\n// In your gatsby-config.js\nplugins: [`gatsby-plugin-sharp`]\n```\n\n## Methods\n\n### resize\n\n#### Parameters\n\n- `width` (int, default: 400)\n- `height` (int)\n- `quality` (int, default: 50)\n- `jpegProgressive` (bool, default: true)\n- `pngCompressionLevel` (int, default: 9)\n- `base64`(bool, default: false)\n\n#### Returns\n\n- `src` (string)\n- `width` (int)\n- `height` (int)\n- `aspectRatio` (float)\n\n### fixed\n\nAutomatically create sizes for different resolutions — we do 1x, 1.5x, 2x, and\n3x.\n\n#### Parameters\n\n- `width` (int, default: 400)\n- `height` (int)\n- `quality` (int, default: 50)\n\n#### Returns\n\n- `base64` (string)\n- `aspectRatio` (float)\n- `width` (float)\n- `height` (float)\n- `src` (string)\n- `srcSet` (string)\n\n### fluid\n\nCreate fluid sizes (in width) for the image. If the max width of the container for the\nrendered markdown file is 800px, the sizes would then be: 200, 400, 800, 1200,\n1600, 2400 – enough to provide close to the optimal image size for every device\nsize / screen resolution.\n\nOn top of that, `fluid` returns everything else (namely aspectRatio and\na base64 image to use as a placeholder) you need to implement the \"blur up\"\ntechnique popularized by Medium and Facebook (and also available as a Gatsby\nplugin for Markdown content as gatsby-remark-images).\n\n#### Parameters\n\n- `maxWidth` (int, default: 800)\n- `maxHeight` (int)\n- `quality` (int, default: 50)\n- `sizeByPixelDensity` (bool, default: false)\n\n#### Returns\n\n- `base64` (string)\n- `aspectRatio` (float)\n- `src` (string)\n- `srcSet` (string)\n- `srcSetType` (string)\n- `sizes` (string)\n- `originalImg` (string)\n\n### Shared Options\n\nIn addition to their individual parameters, all methods above share the\nfollowing:\n\n- `grayscale` (bool, default: false)\n- `duotone` (bool|obj, default: false)\n- `toFormat` (string, default: '')\n- `cropFocus` (string, default: '[sharp.strategy.attention][6]')\n\n#### toFormat\n\nConvert the source image to one of the following available options: `NO_CHANGE`,\n`JPG`, `PNG`, `WEBP`.\n\n#### cropFocus\n\nChange the cropping focus. Available options: `CENTER`, `NORTH`, `NORTHEAST`,\n`EAST`, `SOUTHEAST`, `SOUTH`, `SOUTHWEST`, `WEST`, `NORTHWEST`, `ENTROPY`,\n`ATTENTION`. See Sharp's [crop][6].\n\n#### rotate\n\nRotate the image (after cropping). See Sharp's [rotate][7].\n\n#### grayscale\n\nUses Sharp's [greyscale][8] to convert the source image to 8-bit greyscale, 256\nshades of grey, e.g.\n\n```javascript\nallImageSharp {\n  edges {\n    node {\n      ... on ImageSharp {\n        resize(width: 150, height: 150, grayscale: true) {\n          src\n        }\n      }\n    }\n  }\n}\n```\n\n#### duotone\n\nApplys a \"duotone\" effect (see [I][1], [II][2], [III][3]) to the source image if\ngiven two hex colors `shadow` and `highlight` defining start and end color of\nthe duotone gradient, e.g.\n\n```javascript\nfixed(\n  width: 800,\n  duotone: {\n    highlight: \"#f00e2e\",\n    shadow: \"#192550\"\n  }\n) {\n  src\n  srcSet\n  base64\n}\n```\n\nthe source image colors will be converted to match a gradient color chosen based\non each pixel's [relative luminance][4].\\\nLogic is borrowed from [react-duotone][5].\n\nYou can pass a third optional parameter, `opacity`:\n\n```javascript\nfluid(\n  width: 800,\n  duotone: {\n    highlight: \"#f00e2e\",\n    shadow: \"#192550\",\n    opacity: 50\n  }\n) {\n  src\n  srcSet\n  base64\n}\n```\n\nIf set, a semi-transparent version of duotone'd image will be composited over\nthe original image, allowing the original image and its colors to partially\n\"shine through\". _Heads up_: If the original image contains an alpha channel it\nwill be [flattened][15] before creating the composite.\n\nThis works by adding an alpha channel to the duotone'd image - then we let Sharp\ndo its magic via\n[`overlayWith`](http://sharp.dimens.io/en/stable/api-composite/#overlaywith);\nquoting the Sharp documentation:\n\n> If the overlay image contains an alpha channel then composition with\n> <a href=\"https://en.wikipedia.org/wiki/Alpha_compositing\">premultiplication</a>\n> will occur.\n\n#### tracedSVG\n\nGenerates a traced SVG of the image (see [the original GitHub issue][9]) and\nreturns the SVG as \"[optimized URL-encoded][10]\" `data:` URI. It it used in\n[gatsby-image](/packages/gatsby-image/) to provide an\nalternative to the default inline base64 placeholder image.\n\nUses [node-potrace][11] and [SVGO][12] under the hood. Default settings for\nnode-potrace:\n\n```javascript\n  {\n    color: `lightgray`,\n    optTolerance: 0.4,\n    turdSize: 100,\n    turnPolicy: TURNPOLICY_MAJORITY,\n  }\n```\n\nAll [node-potrace `Potrace` parameters][13] are exposed and can be set via the\n`traceSVG` argument:\n\n```javascript\nfixed(\n  traceSVG: {\n    color: \"#f00e2e\"\n    turnPolicy: TURNPOLICY_MINORITY\n    blackOnWhite: false\n  }\n) {\n  src\n  srcSet\n  tracedSVG\n}\n```\n\n[1]: https://alistapart.com/article/finessing-fecolormatrix\n[2]: http://blog.72lions.com/blog/2015/7/7/duotone-in-js\n[3]: https://ines.io/blog/dynamic-duotone-svg-jade\n[4]: https://en.wikipedia.org/wiki/Relative_luminance\n[5]: https://github.com/nagelflorian/react-duotone\n[6]: http://sharp.dimens.io/en/stable/api-resize/#crop\n[7]: http://sharp.dimens.io/en/stable/api-operation/#rotate\n[8]: http://sharp.dimens.io/en/stable/api-colour/#greyscale\n[9]: https://github.com/gatsbyjs/gatsby/issues/2435\n[10]: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris\n[11]: https://github.com/tooolbox/node-potrace\n[12]: https://github.com/svg/svgo\n[13]: https://github.com/tooolbox/node-potrace#parameters\n[14]: https://github.com/oliver-moran/jimp\n[15]: http://sharp.dimens.io/en/stable/api-operation/#flatten\n","readmeFilename":"README.md"}