{"_id":"gatsby-image","_rev":"389-5ba1a457867c1d35ae808e1e83940188","name":"gatsby-image","dist-tags":{"loading-attribute":"2.1.0-loading-attribute.3","otp-test":"2.2.15-otp-test.31","pr-20741":"2.2.40-pr-20741.212","state-machine":"2.2.46-state-machine.75","unifiedroutes":"2.3.4-unifiedroutes.76","unifiedroutes-v2":"2.3.4-unifiedroutes-v2.135","image-helpers":"2.6.0-image-helpers.58","reach-router":"3.0.0-reach-router.13","v3rc":"3.0.0-v3rc.0","next":"3.12.0-next.0","latest":"3.11.0"},"versions":{"1.0.1":{"name":"gatsby-image","version":"1.0.1","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.1","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"3db7e47457fea9d00c84e1fcdfe88867dfeba746","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.1.tgz","integrity":"sha512-4hbhrW/n81xkLHQvC4/t07+WFLO8VWPu/zd9Wsuv19mHAUS6fHlUZbn78tnuEVF2FcDa259oSlLhp3pFGX4nuA==","signatures":[{"sig":"MEYCIQC6SMDU9qblKRS5dofN5LvwJJolKl8r7vP0tXhyLpHougIhAORHjnXISZ3gjOhHDVcGCez+a94UsJvUW7ickHditC7Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.5.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.1.tgz_1506733018476_0.2167052966542542","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"gatsby-image","version":"1.0.2","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.2","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"3f327c45e93b3696ade1dee8cd0a5361eda593aa","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.2.tgz","integrity":"sha512-i5JfxnpfHXRu8XdtabGUihg0QMS1BZF81TRCtLLwYjW1RDv4ua4TtRiO8JnmUrTajBpboW96p2b9V0N3iGTZFQ==","signatures":[{"sig":"MEUCIQDhJ2PdV4lr82b/JVRQyEruWGx0O3dai5ENwwFMpVrkLAIgFpwBn+8TST7pSsxOVvCRvPJbXxZm2eQfv5ZXbgFbDNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.5.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.2.tgz_1506894673423_0.26625796128064394","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"gatsby-image","version":"1.0.3","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.3","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"73362c3054ebdb3947396e8fced91290b5982c6d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.3.tgz","integrity":"sha512-KiDWf7ilSTRpZelcw8XJyrHplVv1M1kEe49Fm9BeHoALyqh76LFdnyT88vfHP3AiD1OaeuzyZzfjQPSWrK5v9A==","signatures":[{"sig":"MEUCIGBj6Oz0vrqLpx/o+fISoUOGZ17HSJePyGHxnGvJEMlsAiEA3sBL997VA2Ogo95c1MtwtYNJ1nosv8CDXtNfdLa/O0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.5.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.3.tgz_1506982544535_0.6397880937438458","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"gatsby-image","version":"1.0.4","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.4","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"e76882a5d6e9461bec76f924fbe0c4026bf3c128","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.4.tgz","integrity":"sha512-K8DCV/ET7RNF+o+3f7pFr8gnYe8JF9YyNQiXm59c0JJRAVY0Pzy/eXW87lw3I12WyM47PNn7yjNeuuT7trT4gA==","signatures":[{"sig":"MEQCIBKfVI6lbXs1IgV8moxDlC8nXqOtTha+HzSg/n7EV4zNAiBjGxel7FFI1LYJd9J0O2Ds2Ou6S7dqmbu6KiFKEWZLQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.5.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.4.tgz_1507054791835_0.8254233538173139","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"gatsby-image","version":"1.0.5","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.5","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"e834eec222746244d3bb4549a0e3fdd7da35ed8c","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.5.tgz","integrity":"sha512-DYmR4qwCAaci2CHhO4fjVJFSOhviRsd+EnJBeIJUgA/gQyTWPOFvFSJnxKGIvJiGEUUZyqdSX3hfVgl0vHzW5Q==","signatures":[{"sig":"MEQCIHKq7XCAGLs1NkbaX1O98ZH3/dX2lsStE4mTlfndmn02AiBPb3vjo6NdIr+6CMX3A1yJYBfEHm4FWOzeZ5xe+aJ5JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.5.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.5.tgz_1507149785570_0.535164380678907","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"gatsby-image","version":"1.0.6","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.6","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"be2c12e0801577ad61c95cefd1d1589702589375","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.6.tgz","integrity":"sha512-1Y/+vPuY8UYigalt5deqNAKtZQk952/6WsHxt1pJ6NfN6QTmnZQDNEXalljpBYs6FiDZBJ8+M/IVbhM1eFynWg==","signatures":[{"sig":"MEUCIE+xEi6ftHy6ui0aLJinRFDmuIQxUjMolsA1Wrc/s1axAiEA+ksyUQnBgx5dbOXRzO+uj5iHui7OKWNJJDf5I3/CS4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.6.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.6.tgz_1507349298567_0.5179198819678277","host":"s3://npm-registry-packages"}},"1.0.7":{"name":"gatsby-image","version":"1.0.7","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.7","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"67d9c56db301f8e6c49bbc31ca06aae763445747","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.7.tgz","integrity":"sha512-YXfMrmtWNt9Dham+4cqgjttlDWiukSlWLPndoqjLFZaQ05c/Kmr3PZMu91eRlI+aYB8IDN+pX2xcHE7I1l/X7w==","signatures":[{"sig":"MEQCID3LCrHCZMTOW21YStzNaGvzCL1pZG5JF6O2EeP3I0PZAiAOaX8bWvbuHASnhMBN55JH9stjA/n23e/ZSHiYWoQrTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.6.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.7.tgz_1507381214254_0.8340806912165135","host":"s3://npm-registry-packages"}},"1.0.8":{"name":"gatsby-image","version":"1.0.8","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.8","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"f7976f5052213a9ef9353a6496ad06b95cc42544","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.8.tgz","integrity":"sha512-siRc2+E9MHrwS4h4J5A+g98ZWU99XJoc4lnKRiN7imWt2Bo8zmZjBnPpRCtzEZbD/WL3H3DwonwOEPpr7h4fxg==","signatures":[{"sig":"MEYCIQDs2aTyFOKXINFOO75Xdtp5RZ51ER/a2G6BpHscDjoNTQIhAJTKALF8RW1IVLbqs5Crgz4W7GIIN7A78seJzjS6fpxz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.6.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.8.tgz_1507418943753_0.5206163846887648","host":"s3://npm-registry-packages"}},"1.0.9":{"name":"gatsby-image","version":"1.0.9","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.9","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"5f26719f2073cd14a7df3f24164236491f8c109e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.9.tgz","integrity":"sha512-ncEk6zhmEz65wDshQVCLKzg0Ej8kUK/V8rMj8puDqXgnEi0QYzSjTRhg2e20cMbMdmUlst5oF9EHNyKIYDGMIA==","signatures":[{"sig":"MEQCIDU3tyEC/ITS9uvsejaVQvelINLsy+EuOT8UohIFISoNAiB+4KPOrZ0FfQugTcAPGncTdN15Tm+Ubd+DirLVVjS4cA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.6.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.9.tgz_1507422592018_0.2563841794617474","host":"s3://npm-registry-packages"}},"1.0.10":{"name":"gatsby-image","version":"1.0.10","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.10","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"4183d654ca3041dafa424095d5600e05fda3f547","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.10.tgz","integrity":"sha512-23xHLSeTsWkZQ0upvUKRKBCd1beCMONCwYLaZiN/FEybHRxp26XVeHz03q/ZgC23pffILM/AmpmmZwr4mxafmg==","signatures":[{"sig":"MEYCIQDkYkgOeB1WNrZnhvqPsWxJd29AUgMHSDQWw8q+k87GlgIhAPu7fJuZYUl5OAFCg+1jH6wRXxfEl9YZDobNQLSJnhjA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.6.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.10.tgz_1507583303945_0.5455672149546444","host":"s3://npm-registry-packages"}},"1.0.11":{"name":"gatsby-image","version":"1.0.11","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.11","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"166b2f84e03ed158fd9ef8efcb1835931f54b13f","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.11.tgz","integrity":"sha512-H1WtzI4a0o08OkM11AaapPsuQAQkocRQ1D04x2GK/WocnU5OCiBO0HnUapqPU+3ez/wB+Zq47Kk2co10+K6uDw==","signatures":[{"sig":"MEQCID21t4iOSQhurVqb4heMJq/ph+zV3KoG3u2an9Vote8/AiBYDiV34v6AK0xh0nGo3WTZoiSgNUi4a5XN5iGj9XflvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.3.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.6.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.11.tgz_1507589546136_0.6932776193134487","host":"s3://npm-registry-packages"}},"1.0.12":{"name":"gatsby-image","version":"1.0.12","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.12","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"e2d35a97b81552cf597985378f82ea64ad9e36ee","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.12.tgz","integrity":"sha512-5u3qRbJ+tXd5bYD0P9a/9vYafC4WngSDUiYC8MClW1BdexQ6kID/wQCmZYaTAtkzGZF2QAhtwgLY1k598xc1yA==","signatures":[{"sig":"MEUCIQCZKMWPb/xTBJv+f0E7kKGPn2o8mZ1mMJNTSkiX2jNvCQIgf9vb09tGdaIM0D4s34f2MtbQ/mAJi/M1lvw4PriPT5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.12.tgz_1507999586017_0.22156042838469148","host":"s3://npm-registry-packages"}},"1.0.13":{"name":"gatsby-image","version":"1.0.13","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.13","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"ef708d8be33ee361934b676af686985686eb1cdd","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.13.tgz","integrity":"sha512-dH9cJu+avwedB0MDFvO1s7VlTRVahlkSlTAE1Zmzr93r4CfgBFV91wpnPR4Fh2orLeUU1+fa3bCsMfPkYEMibg==","signatures":[{"sig":"MEUCIBjCQ4qdIru35VvKHXTrpxr5EfHtGDBZGGQLSR060LAcAiEAv6gsJGMvrNHhMjZnSBRrfqK2LgQOY3LMf4pwxKFzcl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.13.tgz_1508343020250_0.16992617398500443","host":"s3://npm-registry-packages"}},"1.0.14":{"name":"gatsby-image","version":"1.0.14","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.14","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"09da3dcafaf98d6ba37dc404a97916e51508e65d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.14.tgz","integrity":"sha512-HDRoF36yXqNrMMy4ZavHvq5vjTyM/Xoe5RrC7z0/FwZgnG78AYx1+GQkenWChgyW1qCrRQ6BDVLctH0nzuoFzA==","signatures":[{"sig":"MEYCIQDR7YDN+uD/peG7Lwyft3OuIvYi48gg5PjTFViDEcM2uQIhAKeXFMvAMf9UdXdi6Rbo7pOBu+P1hoEsGYj9ARMCXG2H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.14.tgz_1508517247438_0.8328850851394236","host":"s3://npm-registry-packages"}},"1.0.15":{"name":"gatsby-image","version":"1.0.15","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.15","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"98eceb7143d153b3d3dba23fd78d189dc654eb71","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.15.tgz","integrity":"sha512-oMUWwB9otGB2t5M+0roEeLF87jeZd4go1gJuWlnUDUmIfL2m8u/xuiRpfwkr6hulUIffyrEupmUNmbE+2+tA1w==","signatures":[{"sig":"MEUCIAh2RQFc8E0lSoAAfYAsom2VVQUxXT2v9mq3/ueTAcL5AiEAg7asAAMzhmAcnqHeIj9Rz1tV3vLrV79zbVedQp8I/08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.15.tgz_1508962073380_0.8765101321041584","host":"s3://npm-registry-packages"}},"1.0.16":{"name":"gatsby-image","version":"1.0.16","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.16","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"7cc437b1ea349b86fd3aeca7ab68a23db6ed6025","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.16.tgz","integrity":"sha512-d3Q1J5AY51YOVi+mzzOs+T/USubZCIPTVLPuHzVmhybJgOf8KbYPYGmtKmlOde1miJ4u1S+fH/uoIGBAozBdng==","signatures":[{"sig":"MEYCIQCLUurQrf4DmCT2yYpadnDtJI8q41A4QC8eI3QWTuC6OwIhAOVcRZr+jtVAYHM6DOXuqd2cvcbCyquJo+tVXFwJbUgo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.16.tgz_1508999177988_0.06617924082092941","host":"s3://npm-registry-packages"}},"1.0.18":{"name":"gatsby-image","version":"1.0.18","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.18","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"390a5fb1886f34dd0ba1521ac6ac5bbb93788e52","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.18.tgz","integrity":"sha512-QrimT6kfml/CmhYHftTjSj89nJTV2E1AHRVJ6BLqqyUeb5JZ827p8mbCfWVHyMkmbLmkxoU5JQh9r5VUUNdb2g==","signatures":[{"sig":"MEUCIQC89c9nMOdfboHqmRJFGbH4yiWZzRHYJNp9yYYEqvJz+gIgWDf8FRlBIHjOsIV8zc7kS+3vBpieTKPDezEtkzCEgaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.18.tgz_1509568143422_0.7312954592052847","host":"s3://npm-registry-packages"}},"1.0.19":{"name":"gatsby-image","version":"1.0.19","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.19","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"39c5fcd3a54b479ea5405e86cbc11f07435451e1","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.19.tgz","integrity":"sha512-8mD7VkxvEUFUABfz0KaKejW6/72xKm+9feckDQ9RUQfTnMEMUGjLuebWCehQXBQfaSJ5okBdwNswQgDV/wDt9Q==","signatures":[{"sig":"MEQCIDv4LmFqKGD6RPNPq5DXi9Fe08K6fpXQ+ng3y6t6r9NyAiAS1pDf7/yQHBE2Lks5Gjved9Yf1cVvDv47+atgbA1Nng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.19.tgz_1509646005614_0.5999609034042805","host":"s3://npm-registry-packages"}},"1.0.20":{"name":"gatsby-image","version":"1.0.20","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.20","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"f9eab7264d1d433841bffcf3ec0d4b2945873b1e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.20.tgz","integrity":"sha512-wkhRoM6DEM/fkxaJZeTEnaolYRRh6K8OYrbqOubflHQKkfVaS8Nx5rUKcURX0zYG7Q58rA8xfGwH+3zj6rZ9yg==","signatures":[{"sig":"MEQCIDhWN26lVoI6Spzk2/YDCLWs2kYCjzP96c3qeu+jZA5HAiBXYd1CITYc63j3BIVjIGdfPSX0aMU37JvCjvLeIQ1NOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.20.tgz_1510010061878_0.5469542653299868","host":"s3://npm-registry-packages"}},"1.0.21":{"name":"gatsby-image","version":"1.0.21","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.21","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"b12eee996a26490e05afeecf42c1da8d5d8dca10","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.21.tgz","integrity":"sha512-5zx69Ezo4cwwnRKCNQp1diaEUgkvd6xkKqRguyDqx+hkDCmnvwnc7WgjD4xkJN9h0T14ulEngxix5QKTyO5rNw==","signatures":[{"sig":"MEQCIGISnIWEWAHygvrx47Cz16wqkH2cxSDg6yNJH7bCl9GvAiAs6APraNGNX47izCukN55mCCnCHQft7kOkg0XRrsBRpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.21.tgz_1510042540419_0.6221362121868879","host":"s3://npm-registry-packages"}},"1.0.23":{"name":"gatsby-image","version":"1.0.23","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.23","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"33da30b62fa0e59cc4aa50d32be40d7f3c3b334a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.23.tgz","integrity":"sha512-9Lb4yW37x5rPxQPPwlidNRjoHUkeOdA3aVU1f//wsC5+USQR+MqGNPnBHKW50taR+ix5QqwHg3W8YpTKBRLstw==","signatures":[{"sig":"MEYCIQChbkifyyTqn5eet4N0pFGTzAIeUCusCn7ZTa/+FQrfTAIhALgvXOhHPskK/A3zg3/Td48ZuMkQGSdurdzKrkOJPB/O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.23.tgz_1510203267348_0.3164367729332298","host":"s3://npm-registry-packages"}},"1.0.24":{"name":"gatsby-image","version":"1.0.24","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.24","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"f6c8bb7caa0cc9061636a246e588ec463570c7c4","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.24.tgz","integrity":"sha512-W/bJ0Q0sSKAB42dWNpEpr5DKzp3GWIErp9H1v01bE8/XuNqaeDJeIesDwg9oiNPt5+opLbPJHjWWhMQJVXIDCQ==","signatures":[{"sig":"MEUCIQDpUyutIZqdmpPadkDSqt4l0SbvWQK7vjXGUieoYdB+wgIgI5R3US7UeeXQY7i/Sn0/W5msqXyLTcyRPJzmwLDr0MU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.24.tgz_1510205710265_0.6502204367425293","host":"s3://npm-registry-packages"}},"1.0.25":{"name":"gatsby-image","version":"1.0.25","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.25","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"701c134d4ccf81e107169d24059c947b4a7da9dc","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.25.tgz","integrity":"sha512-R6o9zsOt2bnOoFH9y73zngxSLZwfVgAlF/Pi0lYEqyLnyIY4yPnBJS6EwOrQEhnDC6nONf/tCP/DQ6qYey4TUw==","signatures":[{"sig":"MEYCIQCUYGOrHhzQpuG0TA60bGEKxYtxGH4t9AbyF+MREdsdKwIhAIFtCwB+nIBZS9e2MXwqT69me1WbWeJfaqWMyRcpHy78","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.25.tgz_1511910689952_0.7325003086589277","host":"s3://npm-registry-packages"}},"1.0.26":{"name":"gatsby-image","version":"1.0.26","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.26","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"2097cf37dc12990ae0ec16c29d58da9c46dace93","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.26.tgz","integrity":"sha512-RVWI4jVq5u3WMwxtFihZqCeALN7ipMKMNARp18nD6bGAR1z6jjCKRym7ZO3uirnU7DsRl3DofZlaAzSJ5KizaQ==","signatures":[{"sig":"MEUCIQCLoRiG+AZ4C9wlPYgvRQMG8X1T3hn8vtD/p5ieTK3kLgIgccWD9yLjrKGPMckCY8rMysGzD8U7/q41kQyCiaFdwLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.26.tgz_1511912253712_0.37458538194186985","host":"s3://npm-registry-packages"}},"1.0.27":{"name":"gatsby-image","version":"1.0.27","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.27","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"d1543b003b0836219780651dbb13108dbabcd771","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.27.tgz","integrity":"sha512-XdZoG2RTnsGeuRlod7IxltgcnsuiAJ0CXBm9wz2bu22czl810SKCJHXMvsBr5QacX/xBF5/JYFP2/3K5ljFnKQ==","signatures":[{"sig":"MEYCIQDx79t2bZIeVmdsJDOyQT3IaPdMeMjOmT4v5KIf/DeucwIhAOCtu1JiOSqmGpWOprMK1R3UIWvP3lFvfUrEjWoaqMOZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.27.tgz_1511914143775_0.4977829058188945","host":"s3://npm-registry-packages"}},"1.0.28":{"name":"gatsby-image","version":"1.0.28","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.28","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"4ea0468c724e04e1a8e7291ae2939492c1c4ff30","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.28.tgz","integrity":"sha512-+cYbkulC8B6JnHp2tT2seT9qrEWg9UwGTDoXxn9iMBNAodZI36zUhk+I1q2XXWBq1gKpVG3G75h6SN9D0w58cw==","signatures":[{"sig":"MEYCIQC98VM1gG06j0bc1mnP8UYHTcYyR7xtxhxUx1JvutrUqwIhAM65dDbAd6mlxBy3TP/LF+87U+80Nrqi/0+9iQacoyGL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.28.tgz_1512866711039_0.05432234122417867","host":"s3://npm-registry-packages"}},"1.0.29":{"name":"gatsby-image","version":"1.0.29","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.29","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"5c07f7102341943fdf202b55cc9c43e8ad3b91e7","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.29.tgz","integrity":"sha512-uwovzgMGKFhZO1Rh4P/M0ZO27Niq7Uqgqdr4kmfrmcnOGh12OjKqx9kd0Qa7BbBYlGN9VVoMGmeN43rGEcp98w==","signatures":[{"sig":"MEYCIQDVPDxY0mUZt/EOMbq7GnS6+eS94z48tmHm3kDzulX+LgIhALO5Ebc2IQ7DcLlm9HrTX6mzObxjgJbUPGvBaL/lNMQP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.29.tgz_1513134468120_0.8663725790102035","host":"s3://npm-registry-packages"}},"1.0.30":{"name":"gatsby-image","version":"1.0.30","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.30","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"013c1d746309a8746d3bc3307b889c6670d1565c","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.30.tgz","integrity":"sha512-/G+6YcHrRYlTwxtg5pGgtZbntV3nL2ZR3841eyhNiQ35sOokf77kBwTvxMgg2ofLAPv/xI1BahlLTFVNOJOm+g==","signatures":[{"sig":"MEQCIF6BzvNNOe6KGstL7TR7oGjigpyAL6VDYNlQPUGosSf0AiBWjFvOLHUzTxWLNM7a0OiPDA4YROoojUWU2EhA+Ux5AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.30.tgz_1513281477080_0.11135325278155506","host":"s3://npm-registry-packages"}},"1.0.31":{"name":"gatsby-image","version":"1.0.31","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.31","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"7f5c1ad428bfb0773736d4c2b353dd9d7dfcc6cd","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.31.tgz","integrity":"sha512-E80Mxu9f73Oq9kgXBFgsdWAXNElki0k9URZXx6dVPkMQzdQvlcaIP8vXSgP22eCwK+Q4m/13qUhfw5gxsp3nUg==","signatures":[{"sig":"MEUCICNv6UurJHJULctrQ7gaD1+9w3xPYUp2lYmXuwso+IdhAiEAxumEMm/WzJBSiVT/nG2AdQYzWS8+sVIJRHuhq2o93Kc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.4.2","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.31.tgz_1513812353855_0.9352463677059859","host":"s3://npm-registry-packages"}},"1.1.0-alpha.f20ac0ed":{"name":"gatsby-image","version":"1.1.0-alpha.f20ac0ed","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.f20ac0ed","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"5edfc61dfa8af2272acc0ff93afe94d8d3dec278","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.f20ac0ed.tgz","integrity":"sha512-v37vfw8MeKRV9P1Y9lMxO16PQy2/fLG/yQ2NamAKlCZnx0o+L2TwCKMtxP6r3GtWTQUkqtdwQYOPSxumbkmaPw==","signatures":[{"sig":"MEYCIQC5935w5rsbf6E81aeLuyTC+jCyWrRmNjUQVWh5d8dh3gIhAPtd0en1Nci8fmsrBBLwJq5njXI4PhPh20FN5/MFhhyB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.f20ac0ed.tgz_1515695538825_0.8392366219777614","host":"s3://npm-registry-packages"}},"1.1.0-alpha.a0a09c94":{"name":"gatsby-image","version":"1.1.0-alpha.a0a09c94","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.a0a09c94","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"96bf006aed50d85a379fe2c102dc86a2a8d55ee7","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.a0a09c94.tgz","integrity":"sha512-+Yz0Ty5nGy7T66/REWCvtK+Qch/MG9aIrkuNQVo0gt4w6WamRI03MGnrmqfWalbWU7XZ4Xwd/bdgM/c/Bk4KnA==","signatures":[{"sig":"MEUCIQDqg/XFjZOEcu1MfEupilij/Tu+oAZSAjvNw1i7HmpR0QIgZTe9cjuSMzCPhkEVDYT68rLkDnbmo6SchHZZEY6Ixyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.a0a09c94.tgz_1515696451571_0.19881973857991397","host":"s3://npm-registry-packages"}},"1.1.0-alpha.b50f2063":{"name":"gatsby-image","version":"1.1.0-alpha.b50f2063","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.b50f2063","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"0124a0387817680196a63725488006af3443d819","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.b50f2063.tgz","integrity":"sha512-C2E3KMNM+ZBD78X6ArA/Zlv6D/YOggihBOALf1kMbQBYoM2tppESFAqbX7bkgxOovIbRcML1827AJTGXYUF7QQ==","signatures":[{"sig":"MEUCIQCKkoQTIQlXGEElgvLETgmVGeCuBvLIUo5xUpxwP+oyfwIgcL+Dig3KponT75+orGD2ShZN860dllKKM0xHY+5lSNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.b50f2063.tgz_1515696875738_0.12846874934621155","host":"s3://npm-registry-packages"}},"1.1.0-alpha.03b9df85":{"name":"gatsby-image","version":"1.1.0-alpha.03b9df85","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.03b9df85","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"0be87f87bac3c5e99b2d3776306c421c3fb56b91","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.03b9df85.tgz","integrity":"sha512-4OICvjsmhcKvBTUv/dN9tj/EgxM+s8DopbUs9FUXJS2n+q5gOjhvxwRdKc3w9tGbMPEoX1YDuMZxWuzJEvRUGA==","signatures":[{"sig":"MEQCIF0PsrT1/urbWeALFiVqld3YEOTM8B5J/zp9pSnP49lPAiACYkqY7LNRUa5up0EuG5F+nNpiMiZXzqR21PznhjPSMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.03b9df85.tgz_1515767740999_0.18967864965088665","host":"s3://npm-registry-packages"}},"1.1.0-alpha.e9df8e57":{"name":"gatsby-image","version":"1.1.0-alpha.e9df8e57","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.e9df8e57","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"8a94e7830106d72000673ba83975c129bbb8ea9d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.e9df8e57.tgz","integrity":"sha512-LJ1Dq9mRN0J7P1OH+s6ZXyg7gEXLdvA8Hip2dtJWr7PzMRewHiaeqQKcr4vIlwL5D6BdsFtXnDulMm7BfmBw3A==","signatures":[{"sig":"MEQCIEf96pP8zmVoa3I52hluOaIPVYpkgmxdxTfVDvYemlMQAiBJ8ke0q429UuCZAKYhwZOqSGSnkqXqr8xk6F7f/ua4Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.e9df8e57.tgz_1515768418627_0.39179855352267623","host":"s3://npm-registry-packages"}},"1.1.0-alpha.8c822451":{"name":"gatsby-image","version":"1.1.0-alpha.8c822451","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.8c822451","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"f480b355dbcf0a23b969fda9102ff7961533ee20","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.8c822451.tgz","integrity":"sha512-aDIDtv1DGXOWC8KJyMGfP4+gHTne/fAkdOStMymN/K59ScYKYRdFPPbXDvWd+kcwSWhLPCR5sVVapYOkJt/jnA==","signatures":[{"sig":"MEQCICvFlGiRTM1uHBePkoRMBfexTVgGTOutQB3S7dxnRlIRAiAlTmeI5/QK0kA0QGdXrwq53Tl9XNzbEubwmW0MIbjETg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.8c822451.tgz_1515769230032_0.6886506895534694","host":"s3://npm-registry-packages"}},"1.1.0-alpha.e5586916":{"name":"gatsby-image","version":"1.1.0-alpha.e5586916","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.e5586916","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"1c4b3cfafff5fcdf3538110ef5f6b0f7b07ae095","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.e5586916.tgz","integrity":"sha512-tmOIOBSGcxWnRrH0vk16ekJHDk7hpPRTukcAQwM3zJnThIRrrUiskljvVPa2NlMCKsV8TAGdbE8ZcMa0zPdCIA==","signatures":[{"sig":"MEUCIC2stfe5+aee4Z5a7P0ArCIDx8CW36+S6iUrTgPpYjsFAiEAqzij8CI6oLGR0hQOKJaQfXi199c5L4hnN272kf4QADg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.e5586916.tgz_1515770517992_0.09637128165923059","host":"s3://npm-registry-packages"}},"1.1.0-alpha.9da1bca1":{"name":"gatsby-image","version":"1.1.0-alpha.9da1bca1","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.9da1bca1","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"b7f53388b3b881996570a502647fde80181be508","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.9da1bca1.tgz","integrity":"sha512-7iiSi+T7u1qKJyNaA6xupjzK6xyTd6xFlkiX6ad+HVRkpeLPMXbKWthE0VzDQGZYjJvII/6UpTKnADSMqVUwfw==","signatures":[{"sig":"MEYCIQCoWVXgfMT6LqibhF1+ztr2Uu4zakatkprwntqPOKIpSQIhAKyT39w5u0EvDmsDTlqnkGL3UmQl1qHbPlTzjIoabCXh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.9da1bca1.tgz_1515780417370_0.216348271118477","host":"s3://npm-registry-packages"}},"1.0.32":{"name":"gatsby-image","version":"1.0.32","keywords":["gatsby","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.32","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"e03bb8c2a3a05098c122e28dd91373e645c21e07","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.32.tgz","integrity":"sha512-Q1BHAaXBSKsiSW0qrFTFslXLNjdAuehAjCJQAJ2GmCowOjekBzhFcBxhJmSICLD81zWE+ANFn2svNSEjZonhrg==","signatures":[{"sig":"MEUCIQDZUL+yvLOypW5XqreAGAkaPLwveSus9CHVg6MrDnF7iAIgeBXYMihsqC9mhH8XCFJiQ4NHrbEsruTH5vTKUeeEVr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.32.tgz_1515782294662_0.5652732581365854","host":"s3://npm-registry-packages"}},"1.0.33":{"name":"gatsby-image","version":"1.0.33","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.33","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"eadc5eebc4f0f2d98b1dc762eb35dec0c6197e0b","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.33.tgz","integrity":"sha512-JI+YHBLHgI014mtmNtt50D2ImvO46kjLunlRtq++dNcaOg668nlx9kXWiKxKgC4LemOV/Ufup5+gMA7P7N7B5A==","signatures":[{"sig":"MEUCIQDdTP3MSoTrtcNeN/HB/OAnFtd6PQ8NUeQvwJ2OucK6BgIgCY4h6xigTNeBJUw+YrScakuFhvVazIkHWOyyOOTnYdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.33.tgz_1515805396148_0.8206437649205327","host":"s3://npm-registry-packages"}},"1.1.0-alpha.aeb05561":{"name":"gatsby-image","version":"1.1.0-alpha.aeb05561","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.aeb05561","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"628e91624c392a414c0228c71b5cd5a795b7a53b","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.aeb05561.tgz","integrity":"sha512-2x+4afAlkWoT3k6YZpz3xAew/U+5jE4VsZ7Zx/uwYhb9X08Q8CIZz5VIkFhV5liyjCndqTiVOunaKdiOGaqiyQ==","signatures":[{"sig":"MEQCIGUkrdgp5+/ZlxUy58hMusGkFTuqhOdBSsHZedntVBQ1AiB5D9svAJr+1fnl2zn+BBpm9P9+2gbLnsOB+Hin/16Kbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.aeb05561.tgz_1516240351599_0.00041024433448910713","host":"s3://npm-registry-packages"}},"1.1.0-alpha.7b47e00d":{"name":"gatsby-image","version":"1.1.0-alpha.7b47e00d","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.7b47e00d","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"bb34fb2273deb59c0869cbdb1c6135872c0f1b8e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.7b47e00d.tgz","integrity":"sha512-dGnutDL0Nbsl+SKVYKk/aazcoPL6HdpzJYTnsPFeYUIfhXV3/yTkKR4vVwEIDhMjj+VB+ORSsBXxNZx6YmPuJw==","signatures":[{"sig":"MEYCIQCjgDCt78VD48SapUqgiHr2iuXmpY8fFIdI2+OCaY8fSwIhAMixGqOwAch4PW7wpD+6n2StN+DCd8z70MFX9XyyGdWw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.7b47e00d.tgz_1516241381171_0.4118400055449456","host":"s3://npm-registry-packages"}},"1.1.0-alpha.f5c1df61":{"name":"gatsby-image","version":"1.1.0-alpha.f5c1df61","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.f5c1df61","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"34a2717a1db786471eac6482171e7b59ad7cf3c9","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.f5c1df61.tgz","integrity":"sha512-bJ+X3RSG0aukBdTcv6YqchOJ6zo3KKvxRgdPiQTI0WC9VJ/Ln+r5aUe6VlLP9Et+IDwvETc6R6TX2zSfz1+lqA==","signatures":[{"sig":"MEQCIFJQG0i2rFIK2Myn+40WpP54lTMOiCIxvcbDEft9E96GAiBjRN1EKibi2FLY9QGg6TZcetETrDOVK5WP7aKnyn2pfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.f5c1df61.tgz_1516296590603_0.56463623046875","host":"s3://npm-registry-packages"}},"1.0.34":{"name":"gatsby-image","version":"1.0.34","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.34","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"340c53c740d6ac8e0063e2ca05f33ae4b37dff8b","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.34.tgz","integrity":"sha512-iWSYtIeyoF9dVqDodACw1phjoD3/s7apOL+jcm0AzE7/ry61DjzzRcqdpVlVFXinU6ukqYtQJcu5HaIrfwKAnA==","signatures":[{"sig":"MEQCIHsJkWSKogJubCldDo3vWJoAQBLFlXtVrrkPgRf+cV2vAiA1QUlmxwpKcMeomOurc1BvCuQebvj6pW+NwD3xe6EfKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.34.tgz_1516370034471_0.46911916602402925","host":"s3://npm-registry-packages"}},"1.1.0-alpha.926cb6da":{"name":"gatsby-image","version":"1.1.0-alpha.926cb6da","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.926cb6da","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"708645be81c54eb38868580b0f4102a9db2e491e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.926cb6da.tgz","integrity":"sha512-lCELOeJuOKMleO4Di5jIh75DsED6kk3ckgzeZVDDm/pot7WOGeUoizMkFs1f+ma7UHUaNAb/lCuKxZlo0SdetA==","signatures":[{"sig":"MEUCIQDVWdJhbgfkVD617UGbScFaZEFjwGRfLLadtceYa2uOYgIgQYNbT2qInuRvAaIrFCTH2rHqC3Xj0q0VBdMIMUvih6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.926cb6da.tgz_1516498912352_0.1419297584798187","host":"s3://npm-registry-packages"}},"1.1.0-alpha.3f307d61":{"name":"gatsby-image","version":"1.1.0-alpha.3f307d61","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.3f307d61","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"e11d760728937154b7e5b7f157dea4021019d350","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.3f307d61.tgz","integrity":"sha512-ou9ikEiXwuqn/FVjRtdcwp8zALVDHmDaAUsq1OLmqYO6NVVgN3B5/S8Fw5Vh3WlSZzz/NvEFLCVXboU22fWWMA==","signatures":[{"sig":"MEYCIQDAA56EmIAIG+kRLpk4jaeEaVnVkV4IXYIaBuTSjXZXcwIhAKcGwEgZnaYtZ2RkriITK64mPzKp+sK5qG1VaCz4JfXx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.3f307d61.tgz_1516501343969_0.3638623836450279","host":"s3://npm-registry-packages"}},"1.1.0-alpha.d1544e1b":{"name":"gatsby-image","version":"1.1.0-alpha.d1544e1b","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.d1544e1b","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"0f1f9c97c474d07e85ccabeeb14f88f4b820bb9a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.d1544e1b.tgz","integrity":"sha512-kjvROH4PTOZSpjexEhzRr8VbjDj1mW9za92SnE9VlrcpxwDeR/LJTmmY41zYRYH7ChiiCDMWUwVwC0mD81ybtQ==","signatures":[{"sig":"MEYCIQD5Eea3dnY3PnBPfDLMDM/Y3zg9r5IvSvKxXfyr6SWZEQIhAKbeG3HyAPmgPeXRprHMQQ6jw3Q/rxvORExA+YGUhTHR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.1.0-alpha.d1544e1b.tgz_1516839226744_0.3654453349299729","host":"s3://npm-registry-packages"}},"1.0.35":{"name":"gatsby-image","version":"1.0.35","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.35","maintainers":[{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"}],"dist":{"shasum":"582154e59aaaece4eb354336428fa7840feae85e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.35.tgz","integrity":"sha512-LbSkWLAaBUSeXefwZ1hSplEZaZBuUmV7BysSqmAsofWhV/yOOLE9SIkilfvnm8CTML93O5PhtL063A1pVKjT/g==","signatures":[{"sig":"MEMCIFVUE0GPymU8M1rgyfYG8ocPHQV2dITR/pthJTJ8pitOAh86LCPd65VyWFK5UzAMgzT2rwlQDF4hhY4pOb4gDZFw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","_npmVersion":"5.6.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image-1.0.35.tgz_1517889635686_0.38917273795232177","host":"s3://npm-registry-packages"}},"1.1.0-alpha.53bbd4cd":{"name":"gatsby-image","version":"1.1.0-alpha.53bbd4cd","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.53bbd4cd","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"dist":{"shasum":"46898970dae9c0b7a53ca11188f74565863d9412","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.53bbd4cd.tgz","fileCount":6,"integrity":"sha512-JuCHjdb/00DxBjB2sc/XvYIq1AqZDvgvE5ZW8Y3uBUu7WDQyhP0w2YdsNcgiV1QDGuTZMDS2NSHFccZWcZn83w==","signatures":[{"sig":"MEUCIQD+6qS5SCrMqYY7d6CLIpXJktJdrY7LVwP4kaVqXhWkKgIgK8tEpo9WjnjbdAKGiUkptLushm6nUzObxqPMMH8rYrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24923},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper div |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__/**","watch":"babel -w src --out-dir . --ignore **/__tests__/**","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.53bbd4cd_1518294844885_0.8336972145458816","host":"s3://npm-registry-packages"}},"1.1.0-alpha.2b695217":{"name":"gatsby-image","version":"1.1.0-alpha.2b695217","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.2b695217","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"dist":{"shasum":"93167b1759937ccfb9025a2dca92eeaf426c1ef0","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.2b695217.tgz","fileCount":6,"integrity":"sha512-JLUIVoUqHGenQVJF/GPg1DjOrXcJm849cYBg8bRwAJ++eJljhBsXVVHUMz712JX/X7T2VwplzocwnMHxIWPDYQ==","signatures":[{"sig":"MEQCIGD/P98D1n4yeNv4S5ZS+wSyBMzbkbMdWHkJMIEMOWRQAiAc5pREuAFWfm0yQrphCgUtuONQdeLbFwaKaRjamfDdjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24923},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper div |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__/**","watch":"babel -w src --out-dir . --ignore **/__tests__/**","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.2b695217_1518302175341_0.7066481741395434","host":"s3://npm-registry-packages"}},"1.1.0-alpha.32ef58da":{"name":"gatsby-image","version":"1.1.0-alpha.32ef58da","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.32ef58da","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"dist":{"shasum":"366ece4baa0ed2458add5b7ff9a811ba08baa203","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.32ef58da.tgz","fileCount":6,"integrity":"sha512-mLdmNeaKfDTlNkFj5/PEQMQfHsApUTiMJGbyi0VXp4g9fRyAjYIj7wGeMUKY16x+plSBGD+8zQUGzVAPn9otig==","signatures":[{"sig":"MEYCIQDU8O2Fi+dQFRbFNPlFzwDV1Ar8QC1btdoHXAv4e2atTAIhANi9YvhQmuyQzov0DPMeE32MfLzdef9GfjB1sWaIt1mi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24923},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper div |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__/**","watch":"babel -w src --out-dir . --ignore **/__tests__/**","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.32ef58da_1518320650621_0.8949729649708682","host":"s3://npm-registry-packages"}},"1.1.0-alpha.5182142b":{"name":"gatsby-image","version":"1.1.0-alpha.5182142b","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.5182142b","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"dist":{"shasum":"6470e2f57e6fd636d9a03fbf1f194d6e7fd28982","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.5182142b.tgz","fileCount":6,"integrity":"sha512-/MDIfbJz7oEpzyyGsvG+KpiTVHlVf6K6PIijm23KvFziGKRKY/R9DO3ZM1cm1eEI09+dtDw2h15wyjOWyRQ6Jg==","signatures":[{"sig":"MEYCIQCV2QATSUKxNsOuxRgzyIU/4HawDgf2KpWyiJhl73hcFgIhAI5pPPOvZLPipHkDvbaN8ryJjejKTde0VlUuVfygigCe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24923},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper div |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__/**","watch":"babel -w src --out-dir . --ignore **/__tests__/**","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.5182142b_1518322311382_0.39160440282206754","host":"s3://npm-registry-packages"}},"1.0.36":{"name":"gatsby-image","version":"1.0.36","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.36","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"7aeace1c9e463ad9a145c94cf20be8cca9c0e382","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.36.tgz","fileCount":7,"integrity":"sha512-Rv18jWKNH3+/oDcpDJA7c2voTHWyYEOBoQImvh9T30E1VF4PvnrCPP7kDiayYEBsQFaZa6Pw3/qRHi1YB2CWhA==","signatures":[{"sig":"MEQCIC7ji7PI5RxsSVqC1X2JYQ/Zuc70mee03P0lW86w20BwAiAAo78Yx/n1WOo2wQJYecCYvsLShFDNCsN0CvLdjv79Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26264},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.36_1518484289235_0.29133640990573073","host":"s3://npm-registry-packages"}},"1.0.37":{"name":"gatsby-image","version":"1.0.37","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.37","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"c3b2dc7d843cab078b516729d6f92f9785f31210","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.37.tgz","fileCount":7,"integrity":"sha512-1aMsyMM5DRd7Uz+SbQ/0/btle8QeciD3KsVd3ROHZXkh44yWurT7a2UUSgoNoYsYlNvJG5GZCWgkU+sB3YNORw==","signatures":[{"sig":"MEUCIEpdQKzKFOF1im/QXF0f1H9zckYyLILFqlfviUrqh/IfAiEA7I8tgESCRpItDIwtsjlzMuNISQd2PftV/xnqE+G310s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26928},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.37_1518566262972_0.12030767565832501","host":"s3://npm-registry-packages"}},"1.1.0-alpha.6ab84875":{"name":"gatsby-image","version":"1.1.0-alpha.6ab84875","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.6ab84875","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"dist":{"shasum":"e88e39a1128ea02b9ce977c960f68e3ad3cc872e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.6ab84875.tgz","fileCount":6,"integrity":"sha512-/KrUiMaFt0hFYJ+71sOxhC4ZHEdVEScRv4RywocR1OMaGBuFZsROxP6s7+rMr7Zlndp2jHUbo41wrsK2yjXFXA==","signatures":[{"sig":"MEQCIDWgZFoMDxYP/LoS95hwN1mAiH0Uu8/l9JTVrrBXRr9vAiAdmxne/lbKdivHH80/O+CLGB+s2arHY9SbOT/x0wgmMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24923},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper div |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__/**","watch":"babel -w src --out-dir . --ignore **/__tests__/**","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.6ab84875_1518660370920_0.5124869119536599","host":"s3://npm-registry-packages"}},"1.1.0-alpha.9d4de2a6":{"name":"gatsby-image","version":"1.1.0-alpha.9d4de2a6","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.9d4de2a6","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"97660503af8f3836fe01dd36a9d1f8d74945db5b","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.9d4de2a6.tgz","fileCount":6,"integrity":"sha512-Y6Rno5KgozlJvMWJQl2gKrd3je3UuA+9kaIm1yIKZ+3fNgr2vu5VhsdULXwItpQnR7huuYxIQ2vmPLp1iiX52Q==","signatures":[{"sig":"MEYCIQCFvNBMsZe/2Wc/LMjw9ayuizBleUgP0Q+dJ6jwvkkxcgIhAIXe/0M1bKRbzUI/sbPWNWM4jSsZmdWJEw8T95j0zA58","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.9d4de2a6_1518726713126_0.4546497556339879","host":"s3://npm-registry-packages"}},"1.1.0-alpha.1a8f691e":{"name":"gatsby-image","version":"1.1.0-alpha.1a8f691e","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.1a8f691e","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"9f5bd67e275e434dd96b39dc1ae64096c6c3ec57","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.1a8f691e.tgz","fileCount":6,"integrity":"sha512-Nh5vGNsO772FXQUSWwuWWk/betjFZfqJ4HD6JtKV0+yUMo51OahvpDxw4dPqMivb2CZ7N8tVcIh9f9+R2fweHQ==","signatures":[{"sig":"MEQCIEfvWC0wtELiVc3pnjTl9qM8hH8fhKbgUFDNUws1aSCWAiBJj7oHgBFRoNHXqHPEhJ0rahxiE/7SZ8AwMpxnjqTwaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.1a8f691e_1518728431882_0.4974956749332593","host":"s3://npm-registry-packages"}},"1.1.0-alpha.9e381f74":{"name":"gatsby-image","version":"1.1.0-alpha.9e381f74","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.9e381f74","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"22bfec37352fbaeed8b993d1945dbd62c4062fd7","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.9e381f74.tgz","fileCount":6,"integrity":"sha512-fZaAnjhXKj8IfPTKcVI5SVd8+RRcXP/0VJp64E0PbsWpc8CVoZlNqfYJo9Qzs4bJL6dIcGjy4RXVckvGzlGetQ==","signatures":[{"sig":"MEYCIQC0iWb0WYj+y/sQRzmDb3Z6fH1XVvLwaYPbn2RstOklbAIhAMn+hJ+x4XtJIEJ9KXj628C0D582u1WI/4BAzslZdeXv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.9e381f74_1518729128208_0.9795930629927136","host":"s3://npm-registry-packages"}},"1.1.0-alpha.dd504153":{"name":"gatsby-image","version":"1.1.0-alpha.dd504153","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.dd504153","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"43ae3543d9abeb3eb03f248ec010e60aef616ceb","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.dd504153.tgz","fileCount":6,"integrity":"sha512-G7kCKUYYJUC5WbAkMucHxE5m2F8HmbShLJyuZeISrd87coiupZECcgBnC3WsKvipuMJPAN6/bPV21uftspy/LQ==","signatures":[{"sig":"MEUCIBWO76ltbKt4dzy8ATkE2L9dzr27S9gWbOXbaMCZf+v1AiEAwlN6FfymCjzfTzlhEsq8fAVObiwURnbV0upq52Q2xuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.dd504153_1518730139747_0.9477126731601859","host":"s3://npm-registry-packages"}},"1.1.0-alpha.b68b7f5c":{"name":"gatsby-image","version":"1.1.0-alpha.b68b7f5c","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.b68b7f5c","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"db2a708a0512b446278e38eaa1e212d78032c88f","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.b68b7f5c.tgz","fileCount":6,"integrity":"sha512-NlOUxzERViFVSA5XCDFhM7MGjVEcyMDSl7W57JfPocEi/g52OMEdKkRcyYwPx67xd/UQrrDXSk5NZ9XVR2/4iQ==","signatures":[{"sig":"MEUCIQDI5Cujo+KRqTGIWUbVNaSOhRXDgODzsSFXKFTMnv7JvgIgJdBBw2sHI6craeiOuGB9L9oDbe+qFfyi5suDnKnmSW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.b68b7f5c_1518732009711_0.7498334413255552","host":"s3://npm-registry-packages"}},"1.1.0-alpha.bb258cb5":{"name":"gatsby-image","version":"1.1.0-alpha.bb258cb5","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.bb258cb5","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"f5cb508bd6896fdcdad4d303ca56a2c9f8de9c98","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.bb258cb5.tgz","fileCount":6,"integrity":"sha512-gp/vQXegzDpM1wBZM9fSPZMIUUD370++Cnyr5BZJJS4MeKMZoK1FfqsC3imqA5LTJjvYWhcF2pNmnbbgqrSl7w==","signatures":[{"sig":"MEUCIA3jZTeI1onTH5r+EtU5SZl8M1IUUiFnZRDzHzCO1YAVAiEAtaWkYWQgj74g89T2YoXElc5rgsz2cW7h8TFzDA4PUAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.bb258cb5_1518740951478_0.07475813254750596","host":"s3://npm-registry-packages"}},"1.1.0-alpha.e28a1c8e":{"name":"gatsby-image","version":"1.1.0-alpha.e28a1c8e","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.e28a1c8e","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"8772d0b3f52c15b0c5549fcbb785a49978c25133","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.e28a1c8e.tgz","fileCount":6,"integrity":"sha512-3xo4g5ZM7iuFO6rkkpdTJVYu2Rz+4p6QqicrB4+Kf0OKfW4uipZkW+LSFNqb6EYNud4hbrachsWeEuBmcDlUsA==","signatures":[{"sig":"MEQCIEHb22jbfJG9+5PrqggrjiMNf97JwBC7S9CkM0ECrTLyAiAuxTbG2Onwge/X7/fIlGXL3gF6a+V+5gyQ+vBCTYXc3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.e28a1c8e_1518743442880_0.03059685901039111","host":"s3://npm-registry-packages"}},"1.1.0-alpha.067e672c":{"name":"gatsby-image","version":"1.1.0-alpha.067e672c","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.067e672c","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"1e21a3a3dfe02780ad5cb785a08bd2679f812796","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.067e672c.tgz","fileCount":6,"integrity":"sha512-cSZ6Z0OWTfdUTaUFNtMpOXvLlDuocUEmNk3I189rKvucoLpp2TBNM73fOHhu5eAJRz+TVGqtuXtFrIyQU5iNpg==","signatures":[{"sig":"MEUCIQDGOx4+5e7aHbSwGtyiMpEPyDrQSpBOP+8fDeASiLObJwIgR7q0uK0aorKOlKZ9WkcdhPr5TrDMmgzwp2G95yRFrhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.067e672c_1518835482750_0.7564319250470413","host":"s3://npm-registry-packages"}},"1.1.0-alpha.d0b8dd9e":{"name":"gatsby-image","version":"1.1.0-alpha.d0b8dd9e","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.d0b8dd9e","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"74f5ead8d4ecdfd57265eb24bf097336cd6a0586","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.d0b8dd9e.tgz","fileCount":6,"integrity":"sha512-2E3BdV84NfzIcG+vFd9X31RQBnOPmjaK7USYsGaGJ51cmbhwTAQ95g9bmHntfTpuwevm7SITt5++4Qd8/622vw==","signatures":[{"sig":"MEUCIQCaDlHPVd+3Tzr1fyESDZdDNQIOqJ57rXGUQWoM/PoZcwIgZjYOOxtbGjp/6T91LRuvb9V3h6HBVA4YIjdbRQ2AXl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.d0b8dd9e_1518894283212_0.4902023485529112","host":"s3://npm-registry-packages"}},"1.0.38-0":{"name":"gatsby-image","version":"1.0.38-0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.38-0","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"623296cf0deda72b57a9cfcf9160666bc3050151","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.38-0.tgz","fileCount":6,"integrity":"sha512-wDihfopl8n9elfP41Y4+UxaOizQ9pqjwAK9et56g/Uf+PFxAubISVJd7YMKNCF8ZUZZL/ZUMR2fP9arYWNVVhg==","signatures":[{"sig":"MEYCIQCMmVvktYjfjPvv+1ngaL/KM8jQE23oGjnE+cNXAPhIEgIhAJYjH7FrEbJ0E6+d4kmISkniGUbwB/knIoVqUvR91iuO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25991},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.38-0_1518895833243_0.8414450827206261","host":"s3://npm-registry-packages"}},"1.0.38":{"name":"gatsby-image","version":"1.0.38","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.38","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"1d01e2defe9b5dc9eb304479f21922dae2096831","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.38.tgz","fileCount":7,"integrity":"sha512-pJcjwx7pUy2c6PdSPch3qTO3UT394BpSkkjp4wtUVRXjDe9ZRgfDdWbCl32HCA8+XDghQ3Q7bSOCkrIXqFxgvw==","signatures":[{"sig":"MEQCIAEACUJxIwFN1uZhdBNHSJmtOjaGTWIxFQrm7XReGXdZAiBOOIjpW0K6AWQwaJSqrEmlb6/J+TI7GplGtuMvOQvrmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27037},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.38_1519082933151_0.6278097498371515","host":"s3://npm-registry-packages"}},"1.0.39":{"name":"gatsby-image","version":"1.0.39","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.39","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"2e8fdab8138e5d36839398874e51783e72e6dedc","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.39.tgz","fileCount":8,"integrity":"sha512-tY0Ny7NrqeUdp9QrwEYWJGwYFYRgIM+ykiscGCqOjdDB9fjdwpLSrYuETVI7iVodHDZ6pQfEoEiDIz8n3f9/uw==","signatures":[{"sig":"MEYCIQDKK5PrEuHZX8sVDxTvYLL3B0rbRypDcK28Q+LZNGxoBgIhANWz0P376ziGHOkT9c2Bt2/cNDM9iDkMhhn9Qcc6YUvX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27528},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.39_1519342626196_0.8410774198990025","host":"s3://npm-registry-packages"}},"1.1.0-alpha.e66c6c9c":{"name":"gatsby-image","version":"1.1.0-alpha.e66c6c9c","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.e66c6c9c","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"6a499c906de31ac51c5846b3cd6156e28cc18f6c","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.e66c6c9c.tgz","fileCount":6,"integrity":"sha512-lzJp+g1iLO8I2l7noAPGDc+NId1FeIeo/C3Ha3R1n269arGh7+DqVaIWbZCn41ktrjYgCaee757es3dff+ACgA==","signatures":[{"sig":"MEQCIGVAuZKcdAx3QQm7V1aGbQFkZATy70C2i4TGv0I0Qzu6AiBBfQDlgS+5aHoZxcYX6OyKO0l5UqSVYwtvoYnVBqOxMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26003},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string\\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string\\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string\\|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby.git","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.e66c6c9c_1519694658424_0.6185109013213048","host":"s3://npm-registry-packages"}},"1.0.40":{"name":"gatsby-image","version":"1.0.40","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.40","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"473b77cbabd123d0d988934dd0fd67141310e996","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.40.tgz","fileCount":8,"integrity":"sha512-vaj7XtQi1rYpd6Fm+tYRNoBWmGs4TgkJhPPbUOzxM0Gm026NIM3H5Inr0pPZ6qhE53mZvoUU0R2+KK9mRtXyBg==","signatures":[{"sig":"MEUCICBn3aIkwuXAPeNjAqHf+JkQ2ZzArrHskHb3jU2swiDnAiEA/upxnqwcV62wUiUyxaHi6YwT6syTI8JnqJAHA8MX1L0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27522},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.40_1519850358111_0.21645218427362756","host":"s3://npm-registry-packages"}},"1.0.41":{"name":"gatsby-image","version":"1.0.41","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.41","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"56e356f54ec70ec5136b7efcce1c71dd18bd47eb","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.41.tgz","fileCount":8,"integrity":"sha512-DVNBIvMwlE9vNOtmpFFNqmcBV+CFP/aYkGk4Cf6vJktVGV7NYb9OCH6nBLaGigXDaJM1W+2RI0l5UNEB8oDakg==","signatures":[{"sig":"MEYCIQC1UKQtBH20jbo67Y3JMzq8FmY3+4Yfb3LrWcRllcEYgAIhAP26foohYY2FaMQnSsQ8o5e9iH+c8J6N6gD52XAQskXc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27535},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.41_1520020482146_0.45160985553091626","host":"s3://npm-registry-packages"}},"1.1.0-alpha.2cbec6d6":{"name":"gatsby-image","version":"1.1.0-alpha.2cbec6d6","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.2cbec6d6","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"4e8a41f5dc1929cac607198458a9474a5a472af2","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.2cbec6d6.tgz","fileCount":7,"integrity":"sha512-j1z7Of5d4FmJanVRDH2QrmY9Jv0ysHdvDjWVvUrHgLKwlm97rrexRBtXOW+81RqOLxbzCqZCJEd0aIu+yXhuFQ==","signatures":[{"sig":"MEQCIEe61Em4DT+QLTGEqTJEzreqrNQoFlMr1lbmrcBIz1ZPAiBEiPakmvJEJDL5IC5gPyUZdqmucV7VaXfAV0tDHsKUAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.2cbec6d6_1520059568620_0.3526425808355955","host":"s3://npm-registry-packages"}},"1.0.42-0":{"name":"gatsby-image","version":"1.0.42-0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-0","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"9f5ba304c5c76ee6cc5749bdd890a666cc909c8e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-0.tgz","fileCount":7,"integrity":"sha512-E04Hz2vWtcjOyeMo1xPlD9rKSOGzBr83eT7BUWLcqqnTR60j//urZrTBMSsIcuzcrMI+qNRVw4FGr/zdqSHrhQ==","signatures":[{"sig":"MEUCIAy/ZdmRUpKEOfZNVwUe6iE/lnUZNKVdfXolJ9LLA3i5AiEAh4dACyTR9TO1L6sTzlB5oz01xahorIDhNs20FYD6YlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26613},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-0_1520061784408_0.19965493750298813","host":"s3://npm-registry-packages"}},"1.1.0-alpha.f98688ee":{"name":"gatsby-image","version":"1.1.0-alpha.f98688ee","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.f98688ee","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"28e50d18b3a181dfdc4c4eed1aa480867c92a867","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.f98688ee.tgz","fileCount":7,"integrity":"sha512-26piuBvrU93vq4fTOjIHiG1rzC+r2pbLK3S3O/kUhWRszSDCywwUO3+GBpgsKy5RT2kMWRnV4VboluVpDQuQFA==","signatures":[{"sig":"MEQCIGfFdp8utn0Tx2mmUoPMjOWU7E064gSMM4L2pjV+OaXZAiB4ojiuDaVDmE4c4ONmKkIjqGRpSO0HjvP3uT3XIRVHxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.f98688ee_1520389517495_0.6663794824068867","host":"s3://npm-registry-packages"}},"1.1.0-alpha.9fe50b00":{"name":"gatsby-image","version":"1.1.0-alpha.9fe50b00","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.9fe50b00","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"6b7db95d1e73226f176d4b931f0418dd9558da85","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.9fe50b00.tgz","fileCount":7,"integrity":"sha512-ulcYvmuxoKTUkk+P5j1r2FJJh7wy+6HlI+3CS3vm/JCumySqDf+6W+23TspL8GVIKVuyBlPKRwoG2V37m9VXhQ==","signatures":[{"sig":"MEQCIFQCUKTtJZIR96NoZbqmNVVrcXiZGoCoJs9B5TQVv+9DAiBuMR1LRPj3of6pIM85EyR1Wj7JZ/RDMb4rcL0JTVizuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.9fe50b00_1520478239871_0.626473275171842","host":"s3://npm-registry-packages"}},"1.0.42":{"name":"gatsby-image","version":"1.0.42","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"c7fb2fe93884bf91bc1b76815e08c7ac718ce5d5","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42.tgz","fileCount":15,"integrity":"sha512-nsmLipJYBUlWJUfXyaORT+2ihCCMxUbwvkA4MFEpoQfptpypsOo5gg8cfCc7JgRN9mUlY+brQjCQnTQnsMQVGg==","signatures":[{"sig":"MEUCIHD9dWmu5a1SGHGkG+BfKKupLcn96i2zY0UCaoFih6VDAiEAyZp34uoubfvQsT5Oom21Jgylk3wdrfTvdzy98zi2D8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112689},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42_1520921831809_0.13631366595889793","host":"s3://npm-registry-packages"}},"1.1.0-alpha.34eda94b":{"name":"gatsby-image","version":"1.1.0-alpha.34eda94b","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.34eda94b","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"81aa9b9b1d33616545031d040fe1cfd7adaed465","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.34eda94b.tgz","fileCount":7,"integrity":"sha512-eP6QU0Ih4O/9pxZ9LZ5xTu43bQtRjmpcMuQkvnVkK4Gq3/oP9vSg2CooQcaVLu7HK+kymQ4WJYdor1wbrmL5BA==","signatures":[{"sig":"MEUCIGsDfD42IOL16fM8z8Dh70YrjOA1hpFTUBUtww/FoOHGAiEAl/sWeZwpmfj7/d6Jx/GuRVhhBZmmlXM10p+BzNvz7FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.38"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.0.5","@babel/cli":"^7.0.0-beta.38","@babel/core":"^7.0.0-beta.38"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.34eda94b_1521321712693_0.620645234528443","host":"s3://npm-registry-packages"}},"1.1.0-alpha.12622d64":{"name":"gatsby-image","version":"1.1.0-alpha.12622d64","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.12622d64","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"1a51247adbfe937edcd96718bb3c487f23bf08b9","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.12622d64.tgz","fileCount":7,"integrity":"sha512-0H6Sgu3wdE6bqTFksv8wtW4UYctiP5OZpaQrQq8vimz77hKFhmxF+jbHBZwqba440hEaxI3vqKhfRAVjEH30Vg==","signatures":[{"sig":"MEUCIQDicd39nKdBIr8XPlhV6VqNbBzGomMZAyLg5f7dqeUJXAIgPo/t/w1VXd8g2DFNZFNMzYHLC09TrgWb7+e4v3QCJzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.12622d64_1521331172628_0.07017485902770426","host":"s3://npm-registry-packages"}},"1.1.0-alpha.84bd71b4":{"name":"gatsby-image","version":"1.1.0-alpha.84bd71b4","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.84bd71b4","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"6754e2d585a8dca77a0b8dec850be05558fc7a4a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.84bd71b4.tgz","fileCount":7,"integrity":"sha512-Ry1CDgaKRQ09Yo7jfRiXXPa3dHX1ME7eFGz7Le4IzCinO8vTAcc1xwHByZaiT8/FVTzk5DxC/SYsFBkfqkVo3Q==","signatures":[{"sig":"MEUCIQCkAoO40kDJ5zhLw7edTRFvrELuigbUyjNVwq5aPPfxHgIgTqrL+jhl6uknBRcXoc2QzDCxy+ehL56GdTy/nZZA0zI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.84bd71b4_1521333553297_0.6834545150944742","host":"s3://npm-registry-packages"}},"1.1.0-alpha.6ad61a13":{"name":"gatsby-image","version":"1.1.0-alpha.6ad61a13","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.6ad61a13","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"663d03255717e00a311111e5798615469b53658a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.6ad61a13.tgz","fileCount":7,"integrity":"sha512-FSLA8tUAAvj4fn10EvaEmm/jMJpJpJFSOkcgb4GNxv01G7eksLTwsPiNqJ0xsu/ITc8GwcpSkiwttsfNjjWlzg==","signatures":[{"sig":"MEYCIQD594CkggxECTvqJR1N9ho2tgPulILW5WPF15jaAADlcQIhAOAynJHudP+1VExw2E5vLUnawsQMe+Q9802HlCJjwU/a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.6ad61a13_1521654531529_0.00987154936895962","host":"s3://npm-registry-packages"}},"1.1.0-alpha.5f47082e":{"name":"gatsby-image","version":"1.1.0-alpha.5f47082e","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.5f47082e","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"c9bf690c842f87e0b0c979ad7c7a2d15d141f5ea","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.5f47082e.tgz","fileCount":7,"integrity":"sha512-GwK5HdvHxmD4emEB5uED9+UOQs4A7rUJzr+QuA/giGsjfJHDeM8GFRU9PWfmwzUNJCVJinCU1LU7BZr0n5JwRg==","signatures":[{"sig":"MEQCIDTdpelza3n/ZpcScJS7lnc3+NbvUNzMHVvuLeCB/Y/DAiBk9adec/EIH3Y4QqBq7FpvdSgH8jGTgQvqme8ioFxHyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.5f47082e_1521845217444_0.6090400646599163","host":"s3://npm-registry-packages"}},"1.0.42-1":{"name":"gatsby-image","version":"1.0.42-1","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-1","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"dc3ff4951567bf99330f7038e48c5a4d83244357","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-1.tgz","fileCount":7,"integrity":"sha512-gQvJsMC14Q/IWP0NlVVnWDt0WHabDITnRv7Qd7XXGvks6y2ma0Uhsr06aBMwIVSPygMx7s7ZBYFvdNdRQd+nOw==","signatures":[{"sig":"MEUCICL/gt/UBoyhhdfC/rCjpeqsT5OOVTmxmgE25/QSHcOKAiEAgujhv0X5b5PfP5GFp7nAnPPit+bgZfeZ0YHeaaS0H/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26613},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-1_1521847108661_0.7975138530872021","host":"s3://npm-registry-packages"}},"1.1.0-alpha.95fcd4af":{"name":"gatsby-image","version":"1.1.0-alpha.95fcd4af","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.95fcd4af","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"4e546c8e075dc4d8decb9685455067dcb6fcd085","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.95fcd4af.tgz","fileCount":7,"integrity":"sha512-LHLF2sJtswcXPp55CvEJR9gLrArgRU+C3JmStwotqNFP4wtx47yGZzUYC8dAWCFvMbbkUqrJEU4XQDfX/bjgtQ==","signatures":[{"sig":"MEQCIDuI4ThWKT518w5jWdeeJ6wPTvpgXz/XzuD3HwrU3fQeAiB7xfFRYLG7oSelLzAreS+cmcZJTqzemroAYITANV4KtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.95fcd4af_1522290105419_0.7960211328572806","host":"s3://npm-registry-packages"}},"1.1.0-alpha.20252dc3":{"name":"gatsby-image","version":"1.1.0-alpha.20252dc3","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.20252dc3","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"0c94cb5967749518095271d979a9d6055c585c8f","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.20252dc3.tgz","fileCount":7,"integrity":"sha512-QOikRqT5wWtWcCO354++mIjIvhUVy49YpvuBtCVMfTctOC9RLV+5qMTssGHVw2L0QPDuTFmRAkMJhDfOgAuowA==","signatures":[{"sig":"MEUCIEOV9oQdGaMN8k0RBjSAy+Naja4r1EGWMB8OXvv8jatuAiEA6CpY45ylua3ov+UsdU1IL583PT3d4V9AvqAt1Hs589o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.20252dc3_1522291405899_0.5953805263480245","host":"s3://npm-registry-packages"}},"1.0.43":{"name":"gatsby-image","version":"1.0.43","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.43","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"aac992fbbe0793bd37a333d6a5da63a2c4d2a2dd","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.43.tgz","fileCount":15,"integrity":"sha512-CKRf9+9sjvAlIE6UP0SqQ++Sic0n0AbjFg/6CHJPFRdBWHEfL/xIwq46QSDZIRr2T/n58I8aW0kN59t4rkRnRg==","signatures":[{"sig":"MEUCIQCArYvkB/3Oyd1smjqIdAEd6HxcsbBt7QMNaAv55Th32gIgT7PZZPebMgXAE9pFTmvQa+tlKoQUEoXgGOFAZHKmpBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112629},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.43_1522802730180_0.6343071216520517","host":"s3://npm-registry-packages"}},"1.1.0-alpha.4a09f745":{"name":"gatsby-image","version":"1.1.0-alpha.4a09f745","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.4a09f745","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"8ca7221bf834abfe9193b7f7ba1d4e29832948c3","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.4a09f745.tgz","fileCount":7,"integrity":"sha512-N7SfF9CJzThH2FWD8fSPWZtoqHGVFgeeEr1mNJIo6fZFFebVxllhqa+zCUCnESovmm1ze9jSoBhpZy2vlhZ6GA==","signatures":[{"sig":"MEUCICExmCraczxj+A30RupWW/8t3INaaTbKhuCjbZV6PLKXAiEA3NhWhAdlQj8Vb2rMGY5inqhXCtjfs1ri0FPC6UvpWls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.4a09f745_1522966470528_0.026699345790525353","host":"s3://npm-registry-packages"}},"1.1.0-alpha.76793cd8":{"name":"gatsby-image","version":"1.1.0-alpha.76793cd8","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.76793cd8","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"53b2b653789b2504dd1efab02e70c7779e8b003d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.76793cd8.tgz","fileCount":7,"integrity":"sha512-EkfNs/PBetty8qrTXhJt8+TkIpEhyyNyl9twI6OVUswCfsJVRH0f8EaQN6NUPlAd/5Dc6J0lqBimS6G4Zpnplw==","signatures":[{"sig":"MEUCIQCJORlpIIQOKyZtIbHJWIQ68Z3FaU8snwowY9fZ0/FzywIgbQbqVrieXv2TQJ9/VNYSLVyveSRpf0bu9vsSTb/AA8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.76793cd8_1523139105543_0.7932815218329081","host":"s3://npm-registry-packages"}},"1.0.45":{"name":"gatsby-image","version":"1.0.45","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.45","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"2b909e00dbdd6386872a1a6909d39ded49930ac4","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.45.tgz","fileCount":15,"integrity":"sha512-aXsFnYyH2GNLHnvdFrchRxy50o1xWm+WS73eUvJJc1OMYbDtLtPWa9xb1EtW+P2XvAvi8vSq+lTqkDwm6Ld4iQ==","signatures":[{"sig":"MEUCIQDH3Rf/u6JDEFLs54LIR4+45t7acESE6egV9ATXg5KUfQIgN3L7GNjUdcaUBefcOSW4It7vA/lYIMerBDcRxWww4Xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112637},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.45_1523324807112_0.6474871828233131","host":"s3://npm-registry-packages"}},"1.0.46":{"name":"gatsby-image","version":"1.0.46","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.46","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"c01f791eec5c1070a99e33ad04973c3f2818f778","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.46.tgz","fileCount":15,"integrity":"sha512-3coueUgLWFLiDX2ABzkVxWxv1lM7dkNh3SGUACAnslE8ZAtbmVUjwb/RoSU8v2uNB8eezNXFdfXsrmlsesfLEA==","signatures":[{"sig":"MEUCIQDKz1rIASouK+LC3gI2a1x4vfN+h4SPjbxF8HmU8nlFxAIgTk099LmAYaP26U3/O0TYQj1+7kx2yntvJ/IYXWoC0DQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa0n6BCRA9TVsSAnZWagAAwccQAJ4Gkcb+fvCjrK59kmEB\njflun5WWAarnb+7BppMxSGTqpQfZWhRS5gH0YlNuobz7lPhV79Q+WYheKLl5\nHcL3WIbuku9R127naIfklT50SosXWVbcoZ50Pema5vHQbkkdwNdcJg8oloSu\n4vqHK8mBUo/ItQSSXuX7HmzC4y0k/z/UKXxX28dLR0T70m+VaLjRmtTXkBEz\nMEKX3yEW/78m/7M9VwZbDjUL/CfME7wyv508QQC0OTwfv++a9G9HxF8NSrDW\npMQix/hZRftT2dWll+oTWJlf4zdfPXxx7iIP6eQELfjfcYdpzM9Y/hGm6FG6\nIT77/nMZB2nH2ecN0JV8OyYip2EcGVxh1yxZpbNl7UjdzYvJTXZCgci8SRm1\nN9f6EOfzItZlkway2i6P4NYFI+HjCtlnXdob29bs4sVxFgADqGtEC10acGAY\nkH2NaLlvdz0ylYfEIyrmZXVX787xI6VApYf/en3i+aBeTKc94ts65ekibSgg\nkkl1nLdNDKvzUmZRCBttoZNS2mXK8v6GW8tBSF2J/ZzVz4YFd2VjoS1NEMQG\nG6Gf0bqNL7YnAEIIcRUbBbp76McT6MSiMN5x+PInBHNsGX6jSMwtmFU42x9z\nnFfKeN1f6Qd+R7uMY7YwpXnCEqW87wNX1c+aSkEXjDlM4vmUp+JMRkpUfOFw\nR09i\r\n=CQqz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.46_1523744384414_0.5675469926499201","host":"s3://npm-registry-packages"}},"1.0.47":{"name":"gatsby-image","version":"1.0.47","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.47","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"77f6563485708dbd6bc59bdbe465b000dc63c54d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.47.tgz","fileCount":15,"integrity":"sha512-7IdOd6JdwAfVvF1Bry1N3wpfAvYL97Q4VqYp18yhS+SBsPclwvHKawD8qVCjQtYexOAKAE8qgnCZsSYvajayHQ==","signatures":[{"sig":"MEYCIQCcFnxgLTnSxdLyfArL7SfgktSsja7TjbaeHNGsb7lyRQIhAP97WHDPG7926a3Fr8yKoe3TM3Py8Nf4XDDgMWWATEsD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2MSxCRA9TVsSAnZWagAAC+cP/1oncsyGaYuS4M0wqB3e\no5nQ1iGthqnoQhT7Jtwqh9MA/cR9e0gOqYEukmsD2yJBHWJPtfsIkH30merL\nNOV4AX2+JBx9NnMhk1ryHYxPoeDvHP2PNp0D6FDN7C6h7xi9VyTHk3d/TpWm\nlkbN4rNOdQ9eZsHkTXXuhbqbP4GGMlLR8mQKYcAd1iwYDqFJ49oMkWvADRXs\nd3Bvjocg3jPBQJu6apfrVKH1UJTVmI0MyQdG0SAkltdkCbcZbR0uVThbIKbU\nmeYyRc81FJFh1gQf+5LusyyFnhUpRLX5a61PGMigXAI8bCwiaQLuOOmNiubA\nd++tdCTK1GTmUTS2jg3up/rVqEPHETNimMfLUiSoGMLlzWk+ed70puyC8sIy\nMrog+hu/tRrSekK+4sY5LoQzJpg/KpbbZM56KtaxoyNSz79OkL90PEnEbNxA\nKhnxus9J5cQ6ODZlMtyjjwDyb5MFs1ONQYYknuftUHeF1YqTTEn+e7oIhAyw\nIgNtWxrkXf2ctXUQixyWlyXmwWzgwEHwRkHCV/388cUq5JgWvpqYaPpbN4Qq\nVGGK5mTuDR9+NE6q0Q+kf6euaAGsylxfpTfEsMHSZNzf2U/T5Rl5P06dLlkA\nbNjf6ahSwSxuDSqFwgZcfp7gFJg8somw2+G34gqKs4mzrkrIM0r6FIwZ+Hs9\nrUUS\r\n=YFXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.47_1524155565985_0.7155213297318803","host":"s3://npm-registry-packages"}},"1.1.0-alpha.5c9569c0":{"name":"gatsby-image","version":"1.1.0-alpha.5c9569c0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.5c9569c0","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"4939c0d40c54b3d5dbb826dce71ea743d3d9fd50","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.5c9569c0.tgz","fileCount":7,"integrity":"sha512-Bu2uTvXSaOybJW9aZG8NDxswlabPioZlGB35kbBzhw4ZQ5O9msO2Ye9tfiB+wO660X+L0B8O8LTBIiBy2PQU4w==","signatures":[{"sig":"MEQCIEg6VNaFdKkOIk6jjTpsT78DGbj9R9BzR0mYOKAtHS9hAiBv1ksYuAJyig2KOl+yjzNM6D4w7BDR0ffjmHtjXE0s5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2MogCRA9TVsSAnZWagAANJgP/jTLnFhLIMWLE1VqPlTd\n/CYWpYJgiTZjuzFI+2QDX4SgXVrgvFmlKN0mMTA0VyMrzw6mHL+8MtHoomHy\nhkzFCOzeIWVoPWoI5BQx9qLVVq2rKckUbSo4T2NZ+31uD1Hfp49VH/q5DS72\nuQixtnfyxg8RrzyllniV0RFnHyLnEORma1LDLkJKVGuTFMjG1vaJZgeWCJTW\npSFHesvu+p/xSVuefjUjw440hWE2XP3YtX+IbiOWQNxp1oIaEvyw2tJt0DGe\ndEFo8ZR5XlWVikQvyfXOn6tQg4R81U2sXRao/M46840SlQiT7Rv5da8onNKN\neAgaVnBJc55PHh297DS5S9B1lrobu94k9sdPCYCohF3xrpOlkto7NjOF0lTd\nxU3Po8Um1kEMoWcpe9RbdpUhr0mZSjYeSL3y0ufB8aeY1SX9mOOWAgEdGFOa\npPCwMHoNxmMBULE9+qMun8dGDR66i6+0wVho7UwDr5Y8+xJMR5M54a5Ot6hb\n37yQ28X1Gvywp59bjGUuAu1ocRl6gTHYL67KM0YM3eOdKUmQvFU4tR8zze6M\nCuDv44zZfyjXF8pdaFcIqWV/8VAEYWYOfgEhANCGIU1QbFcZkZnMwI2YShs7\nWwNNdgz8Rn0LWtE9KmGoNauAvteu5570zAFEQ92H4bnLXHdYs7PEQ0r9bFzw\ncT6x\r\n=QMaj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.5c9569c0_1524156959309_0.517089151925473","host":"s3://npm-registry-packages"}},"1.1.0-alpha.523a4286":{"name":"gatsby-image","version":"1.1.0-alpha.523a4286","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.523a4286","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"03c06746d3c3c213dada8f19ff0aedc706cf165f","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.523a4286.tgz","fileCount":7,"integrity":"sha512-EUzN1iBtyGqbRmH6Zy47R7FiJvdYmkQL03dYA4fd0hKUCXbfB0UqPSrW7IIZzE3xLA91k7HGlxbZSj2l0Q2OEA==","signatures":[{"sig":"MEQCIHTUp57Zap1JftCKqc9uX8eB2noCbNg3fLwuwLDG6bNSAiB3fOcLV2pqcnqLZbUa6zqzhzTgmB6Rh2I6TObSBo3J9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2StiCRA9TVsSAnZWagAAoPkP/0OegcasVXUPTgkUFUyP\n223K0nX6Twz/TviyYLoTg0dRh7IRuaXTQ6ngZsB4gqHXis/lhfMC0XDNdDp6\nH/6AGc6PGjJ6ZWvQT3QsZYVmF8LlGnaMa0Xeou8tVFZxIAtAi7UMtt9cXCAA\nmLGj6z8pgbGIrjYlU8qQZGF8sebX1JNigJsf2szLbiRkt+ksq8KmTkd7T6a+\nVVlpMiHE4ocJme4tVYCalDPt6Q7oDdeVz2p3JeUOIhEmjb3ilxDlcHJfcZZk\npqK+LNMF2QUzQMhJpN1+nSiObB9oOZCbj68rniwM5i749TzwTA+VXhS8NBv5\n3iBEa0087gEsyrHV5cxiJFFDWlykyO/oLvLe2YQ6dHOH8zrhZ3rzvCgdR96C\noSeidUlm95Msf7sh3ngxfvmKGLv9vjJCfENUrdnvDKCZPKtaxgX4IYx1VIV5\n9b/SJqy9HIhqMBbdzReUGzLjCRu6dqNEDXtME5Pp+8gwUyl20Xu0VLXQ+Dlx\nZOvjKOclQoBo0cY8YORlyblSQ9FM98KRBE26vpFzKIfzAV/FhzfXoQigGM8v\naF0MITLmolQFZbWXDQY644dpyDi1/IohJXD7O6kkW7oH5UxVA803DWA+GVHm\n4MDagSEbb0be5AnD4TBhAQgBLgkJIQcJaHbGi66rij6JVkMiE/Yd+yczJVoL\n1Y56\r\n=s2O+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.523a4286_1524181856903_0.5396675701376681","host":"s3://npm-registry-packages"}},"1.1.0-alpha.5421f383":{"name":"gatsby-image","version":"1.1.0-alpha.5421f383","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.5421f383","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"411a589e1be669f82bdce3ab8ea38dd0f272057a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.5421f383.tgz","fileCount":7,"integrity":"sha512-M9OtOeBgJizZLzkYmTbxAys+ftdr9Spi6NyFDDSH3tyGI7ceGIFH5bwiCHN03Y0kQxJtaco/QglaMWMqkxM1DA==","signatures":[{"sig":"MEQCIAMY7M44vOngaVmHSAHQThGzJns0Pt+Ir3PbbF9iBP+BAiAOg9vkXIhPbTujcTX+St655TZyrtZt1Q9MzdeA0+JhYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2Y4dCRA9TVsSAnZWagAAnPMP/121RaeKjIxh3OhPhQHN\nnVR1o348Gp3SUvPNQ/g6udIhEP2ukILz3EMJxsJrD0yPRJ0ZPOvc0ATbP0p6\nfwEqzGzAQvPVDZLGNTcJd+GqEvfRtmAHxzFPTZ+7RnjJ7hQFHCCz/aYufKA6\noa3ESjO6DxshcmD0Paa35NdVZS34lMDOSCCI5L62UXBABBzdB73URm9VVD1s\nJMFgeCaEdf05KEeAKRxKTdSKV3o7pOXpI0/mRuQqoqkourrquIAxwlpC+/TL\nJnR7yBp3icfcK8i5FdI04kK6qqrW2Q88Rbjk4m+AiA/2jSIgl/6VDxYOyXQl\n47cZ9QjcEkgZbr0r20OtP42A657nxDq303cUGTOO2wZe1VI/oFPy6Svv4S+n\nqwbBBcPOq8H/dknAcVcvS6moKf3O27L22FGfZFq6l110yzczNreiwhzHOgau\nuJgdFaGr6OFYZcR4uZDBjBsLYd5QX2XwCTtEeDl6Vxr1Hv2gBSZZ+CfMlIU8\niMdY+vYK8c9UK+vsk4rI2avkzamNg7egpWZz4cqCTL7fZMG0lGhY52owyRaa\nYs9i0YIJCQYeskB4dAug/Y5+yfoT/T5QhF5cIIIpFZALyygbIljhikXYXhKr\ndsAidwwCx1H6NBopcVr49j78l/WpcSdrcwEOJ2/3sARxeiF9ovKELddHXCDw\nyufz\r\n=OD01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.5421f383_1524207132755_0.24376641212833894","host":"s3://npm-registry-packages"}},"1.1.0-alpha.e9c3027b":{"name":"gatsby-image","version":"1.1.0-alpha.e9c3027b","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.1.0-alpha.e9c3027b","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"8518d50767bee7802b629d8defbe38e7771a4370","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.1.0-alpha.e9c3027b.tgz","fileCount":7,"integrity":"sha512-SQFR9TzROeP1bcH3j0uHfMcPRcMRrNk8VhI4OAP0W9cLpnVRR94zHy/upsh746bjB4XRaBl3YG0nS71u2F7Ylg==","signatures":[{"sig":"MEQCIBarky8F9ksE8zfu9JSMC+LPqkJS/zzuzYfQdwLe0G/kAiBrqC1pQZ842NKEoCIKHfnYia6v9E/c6To1hh0HJs9uxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2imQCRA9TVsSAnZWagAA744QAILtYJpJtgy1JzBKmumt\naCONnHLptDreygnmBte6VfmwS3mIR5N6jgiBjbqkdr4yF9cI+WjQeIbKYQPS\nKkcn19VkiqZ4lx4dfolzCDOM7ud3S16OmV3g2xNweXHVZJeAvh4/IbNkwDq6\niNgP9+AJ9L1BdaSS164Z6RKoAknEUHGWSzY/P/MTj7FMV9MuKcn059v7KyWM\nCL8bqENH8/mMPC6zv0U3DFlScIn9UrgcLxbasuvsvErJr51wWQ/Of6tAPg3B\n/n0rjdAxAszm4MHgr6YC7WwCDLqRjRcBz13Nhi4toh3HWeCM8tFanVFUUE+A\nKZ9KJ69G/XVwszdHOmB/NP3Oo0l4GG5+sNOrLijKU3aYd9UQXtSYsYDRFo11\nyhy3HCDiAG8Dg7RuRyhaOWozG6c9xz984D+/+OMmyqDCVnVPrFAQf58lJYno\nbryrJCfCMVt3Gd+gK/fnJocLFrO6h91WNpWOoJgJA7/BgaGhV9lgwFn3+0On\nyJvwCUtEkdDaMrtwUy5HI4iT7RAMsz8jSpXF1Xx/HUfn0R6eG1Hk0Dc6krnD\n+F4/kccH+mlyEg2RgtZhNtYsuIzpd8LKtZTCxAw2RoH1ABH7IqywINdMmbCo\nQiv9r4V+/5yKbx6hhKgB99dFXi0OdX7O34bmgxM3V0xRxZBOZxCnoyb3ab6R\nuyq8\r\n=/Y5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.1.0-alpha.e9c3027b_1524246928217_0.3501703129999467","host":"s3://npm-registry-packages"}},"1.0.42-2":{"name":"gatsby-image","version":"1.0.42-2","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-2","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"eee09acb0b84bb6813ae2f3058e92726f892aa81","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-2.tgz","fileCount":7,"integrity":"sha512-NXdV21gVk0N0/Y+39abMYNIhW1eblxL3+yHZDSw6MoDUKH86Tcu1FlRkSORGlAJnRKg/XCln1hCNL3+vZ5u/IQ==","signatures":[{"sig":"MEUCIQC0dXqRPbXRqD+kHYaaktgi7zHd7VArmyHCHx+6RoTxPwIgeNe12cSiooZRzT90/kzaXQSI5cbNLn33FaYw+igmaiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2+sLCRA9TVsSAnZWagAA2eYP/2hNh6Y8Pv2/dj/bJzg+\nqAVhVgd/Lqwvr4B9s7lLQDNYKIf94BzIdNWfFyBjmx5lTHMq1YgiaEzB2Pj/\nhJGR899uykeZVeeQgr03pplqm08t7NU1mkQNpNEpLMUhEg7Vmj5+YLTmBcbJ\ny6lp61Kd3FIQh55NOGNnz43SgYI+Ib19gIcW9zsQ9L+5Jbp8gV2OHp7lhSTl\nEEhn36nIYD6m8nVm5ztROifY7OTrBq9N5q2j/k88FV4QftNPDA3jcKlZeU3H\nWXZ5gp3Hru13lQqfBeYp/dzq7jpWoL9Y2Bmnc0JY7ci9YooAJ4Ck3DWnXJWM\nHj4U5pnQ75KPAy2a+m+AtNjUDKVz4Iyb0KDOQ62HlPqNqN0bts9jYvDw9iW+\nszYoO0RrwyAQ8ICILtjPerKYLIG/Pf+ivfykFXHlAlArxPIQzt4dm2VpobKK\nsaAFrMDzgNR3Eg6FzFdkm6LA6XtsGsZ8BjBKr4yvu5Y/byBh2r+Ee6up3YHs\nH1rxdPzwf3uxIknTIgHN9T8g7bPF+HhebZh1sajMGXIV0b+OWV4Ivph9ywNt\nKbB5pBTtzzJsFQK4ZSUQWTi91wm4Tf4wQOURS42EkehbCFbKEKhVK0XMbsGp\nQazzvoJjjkYzefDitrTAzRoqrFhkuBSgp7uAhSiG7340/QrR/dXCly7bT4v/\nx/sN\r\n=9Idg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-2_1524361994839_0.7929204596664075","host":"s3://npm-registry-packages"}},"1.0.42-3":{"name":"gatsby-image","version":"1.0.42-3","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-3","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"3f48d5d050a58ba2187d65bc3eb76b81f68b1206","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-3.tgz","fileCount":7,"integrity":"sha512-rjXpNaGWHixx4Im7uc3jcvQlyPFLuFc0+Mf9t+GaD5pO9KrF6jnAl+dgyeTdibvfMc+Aeztyt1BB1xYN63oXAA==","signatures":[{"sig":"MEUCIQD1NGW+ALvWPn1dDH/+0ukWLJZcWczs6vIZr8mHEfEDeQIgD3+TV1W239vPUZZLDO7w0rzRMBEH7i9ngI7nzfQsAgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4KvFCRA9TVsSAnZWagAA5DMP/1kjUPiNQNnOfVROfNpm\npM7s/XFywzXykeCV+mQfIPlU2fi/SILDK4STlSdEU+U31Uxs++d3tDmcT8V/\nbyy+I0fagioZ9khheQC2P+ylKNHdp1/aQ2D2OrMJW6k50O8cstd2NoIYtixW\n1uAdLTEy6L8zE+UkUIcpj4lxX/3ScII9CNQ/B37e5sRPPi3YHxGFCTJ8MAWd\nLaMkEK9pRjjiO9wxBipet/Hpl+0IV9aveUN5lbigMd6um0UORYRvSvAyDGzt\nQPp/naud4kESwpZGLJs7RhNvlG6EDrZxtUWQ4CLZtJY7pSy7rQCLrZW06z7U\nQgyxuk/LVonUWqQRVNUhc2tQ/nKM5IMGZA25drd0yTukLN2/2OKEe5z8V1GC\njSiTy7nTMWMD2nXeS/PrVv1lF+9aJPQxwk4FX58s9a79bSA8irCbFsMbcex9\nrVZ/gTNwsOj6RIJ7Ey8bH1Amp6ZRNHzvQvF93Ux1/w+TKi3BxmbhA8L5tjZg\nW67s+0wa9LQH0RDYg8HhRuIbblIAYQx7PoTQZq3M9BbnLK2erab/p9LqRoUf\nEDtwMwfOuTB6C+Z+9kerFoNk0M5XjksPy+/vNJhb8OTNyjZh7VCsSGl65yKe\ncyqBO6VMNiHQQ16WvrZJpSaj6+d0RFzEioeDw5H1TmnX2Eh+x0WCv8Hj9QXl\nXSR7\r\n=Kj3f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\";\nimport Img from \"gatsby-image\";\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-3_1524673476161_0.5204975244673111","host":"s3://npm-registry-packages"}},"1.0.42-4":{"name":"gatsby-image","version":"1.0.42-4","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-4","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"b72019706c9d82cdeaf2cdcd71dd351a0aa11ea6","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-4.tgz","fileCount":7,"integrity":"sha512-8F0klyngLdXBEpgN++Q5/YCgrJXVJujZbcZBW2Ggb9pCkW9fbkqACNzobGZMAR/ysxhEnA+VX/ib1utHQA2hhQ==","signatures":[{"sig":"MEYCIQD2gyO1kbH3j9vHbGLtGyM+pSqQlpqQmBM2Y/lpcD1u1wIhAIWBCnqDWNp/zln94ZpBuzWGvrfqlnAjZVKP2KGxpZen","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4hgECRA9TVsSAnZWagAAtroP/jQDWWDtaZ6l1bQopqS/\nhOMG8frD+GJ+HUOMtIH1+i1E7BRWiv1ju2MzNf+H1VOqIMNZjJhi3s89wbTK\nF9gjQFmmJXeCfyf/9vIq2OvhdkO94NXV+1Y0n/eTVYC7Yfvti+hVzMRK6a8P\nKTa35dBxfx2XsBNWWXFiWukgUbvYFYKhWkCP0g0aKwhBz488jBOxWeXaDyHm\n4jMC8J8hJoYfcKqII7BEu4xqcJ8gMloqs/8e4RxFp12ElfduoFFaoc42ilER\nXXJs5YQLs2jFLSSQlJ9Vts7ip1eG0PWwjK77FKhk6hDqN5/A+e/wdxBg6NAg\n/B89hAWV6UliOFxLrekp2v0sMrZE4+vpYav8+6aKWXtARU/NrkK+PExTlIhC\nD3vWgO7yx/dNkYcLIeww5DaZeJLFzDz/6d6hq7LN8IEfXpPuGywTk+M14qne\ncJhqPEyL2gFVZwTUm57/85nKHwqR1Lma3Q7+Ren1V7o8v9/TX+JwNh3V0EAX\nj+n1/YW9RMDc1qAiTtM3Mt3qXdd6MGMI0UHNRvRZ4G8ptIhmUQwPOpQXJy57\nKPMFJRbBfW1YrjA+UAblr7Aw/E75CVxm+B/BEZBAMs6parJ7+pAVaqFKklQ5\n9CUUpMv/u2UuaqvlyzQlIw22PyzY74bkCDRPlCYxfJRt4MtpyU2JjIjARCXc\nNZXa\r\n=5usi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0-beta.42","@babel/core":"^7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-4_1524766724087_0.25288196982192","host":"s3://npm-registry-packages"}},"1.0.48":{"name":"gatsby-image","version":"1.0.48","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.48","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"58e62f8fabe8fbe870c5b1c5e1b493a5b7395667","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.48.tgz","fileCount":15,"integrity":"sha512-WTUs81U0IsJYhWNQwBD37++WKZx+54Q0PVB5G99pJODCislTT/M8dAafCIrFgYgAHgW8xDeNI+ZYPa15lsu0zA==","signatures":[{"sig":"MEUCIQDodbcO3ISPpA9OsyVQGB00iLeGuljDYbqadved3Y2RggIgUG0JNoMijj/z1yqYhzo5nsp1P8hy/jRKy1JH/MNb9gA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa46B9CRA9TVsSAnZWagAAkR4P/08jG7l/hvPvP2DWKoXA\nm3vJPArH02/qL5zTVT0+DfQa4TcriGVWG9hGZnRrz6puZrrj0bsTjQOYnOm5\neYj5MDzVyzm0/kUIXMm+zXwXU9DVeG5DOWgjQOOwRTf4gtPN5epkQIGr1Zd3\nxrjGeehbiTczxt/Jt/557cRDqOmfi0gZc8KWItZF9I93sXk3djjH4WnS+O5p\nVodH/eU3qyqW8O77fIJpcwfE6HXSFT+dE2U8Va3HZISpW3ncKToGPGqAmrdK\nucrrQSpiTf5XWsA3vaLIDR2Ver6+sVYhqhvpgt04aN1+ziZkmDZw7+c3oZP9\ngB7m5qk2D4UiPIxDEcdJrdSkekOKibYtzfrfaHlDSA0O//PyVLzRJOxA9DAR\nfgYYYGWgHuBL0W0SpZSjNK1c6t/J3i3rKwn0SLuqURUofpep4EyYV30uuwFe\nbdNDR/nrzqZJXoo04BWxwwhFxzy6dsnM/A34/FOXulzSjoPt5RW3h5jZ0Bsf\nqhKop+Ss/0oZiekzD/03bcr3Mx5DrRwHhr+Zd1ebXwvvi6YhLqWlbToMZvzu\nk7QM42x0pRUZmoCtYvE/6mpOiYBS3WBKYj3HDdsXxT8XAmXBZTnkpADr2izY\nBalTc7RGP2+5e4XcNy34sB9nAJD50JXR+aGjiEOb8aonTjwn1L0aXlD7HhZB\ne/rh\r\n=E41Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.48_1524867195663_0.022881798460884673","host":"s3://npm-registry-packages"}},"1.0.51":{"name":"gatsby-image","version":"1.0.51","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.51","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"956cefcf7704b6bfacdab9b59a5d6b76d178ab24","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.51.tgz","fileCount":15,"integrity":"sha512-HbAQnqKzey6dYZLViXGWjfTqa/8MYatqvH+28IUVo+KFANo0rei8pS2P06HS/l/s1uaivzQxnjXInKWKy5l9XQ==","signatures":[{"sig":"MEYCIQCjoRHFzpJoXDGfqL4yGktEWpkQk6aADS47yjlr3SMSowIhAKBaD0xL5zfEHry1Wiuuhzs7OoZk4GzdQdTugw+2Es91","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa66cQCRA9TVsSAnZWagAANcEP/1Nwx/Kgja1xffoh3O4p\neDZZpW5jXIHWv/VLdcT0D6V+qiqKykWCAkJhYq/hK7B/JFnA47SghTXFjsFD\nQFd8BwAsVRpgyRxSGeaP19z7GQciAKbfGvTU6IzDsOCOEomDdp/HZSrd6O8y\n+1YWxzVvXQqxsnbvtIk/t7Ag/42vpaTI47FARlrjbmskcfjwHtcpSOgA5nRp\ngpVhHqP88U1DpsHVjKLhSKsuL+nrsAlbrSFzt1BsYyZvPqLj3+GJcGLKm5pP\ndWsISzdv1wYG/XmkJyNEkCAeb61GKPkALpJkhU6qAACmkvYCWhMGU/rXWErD\no7xeNYUgPJsL1DafJJm6mTaZlWuH4Qj7yIkFJI+j3dHFXs/2MPV8iqqxKvaR\niEBCO9X6ATNwgVDJj+DwqcdQYW9TTE3jSTtkSW5rspQMZ8OaSwTlcHOgqFyb\nAzX/i3Vc70kXmmawRpIczpDYsOgi7MhpP9VXg46kNuJ3ilsi+L39/Mk4E57s\nfMggsN6c6UqNmeWgIkO2QDOh4ufvD9tdls92WJpFKGuW6uiBFxDKK7AliB2J\nV/IoMMT5j3KNRKUtZENP1kI7sG0ePidWDwhRTUeouawLwJHd4Yj3w1O3JU6A\n82bMnkiSngPclx3K5TZtzQExQDkZuGQixNDlxlIunU0SnkveMOy84Vwr4l1V\nhOmn\r\n=8Mp3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.51_1525393167098_0.6404878191945698","host":"s3://npm-registry-packages"}},"1.0.42-5":{"name":"gatsby-image","version":"1.0.42-5","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-5","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"2f740d95cddddff8c30eb765c7ecb80d3e87a5d1","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-5.tgz","fileCount":7,"integrity":"sha512-pxQ9C7/UZ+7eAJNMSs4mBqNq24Q9Fgxjxd9PsjKNqL39r4st+OgQMb61CzMO5fkqoZWlqENO+nLc6DoNx/s+1Q==","signatures":[{"sig":"MEQCICQmUHxMyEK/URdKKjsuFUiwjoiV5EL5TiglrL0QL5uUAiAB32JcRWPs9Vuuy6IU5ICi8aGQLyISMSuQUSgZyiz00A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9g5cCRA9TVsSAnZWagAA8okP/R6+gQwj1cRwDfN3RLIi\nx8fh14TjihOh74n2MDE767qs9zKrspch7KlKT10QaSdLG9YKYc/g5joU2cob\nJvuknMNi/u2gipR6/fC9EEspdyujDibLYesqiu56BOJqDqTQl4a0OFpOzgoQ\nOZ2OJTNIdkC898bqSoqnDt09Tdn+j9VuJUmyEdIgYGCMC/Q7uIxXLbIohnxX\nXLuDTzZGichdeQW/QMm6o+0YevNBsO1jKvxnXR1IFcHYRYDDyomqFbPndBNt\natSRe/HRPhwlFLAjx7Y4Y4acv7QXP6RkarVphWqVlbKb+Sn0D5qrZGwD9Hmj\nhyvQCCDC3v3iNc1GcV6XTvCcQeEfJY2U9z/2vRnU7po1ZqrFR0qLxsddQBqx\nkMI7+PjC5bRn6FdorxVkjqu59A68vCl7JedTZbnWCPG2laS36YWlAb9ADYaj\noVb1WIGbKt3ldd8URub4P94XP2A6qTE/T6mtt8jEb0XHGCgPjxF+F48X2SkO\n6OEASztiew9r1UnuO8rJBThXAy/PNcVkg6amnUlsO1G8zS2DeOEYXnabKQ6r\nBtegNDvDXaDULcA7mSOFQ+nCs6BLOnCKYfOE701xAIQcJSWsTVWcvpSM1ibi\na0ysl06RL2lycuDKodLUvX+sbuIvc6Jfr6kFXA4Vols6PJId5xMkr5c8LI5F\nccmx\r\n=53py\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.42"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.42","@babel/core":"7.0.0-beta.42"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-5_1526074971193_0.36473694895975983","host":"s3://npm-registry-packages"}},"1.0.42-6":{"name":"gatsby-image","version":"1.0.42-6","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-6","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"419862aeabf86a5d4038a56e33106d6c0fc69dc7","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-6.tgz","fileCount":7,"integrity":"sha512-Ckl6ImpQP2ASFMdphx2LPuBh/Ym3GImAAC1VwxYrZITQD4zYx0jMEjzkrTi9S2VfP82uXbQybLm9bjCAtysDBA==","signatures":[{"sig":"MEYCIQCyaYoOoENxILEZFu8Q0Rb1i7q/kgD1IpqxKZkeYFG1WQIhAPnzwuvdtSLXrK3iqoAH9bzaJEyTNoGSi5CmPh+A2B+e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+yY6CRA9TVsSAnZWagAAV+AP/36dqsLW922g5wTjEf0G\nFvLAprd2aumkzR8a5Dk5OjPoPVpIT0mqZK4K4KGyswzTjLFEQXmE8ZEA9Akr\ngg6jcJEqkMYvdkvdOb2V0M2ETbtehVuvxg271TM+X8QMBNveMPCTNoEvffRa\nLhr9t3/UblWq4aldfwbIuyTULUUDH7SOXm+5whsqRiJUnRfOiHK8dcDkzDLD\n/4QqnYvvzLG3Dn+DqoH9bQW4QSKbagY3jbT3QuyqcLsF1NLiqCWx3EB6d/bp\nZGLjVTIdzg8glFIpFNVkhrhr2+8noxiGWnLZllO8KNHO5mCPTpvoCWS42mSr\n2dvZhRbG8GYVcqHVQiBZJkAAXaezCGcnFQ6Cu6dazi/wp0QD08aFMB6rqdWM\n2d7PQhnva7t3/Zw4KbYMEFt+VcY6RRA+aCxsRjwMkM3nd7Sw1t98fraUH44o\nyTkMqpugIXr1bpXqjw8tErwHV+yrXW7XAw2lCRamI7+nRAQtaWtlTyOFUB0f\n2lAK+5mOESbW25cUkgRhmJuqHa58YMZpLZXnNLCv0p0xK1c11hLHmrIXyNgq\nTtqi/aO5Z/y3iXVvICgSwC5tAyHxr57ctCy/dNgHJ7boLexhm98nFrfvsWrS\nObJbxlNGnfJWuj9MjLb32LSul8XX+C43ARsJc53qygWfWprX/77F5z/mnhkB\nAR6u\r\n=CNr6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-6_1526408761280_0.6709640209543604","host":"s3://npm-registry-packages"}},"1.0.42-7":{"name":"gatsby-image","version":"1.0.42-7","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-7","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"10d838369f8d4a3999071ebbf965828876cad531","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-7.tgz","fileCount":7,"integrity":"sha512-xAWnLJYVjDEUcaQNNvCIMsDMcMUl2cz1UC7LG/SfH1tUp7UkzG4aYhqrl6SeiKosMedbG0mfuyx/Hs7BIXtPaA==","signatures":[{"sig":"MEUCIQDYyxsg0TX9H0iW1gAdyHs4APJ/JI6BDVxuutBJVrx6ngIgI3Pislk7N3JKI4vfkMvCoDokpyuSFaH01VRnHsWys28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+zqfCRA9TVsSAnZWagAAxhEP/jl7m58DIm6esdl1tej9\nguiJHhPxS0BGKxOe/0bUF1q+7GTEBc+yhqi4K7t4E8aF195Uc+71dwronime\ndOspKPY500Th4eyeOgeStiPH1If4KPooFZGVP6iY9GVOiELap8Kmc+mPYlwK\ntCl/zYVpvolZEWbLBeZ4IPDfqArEqHEAI2X6EG7vSfEGtEG6FL8uXUv5hLtx\nmYO5fPdjKVafIqcOeNpbYd0AakW4sh3MQytHfpyaEAMK7Y6pW4IjPUSh6l4Z\nNBpTuT8VETBkRtoJNfCzz3KiQY5PyqNF2oZj1YsudJ+nk2e/OBJG70rxtTyf\nFUuGkW8Tk2hhFd75mOs1SYiLU2XlJoc/lfIuhR4GT77PwAb6wS5thoWwtYqY\nRD8fpL+Bn0q9g7NzWlMYkEWH3K/qGLMdnny7tO1soiOdFnVTBGV/ASj1UW4M\nqTXNYfSBcAth4qLiv1ZJ/0ohgWz6zs5XgWdWi3qSB461ZpPCIVcxjw2G/40K\n0HpPx6quvgLCEaXug3UQ/XNwIzKRIy+XIj5geJB0wshp5ftmMC1JKACIPv1S\n5D5VYnFiph1n6VegDjjCkCnaQajZgS3IRy3L/voV3riUnIZyBfd+idUycoe2\nrG0+PJCf9UM+BUxh7IX1K8dSUn97WVf8LXR0KmYbXeu8HsNIN/uUu9JgY01F\nIoo7\r\n=jk70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-7_1526413983023_0.30002324536769454","host":"s3://npm-registry-packages"}},"1.0.42-8":{"name":"gatsby-image","version":"1.0.42-8","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-8","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"fee78b87774d8d1dd497f64cbe96d67085ab62f9","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-8.tgz","fileCount":7,"integrity":"sha512-7RP+Lc+6ZYL3heDU3XaSRUecsG6x5pv9hAPCW/1L04eJS74O+yt/uj8Gjq6PVXE9qvhOaHnRqv7pSJ3Rp1YlvA==","signatures":[{"sig":"MEYCIQCpIXgx8WFi8qtw6Bz/PEpIrUE82b3QnLVO3GU8oqDXYwIhALsO/o78ppwYOoXEnYMuVEFQEH1G1Xf9iTM48HJ01RLL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/vKfCRA9TVsSAnZWagAAwK8QAIX2hR6wnGwP9m33fFVn\nUkxNg2z1C0n52+VMbKuPDeqhBANW9WxMXWl0ix2x3QndTHIPlhrJMcCvr4tK\n21hDteLxEVWXEZnr8AEsx+GNsy3/xrZSRgdpKOxsZrSfrbmBkwzd5S3ZGOq9\nw6RXPtkmCKIaK8L0LJpxdGxOAaiiZwfE2WfTh+8RIYEgOUMoF/ZYqUghQyjv\n4O6xAbQWyNlUdegUmrF91JrK3v4KKJeIG5nPH7mKK2sWyAw2BdhsKWUmN/vT\n8UWxzE0HQgFGWyx39JAleCrnQKXAcEA4x9fR8SUQI6oHJDE+XIm4EaGVlxLk\nrfenaPHTnQi/GFmM/fZo2+0G/UzBPe7LLr2Scih/r4GzG1JP3iPbncqV1zR9\n5uXc8Ym8YeGCUweVKclxTjTnwW+VJ+Rk2N4DTvpC1DogeVcv884hWIacwRx0\nGO1jax17oeqOYJu7LBLM2so/8uCcKmQQYwcFhbjtLTNyOmm9GNU9SJgfi96K\nPtOIJndkHzZH+kivhOH3o6yVkcqGo1fUhMZasyjsuPKvw9TjhaCD8eDJHOHP\nrOm8c6HbBhaZJdYXtBJfeQZ9EKdSyYJoc6sWLWRwqoyryD8pp7Pr1dQxG8dg\n7b23zYjycclSE7x82H57cku1HMHQ4Imb8kzQ/LEpdNDS5n+JkLVv22GpglGH\nTxp3\r\n=HeKO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n resolutions(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpResolutions\n }\n }\n}\n```\n\n## \"Sizes\" queries\n\n### Component\n\nPass in the data returned from the `sizes` object in your query via the `sizes`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n sizes(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpSizes_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `resolutions` | `object` | Data returned from the `resolutions` query |\n| `sizes` | `object` | Data returned from the `sizes` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `resolutions` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-8_1526657695188_0.08004471356662868","host":"s3://npm-registry-packages"}},"1.0.42-9":{"name":"gatsby-image","version":"1.0.42-9","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.42-9","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"9ea24d99734e6292381285a0662ac2cf66cf3835","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.42-9.tgz","fileCount":7,"integrity":"sha512-DMqMfo+q0PtjJ/ruuWoItFmoaKWPSYucdXQCyl0JUk1cP20vjL9xlMON+trutQLwZY2ICbxMPGlYXa594ODCxg==","signatures":[{"sig":"MEUCICmbTDoZVJrYMC5UodUl/07naGeYxJZ4tGDsqwvv7Hr8AiEA1gctx48Ae/IY0RzP/52uYW/gNgrkZz/6DVO+jl7CxeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbD/SCCRA9TVsSAnZWagAA26AQAJ3J3SVz3rhZdr4e2wB9\nN9VIC2UX7NeapVlyLYybmN/SJPUqoBwQDpvMe60nPwT6rSvxcPpS4AyEAvgV\ny1kne4A/8Q+/Vnqayc/DZ2GWn66SmzS/v4WGB0eS7TsI4M4hs1FD+Hoc2nVr\nqBYF30nlNUJr73Sre6wiW4/yjRlrWLnS3jDaazPc2Oin+eZf7Tp/s8JJmiZH\nyYyQI/2O4y4lPe4uXPYLwXy7UPNAPD1AL5EQ+2JUPCSUS8uJ6A8khN1Omwua\n9AX6WrnJajo4bLP0yO/yrl1Lvd36OvhviHM4l2ZU4GlG5ct+uPMy3EiKW+5G\noXFLCyV/euTJHHsKpq0BlOWOCPTe8ZAGiUOJGK85SG+E3X8zbV8eDIMDbDsS\nKmZXQARUIqKYF+ZT7yluMgU1xMfW/SVMfM2kbYcrNFKTCT5qmI0rMXekmQIH\na3kb1QWp8f7q7Wt44iztIk7TieSYmh41n5MCxbpE9fFsv3w8PUkaFeZv6z8Y\n9C66KLvzWP9KkDsmHB94A+xs5LSqkt78W1doEWbMwGDCYBG93/ny52oKPRWR\n3pnymS8r3eak2J/drnRRXbdM37cN+qzmh17eLxn8nBxFY6tBbhUxtLpojGxg\n63BZMlKD0W7FSodzfRnvbW/thYTmiTUbZBwX7/h+/htHpSUZJFncvsebaq4C\nw8Pw\r\n=U9Nl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.42-9_1527772289813_0.05009567139592219","host":"s3://npm-registry-packages"}},"2.0.0-alpha.2":{"name":"gatsby-image","version":"2.0.0-alpha.2","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.2","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"66e4f2802da372ae800d460a024ef3dfeea5d80e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.2.tgz","fileCount":7,"integrity":"sha512-hk7v1efNTt3UySa5oPo9L1dSvtjvxjyS21s9mNlrfJzFtLlbDRVQMj7ZWC/xd2rBfyYzxfa7sMG0PNH+/O+vMw==","signatures":[{"sig":"MEQCIHq2cQoB7D2SRph4fZZDPjSK7XOvcnZDOzVZGbfHBNJIAiBDyoTpMXLKVMhDN8vHEASs2rIrujvaqj/82qEmpkeSFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEACWCRA9TVsSAnZWagAAyaQP/2xD/Dr1E1wmJa397D0X\nS0kcwsCBlfY49BEQG19Eia+dDpwVlp9Gex0JcVLr6pGJ4sTz+km3le8YZRZd\nJIpVV1QIqcIdOLjF9D6A95/0kvxWYItIJH8+K87iY+3Qi267x1t5GQkQCH0U\nqHO/aRhVGasFeQT2bmzdF+4RUlERurPyNxpJiCe87ttZ4/hfJOTUjbF2VSlo\nuCxk7WQnaiR6SO6GRB5OhKnx/vjWYlDymQbcoxmr3l0+PYrMMp5CcGwJ0nel\n+n8qRq4t8eFiGF90v3WvxqcFDqZFESQ5KROEYUW6k7oOICsZM+IvmCLPfKQI\nMQQZEK5Bd08z2RXLYZVGXdjYhvplMHrNdVHO5CkahN66MIoN/svhWE6dhv8N\nYrJ4UF1BQz6V1UxjsREWck5m+k1cI8yhRcnJnw2qAbH5j1acVXjRemDJFNEg\nEgC/5+O9BfzU5uvZPCdPjFD7nSZDhZEcsq92RM0HXGkN9YHSCq1ARlbwzikC\n954rJIaN2kDCslxWaCKWiEiojUixfePcSMy5ELt0wZIb8jbLa/YYotBEpP/B\nJvp0I91O7zp62mKqBVYMgcyJ1n6M2hAZyJxZS8Ld6qTAkbpw7k0qsnK41h9L\nAwTh4bPucqCEB2SyjXNNAlLxbSP8I5E1009zg0Qx3rYSlP02p4ILH5mYxFJS\nUwub\r\n=BVo1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.49"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.49","@babel/core":"7.0.0-beta.49"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.2_1527775381826_0.131117481408616","host":"s3://npm-registry-packages"}},"2.0.0-alpha.3":{"name":"gatsby-image","version":"2.0.0-alpha.3","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.3","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"f2df21eb51c0d2107bc29c0d97bdd6bb783af97b","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.3.tgz","fileCount":8,"integrity":"sha512-lIGEdoFfNMAWj4so+PKcEP4oaCu/XDm3iqiS6I3Vo7fle1Y+/ErkKxyTY1mvifalSKN3Cwz2ytmH0T+M8fnpFA==","signatures":[{"sig":"MEUCIAC2hudWa6lrhbPerwVWqXMs5oBDF7ad/v6qw6zL8EgDAiEApurvXq+dqyfMyJpFSlaTrhjMNGeBYvabQnabFil7dAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbECrzCRA9TVsSAnZWagAAbuwQAJxxKu3mhg+vSqJm6fkP\n6xblX0rP4wftqk3CmsJuuDyrMvJy5C1WVQx0pvVmp2hVyZOLIprC8y92B/sl\n+FlgJtWIuaulSy75nS1o2b18VInoLcIqh36ktyIth7A8B5Bgsrk4ssIG4WLm\n+MkeQFbGSBit3Y3/acqFGxELrMquZn4XibvI+JSvflyUi2D9DL/GTKQcUnAE\n1FDqOWAn+hIIcqSGLNhG1jCDZIJPLI0L4D2+brzgsdZq782AZJEZ3bJMamn2\nPE6f6rx1+VbowuPRAaMbOli55KMlMJki4mJ9ws4ixdSg4/+xLCwZeJx8urPA\ntV4BnfIjJyNkx0WyOv8jrCuLKrmi53aCTDrOdiX7POK/adRKkplfYxjVt0cO\nwQeHy8Wm6wNNUwKg9+1rcCDstifCq90ns59SSQ3va0cBo8bUP+cCenOKgeBi\n5fj2nVCR+pLFg4/OJCBgtp26gaRndqSCBJshHUEwx/kHQyPGGgVWCn+QiGjM\nyzrXtHxjoobJ2WX42WSADVqOwtJEFOqgF6BdM50+7DTR76pO5VU7iURbgPEb\nIXEfkOuE9eEw6JF6iO7AHZOq28W+AXjdqPtQhkbjixRr/YzucVV2EPo/PIGa\nC6Cy9GjLfWZw1j1AkILkv2JQ4Z1eveVWpOy6aVF9HL+1wSCd/DeYkoJCKKWt\nQb8I\r\n=+Jwl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.3_1527786225570_0.6708117215855198","host":"s3://npm-registry-packages"}},"2.0.0-alpha.4":{"name":"gatsby-image","version":"2.0.0-alpha.4","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.4","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"60696f3393268c6e7cf77140b7663de6cdbd492d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.4.tgz","fileCount":8,"integrity":"sha512-HYMcWPlo3cOmwev6ceMQRRhz8AG7nAi8vhjbzY9XEkWZQK+p6iwrcd6aOSxTqiGbVMGeN7u3FxVDCnFCwJ/VRw==","signatures":[{"sig":"MEQCICxNFsPznZJYGlufuq6dl5d7e1W0TLtFPvpnn+mCBS8GAiA/G7l0HkCGI7yTDVsiSWpxX5YzMsePsnK1dnlPr9kCHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFfKgCRA9TVsSAnZWagAAfwUP/3bo+8YpGGFbT0N9jCMB\nxpQi8+CKxk4dzNX6f70rE0mEgEFgunf0J05JbgQR4PoEmy/msd8YnqfLICrO\nfgXhHTIEMS6p9FVOhEeHEcdDow6Z+XTp465S6Ehuh0sGuQY/Ovm08MFGLoYY\nezhKuqWPIgomaaLqp05YF3LkFFXRAPSoQmeqt/L++Q8605AZmOeFa+C1+oIC\nHK2+by+j0MaYr/X5naz8DVFHDPT7GGb5AB4AWpMECV50Y4oIPmyYx2RpU3Eq\nJvyPDxnAh+4Dqf+UrdXx57FykrHFn24hIZO8gAPaKdFKaie3+GfGdwl5aOP7\neSAf1rv7RsDf0cfk5CgpehRe3UJuXv4c+n6jYMtdYUEUShnchdKW0wN5+D7u\nfyFXcQhrd7Z++YqQDTrO0xOhE0WsN1keg7FGT5jnZxjMWRBkpmNzw/Hv94+f\nsDHhS44cmmPzEmgpWvMPo0rOhBLO5Q2KANNCNIfOvl/r1UPW4cW9WXvACBeH\nbeaVP4FMj8B823Ln2CeopqOXNM7lAHEhgg7Q1l/SShPQ09dwfjjdOVDG02Lw\nt+83yRpxXXLLSuabZYcTgWbUrj9R+ujttlZpviH1wBAORpyPq6I2zhPYMi8n\nics1HoWHJsY+Ev7AZ+/ZqNr2LwdQ4HYMgugjvCdcwqs+owJWje6+CxSqagqC\ny6px\r\n=rWMh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.4_1528165023653_0.13168142445385933","host":"s3://npm-registry-packages"}},"2.0.0-alpha.5":{"name":"gatsby-image","version":"2.0.0-alpha.5","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.5","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"28a11e19e6d19b7fbd849de3c8a9f5ef73a11784","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.5.tgz","fileCount":8,"integrity":"sha512-L2bgCpU6f+WqJ+xaxssOrf3ErggdrxPW2U8UsbvK8FeKqJbuCEZif0aFl6r9f+oQjkwQ/MobLUiLmWEyKFFt2Q==","signatures":[{"sig":"MEQCIC9dW9D0WeqGEoWrSE7rytFHpKqT9kvNBPJ+NACZMKVbAiBMce4JlA0ygYQXX3B6ZVckoPGWu4jyRM44yVCUJU90xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFxRUCRA9TVsSAnZWagAAJ84P/1jSkVK1oG9qNx13IbTG\nntut9bN2K5D/Ekc2jnVkIy6rN2ZrRY09EAoBjbcltR/F3Lk6pIdCmgibdr+5\nCmgzUb/4NVaAW0IEcFdXpPQTXHqj/h7JUfhLFLZoS4akIMB8ROwlwmjHGElp\nAw7m1C+KvxiXXXFEJJDG95EPBg1FeLkbw35KHkMFZJrdeMMU25KZjyK2TyY6\nBDCkv93FYyBgEs+ucAEBMLPV0prxHlGn7z+UGuQwP5uZFK5JtnPXKMBKZhF0\nMGA2gIimEZv44PAA+xz7PKsGxIcLRW4DWXim0y9LrUC3ro/olvJ84VNwiUkj\nXq6d72CH/6uJLdPtOUPcKSWLCblunJlq6Flq+vIFvswtlrSbM0T4+BUvm+1i\nlMaVKq0BrPTc1B6+YyOlw8ZhrBXG3PipQIofg6O52WnCRr45Stp7FtiWijzd\n6NhteEq8m6mmP6jz6yEBy86XqR0G1NwT2AnjOv0s0deQaQONeCKBE/VkHfGf\na/BpQ9dSmN8+2lwLOYsWuiH7iKkPouGqq+b3SKiziKXlWCRgcv/EzOyGAjW7\nESXsCSyhDTDdcT8ZGXqsDYM8NEbWkyjMNEiGVjGsz4wpZEMvuDoNPEUaKs6D\nA7/T3nXtmdYXwSqnYrf/2upt/NAXmwEExIGhF0tq72E6ZzYKfA0nMXENsHr/\nZFAn\r\n=+0Jv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.5_1528239188256_0.9300780069612271","host":"s3://npm-registry-packages"}},"1.0.52":{"name":"gatsby-image","version":"1.0.52","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.52","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"f4fd8ba3a3c3d3b369bc7ed3383a37fec5a514ae","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.52.tgz","fileCount":15,"integrity":"sha512-wSysgEUNgkNGgRqyd5PNfXBXW6QXkrwCvHONnRkVYl+41w0JZ5cJUEbAC0+rb/5uRIazRblrsZqlQVsS+s0pFQ==","signatures":[{"sig":"MEQCIB1mCOwCw2OItYATThLatx5InEiSmswmXSzsMpFVTVHUAiBSmNscftkofERUvdHpcSt9YSCRNRYX3I3FxfcnvU69ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGF3PCRA9TVsSAnZWagAA5RgP/1LzjHlqkTCWiFXrJIBZ\nzsfelWogwLtds1GECDmmQQvybTyxw5mi8Yyz7QF9lfrjLJqGUsRwIYe61uTg\nFCjYzoJmirCf3HNLEitJqNil3DqOD1wJLeugmLi1eYLlT3d9SFS6C6W1dDLz\nZYVjseI01VBrnjTQp4UST+c0fHMTOPD4kDHQF1JNNn8KPpUyaYsUkNmHyFh3\n0SbIARXdzuk3+2b2WWcyzFHCSvQ4PplK7shODO7jyIBNpWr6dcltTjLRxwjB\n+CFs97OAVmQ53SpigVQekrHpFCaUuD7QEQpxsrSGcNfA8fuCtxcY5fegUjO6\n0xmMYd3X4QA719Q+ig/a0GA4lFQBqoTULBm9oR1KQnTDpRRyeAkZ5YIaAuAl\nFTk0iyfgAA4+EFnEzJO8wC3uIPlL+dXl25xTcN84gXl0cXdCZZf6hPssbw1u\nnVbkz+gknJQkT2sFjVaLkQwk3OIQOaqeWqjrglxOuRvX49xaZttnUny+3F3N\nb3fZHfW3gOP28XLscMMimVntXekeqIgHAfRCB4dSaSFJK/CZ4SqZ9y3rDbRV\nkc4oQU9lLeSAYZlM29cXoRPSq9fGJGhlo7lVMqolXkMdUYSeG6BSYsP3wu27\nUXcdb+IgAITi2srTrExkBQCgUUhTgc7WWEnb3+RvXmBB4Ll0Z/bYjxavHWzJ\n+0qL\r\n=GNBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.52_1528323533554_0.4957406336076111","host":"s3://npm-registry-packages"}},"2.0.0-alpha.6":{"name":"gatsby-image","version":"2.0.0-alpha.6","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.6","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"32badf29932595274829de6739fb83b0521842e2","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.6.tgz","fileCount":7,"integrity":"sha512-T9AWJ1fiUpGZ1IUzhcl7B1dJZqvjxX2jyg++vczQSvBlhlJJshyU1YiHYk9DBCSogTt4U+//7JFjCPPuVJVtNw==","signatures":[{"sig":"MEUCIQD+1Mpi5QCpXdl5pFrYI8NGMYKbZJ9VxTly6wAdGXbGzwIgZ7wPNANJ27rYOq97p6Mhkst2iwzBXrRy9RhPvRqe/Zo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHpNbCRA9TVsSAnZWagAA5swQAI0jMHBm/bIF+hg68B63\nljCLtc3oSRTyLiXC5IQ1yNWoakIdeM2Ir9YfJn6pJCOdp8qr4RW1hEhmnqVR\ngpXRkfVFIXRv2Gloal1HHSpSB45UrqfCB4YgbB8loJsFOlGLvmmpSwG0gm+X\n7cNAeoLqMSklwn5JX1PHktGAMb+vDo/eqhiV9tuZ9Qzo+E9+Wc/Jt3VFYsg1\nTcRmBkaEdO+eyM0X+8egu/OxX8rxVnwH/WRMyycFtkL/0ezXyiSWZEQTu+ke\nTpAeGqdwBRY/hFdxyZje1BfEEo03gY6sn2aQMGv588gzGJEH0oCMT53pAJo9\nNguj2gr826cae3lgo8ZJV/2q5479J5EmJMXzwkEuE3Zt1m4Xe7JV1d+WzIt4\nKEjfVoelKAWIyKng2gPXkI9HNjlLfCCcWkv2saXx8vqJjT8oejJka3TmiVt1\ncj9n1qdw8IZ+ET7kYKM4jt5XOZQ9kk/yvQebLMNkVMYFpwAUhRb1vhlXTdtU\nmWqCJM4Udl98irOhpiiyWdTECR6Q31+f1OW3mv4UCYxCq5d7xQqesUIzBCks\n/IS/LXg5gMIGPr2zrBJXiSdMcO7C1NO3ic/XXL5Or2idHpBdxKwsfhUudTcp\nIew+zL714ZoXoCiyLAbB0LbWkm5sLnNbPPAIEYyDc/DH8Mb10QS4Y4SLbDfn\nLddl\r\n=oFVR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.6_1528730450754_0.8365439344865973","host":"s3://npm-registry-packages"}},"2.0.0-alpha.7":{"name":"gatsby-image","version":"2.0.0-alpha.7","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.7","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"a45df4113c3d1ce708ef13f785e45fb312676972","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.7.tgz","fileCount":9,"integrity":"sha512-e6810a7IhR+DnttWc5ER/7HV7Fd2thNtNyzeqnIpqbAFR6tU4XtFmf1QVc/m5EcLk4EDn+j6L4ZyCiNmGzKuhA==","signatures":[{"sig":"MEYCIQCrxp3ri8UtO+WhoWXfWgjyX4vHr+ui3dUWslmDoy786wIhAO/VYqZUQRIGDOpm5RU1mOzHx1qbdZ1Gy7vqMPVHsRL2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":41083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHqkUCRA9TVsSAnZWagAAbZoP/jTQdWquKwJ0BfCL0JRh\n6SwewRBd4k17wjRDqPq0xyvL6AIdVm+Oo6ebPYlL6NO7LVWVpnRdfDmQkMLL\n4XCLgSMbckLUr75yh/4nN1mGI4x1y4m+Z2F1mMSGKhtjpafRotgW28cgXQ+A\nJAToCAnLXTwiTQJAHBxJ200C4Ntx4NwnwDCe6fxdOvEgAE9xDnE3OTh49SHc\n4wWbMUhnOe8+Gn1NPYunTV8k3jSTTSjeUt3a+n78auHoRTaaeIvPi+Hunku7\n+fQdmvGszmz5tA1Do8DD1/orDdw3MYP4KBiS8fFE7B+1HzEIEXVyeRMIS/xH\nrZx6WEkDUr3NUYkQae3vJkxlnzy4vcd3MGjJ/o/GiPcIaDv8yl0JGzwFspo5\nzH1gxTtrWX4FBDUMmLokFoXZXxte9wb6F+eeOX7+NA4mPUy7IXvZmLQdVoJa\ngR7a21g9L34ystz2coB8PMz/y2D9ZMOpBs0PpbcQPwWf9p7lqWK0olSymM3J\n0NuJpQSZOyyUhtI4rawaSCWz4JIGkenSk9Ev4KkGokts3x+VXG8FeVG4np+0\n1nX5yJgatgke7ITkr6AlBYMfgASpoDHaS9K35bstp01YoXm5JOqXZQtBORsu\nFZRgs8bwgMov5o9wX92Tgo8xSBbIjdBOypz4McG12HW8kKNs3DfpHfKB4KmA\nBiWF\r\n=DX6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.7_1528736019968_0.42937824437556404","host":"s3://npm-registry-packages"}},"1.0.53":{"name":"gatsby-image","version":"1.0.53","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.53","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"9bb74c48319e63b0af11b76a8f2178bf936138ce","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.53.tgz","fileCount":7,"integrity":"sha512-I6svKCacE3Skukv3XRL+bLSxnpegvcfWyI8AhvFGKvs+hW0eKUJ3eFR9ntvtVR/DcjjLL9M+YqazMv2WHSv4Xw==","signatures":[{"sig":"MEUCIFsRvZmt0ylI1QPTLWR79ugRJjaWbSWURCXhY5PpzV0OAiEAh0zxFkuSDKinipR9AjIbmtGDtpwmK6WONIc3MSowwgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27716},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.53_1528967038839_0.6293785663642124","host":"s3://npm-registry-packages"}},"2.0.0-alpha.8":{"name":"gatsby-image","version":"2.0.0-alpha.8","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.8","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"7d52c587062d78040fab8ea6632d7e14429badca","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.8.tgz","fileCount":9,"integrity":"sha512-6KudCZWTGfvLok63RFAlxS++xSP2brwZSKugz3U9qbY+Wbdn3sltXbG+OqRTWdaAGvl7aVx2Ei88NxOBINR/cA==","signatures":[{"sig":"MEUCIQD5Vee+1Xn5faGuD9ercMEaqBi8zqL7UhpUnbA05BvrfgIgItOamaAehD7Xa1e+lrDRZAbn5apxRlY012zFvHtFklc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":41155},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.47"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.47","@babel/core":"7.0.0-beta.47"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.8_1528979971194_0.9090547663818762","host":"s3://npm-registry-packages"}},"2.0.0-alpha.8ac171a1":{"name":"gatsby-image","version":"2.0.0-alpha.8ac171a1","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.8ac171a1","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"7286fc3274cdb455389adb5df6b6ac9708ad8245","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.8ac171a1.tgz","fileCount":8,"integrity":"sha512-2wfId2i6Z1ZCdO7CZeMeSDXbQ08BvMsWLg0IUwF6kq6dFDLnrluy22g8I7LylObioJfbpgjMRcOZo8jNABvvPw==","signatures":[{"sig":"MEYCIQDdhP3ZSvI54sQJzCw/AJdUn+PBVSEKZ88/fGjlGUYGQAIhAIWfbvcWV6zR0iwtM4UxOTYtuByUnAiRb4IGhexkPWTe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28472},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.8ac171a1_1529177087916_0.9215303609591723","host":"s3://npm-registry-packages"}},"2.0.0-alpha.e328d33f":{"name":"gatsby-image","version":"2.0.0-alpha.e328d33f","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.e328d33f","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"5465ea78823a784c25f820727da759997d5c35d2","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.e328d33f.tgz","fileCount":8,"integrity":"sha512-OObstxjfxsvaczE341rtEQtgMJdbEL/vu8NrJtq9vc9MULye8/h3uUCDe+Jp2mOEhnB6B5BwE4O4Isfd7sK7Jg==","signatures":[{"sig":"MEQCIHCt6IprychQnz1E2a41FNU8j8Dzyi3FPEUfHPA8GvLFAiA0rCRRqSmod+It/rakx/VE59YOFUI7CHlU16tCMIRroQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28472},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.e328d33f_1529177529013_0.906677438596099","host":"s3://npm-registry-packages"}},"2.0.0-alpha.80a21f04":{"name":"gatsby-image","version":"2.0.0-alpha.80a21f04","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.80a21f04","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"5b304df658cd549bdf0887a87ebc08ce86eabf3e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.80a21f04.tgz","fileCount":8,"integrity":"sha512-bkp4AzrGauBDtq0NUovC6TncMrrVsqWApIDov9mMo8tmLV6cRwcAVhuNJR+jhBiMilpCUQwi7jMldCFPS3w6ug==","signatures":[{"sig":"MEUCIFgG7BxJqWn3Nkj63bpImV2dj7+l+6o7zuqCxGD84zsBAiEA4uZsjLCILheJP91K47aT6is7mU+CPLLez0wBRanQmLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28472},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n* Resize large images to the size needed by your design\n* Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n* Strip all unnecessary metadata and optimize JPEG and PNG compression\n* Efficiently lazy load images to speed initial page load and save bandwidth\n* Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n* Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n* If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.80a21f04_1529177788785_0.3094355140247049","host":"s3://npm-registry-packages"}},"2.0.0-alpha.9":{"name":"gatsby-image","version":"2.0.0-alpha.9","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-alpha.9","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"f2378c531fde366a46c059b3b2e7e59cf79012a8","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-alpha.9.tgz","fileCount":8,"integrity":"sha512-rSoYuu6YFS1GTOmKILtRqYWXVpDRMPhKnBDrW9N0NoSo+LEkdVP8Rl1DaADNe4IJZHH5T+LNkoqlcxUBiyw0TQ==","signatures":[{"sig":"MEQCIBBe0aWiw2vK3vVQHLN/ikBwAlKE1NCpqePyf9OxXDw1AiBqtWNeu4s9J+PsrZTdwd6RHP6yz6D+lxKINtbd5oY6ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28477},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-alpha.9_1529191930657_0.11275532369648511","host":"s3://npm-registry-packages"}},"1.0.54":{"name":"gatsby-image","version":"1.0.54","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.54","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"84ab7d723e48a031eb698d8552ad331943d369fd","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.54.tgz","fileCount":15,"integrity":"sha512-E6v+jm4IPhkDuwl+3ZCo70tRaiArr0W75DNzLrMJE5gRH7AbV7NN2uh4XJWZ2Uppmldtz50PDUcyCLEbzGTYNQ==","signatures":[{"sig":"MEUCIQDvJZWiVfXc5GRNf0ham/gkJB3vTd5YMW5hdPOggc0JpgIgcgcR0IHoDOTZmNbGW/6IAYNciz+6fn1cYjQnN+syeGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":112973},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.54_1529200384991_0.8280406166223666","host":"s3://npm-registry-packages"}},"2.0.0-beta.0":{"name":"gatsby-image","version":"2.0.0-beta.0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.0","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"df237b27a9bc88fa08bca6efdb0eeecfac008720","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.0.tgz","fileCount":9,"integrity":"sha512-Uuk71QoYc4k03ps6njNfcbW2SGb3GFDSAwSBzkDNTtvkZud2tvbcjNsndOETZBpXsuwcSdAu+lI8l3xNDbd4dQ==","signatures":[{"sig":"MEUCICMD0O9Cn6kpgO2HzyOyD8tGM594VcBWofF3nPkFeFPfAiEA7WXYT8OpxDehL5yjBwCUo3ys+YbHV46uAAn2bVHqA/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31007},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","gitHead":"62bf108b5be5ec7c1d16b92c424209514a66ec90","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.0_1529218419400_0.49129039458124835","host":"s3://npm-registry-packages"}},"2.0.0-beta.1":{"name":"gatsby-image","version":"2.0.0-beta.1","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.1","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"7e02dd4f847b5d1bb03b8867c08b396afa58582c","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.1.tgz","fileCount":10,"integrity":"sha512-StceujQh2jKlHLJg7gp2dRSBfV0inMG0I+TuqU74YFGsJGo4Hy8hy2NHZt/a4HPH5JUZJQIVABBO/zEw11QyUQ==","signatures":[{"sig":"MEYCIQCLrXWVXVz/mANp4hp5z996Fu2G40IvgqjI0871m1utDgIhAP2r1nG1a9f0NvNhJkeimlyKjbQNpaGoyMEVqgf80lPQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29184},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","gitHead":"2914d2ab77b13de04cec7bc5250b6505f2d67a62","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.1_1529223155997_0.7849805058837016","host":"s3://npm-registry-packages"}},"2.0.0-beta.2":{"name":"gatsby-image","version":"2.0.0-beta.2","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.2","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"2f5b8b777d931c437667b2558a91094fba62b62a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.2.tgz","fileCount":10,"integrity":"sha512-w+Un6Ya6TtRfFjACYYIj24GikqJr2dJihXHmKElETheTcTd8pX2gm+1fopS2+vkX4mQwOxUxqQNIBD6uKV3/Gg==","signatures":[{"sig":"MEUCIQDBfq2OD3ZWUPD0NGhmvCz94orjqQPZlTVJxCszLKroQQIgDWlW0+2gYO5Qxtgr5n7fCippI5wzgVeV5GZiKy+/uc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29431},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\\* Images\n don't load until JavaScript is loaded. Gatsby's automatic code splitting\n generally makes this fine but if images seem slow coming in on a page, check\n how much JavaScript is being loaded there.\n","gitHead":"202a8dd21eaec6602cf7a3902a8683341071af27","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.2_1529527513335_0.3203960397494088","host":"s3://npm-registry-packages"}},"2.0.0-beta.3":{"name":"gatsby-image","version":"2.0.0-beta.3","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.3","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"8b8220144f1da083ae2bedf3a1fd26268ac42d95","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.3.tgz","fileCount":11,"integrity":"sha512-ebJZ4OtVD29ujVkHwrPGaVKgEsGVpqQ+UDTD8ySkWpmbMTUs+rwJ+w2blLKv7Bj+JEdgDtgMPtuniamwQdGB4g==","signatures":[{"sig":"MEQCICIT+e9voZEkAP48egbK1D7Zo/ixdAbP/e9noWMIx0CaAiBgRhWhlgl9+Ee2zVbLzt7O93ckULzkLgK2f2DoX0Jutg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42373},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"c1d86bc6080116683eb4c4959182c0bbe25cc64d","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.3_1530261604237_0.9674831335929821","host":"s3://npm-registry-packages"}},"2.0.0-beta.4":{"name":"gatsby-image","version":"2.0.0-beta.4","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.4","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"1978da2f1f5d125840c536b587bd6e1080eab948","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.4.tgz","fileCount":11,"integrity":"sha512-whwLlxTKWUhRzfanXcYM+T+2/LE9xiPcI7nz6SuqFYwi9mHsTUNQsddRnBeccuMnfzZznA57//AdNsbdv2IGvQ==","signatures":[{"sig":"MEYCIQDsqUO7pb4KvZW6FMIl4izwMH7Oc82laGGYwsV8Dt3ktwIhALFLEWq2bUxNyS2tRJbyPT6CekvY5PQzlURcJSnvNPzs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42626},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"a4f3d1fded31efc4ec7731303f02da3d676ddfed","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.4_1530526936104_0.23263723675072323","host":"s3://npm-registry-packages"}},"2.0.0-beta.5":{"name":"gatsby-image","version":"2.0.0-beta.5","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.5","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"086f079b5fc84079f0fd3387a19fc48b4cf72a73","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.5.tgz","fileCount":10,"integrity":"sha512-8NAbb2ErpwrAZz72Q+3Ar7BRe2mQIOTpuMD6cyZonwYenf1rS4K4kOuqLxTnCbnbdRF+azjERUMTcJC/N7hxHA==","signatures":[{"sig":"MEQCIBFhQ98103a1DbNVtUYqPdFfSJQhTEatEuqJmR+Sra9NAiB7aF35Pccm3hBmj2VUG9xEJZcC5PcNTmd1BQL81dypsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30168},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"ff7f3a291fc11ac9d40ba2dd4a54c8a13f1f9270","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.5_1531174352286_0.18191554632535922","host":"s3://npm-registry-packages"}},"2.0.0-beta.6":{"name":"gatsby-image","version":"2.0.0-beta.6","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.6","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"c23a51405d87091bff62ce881a877cacb53829b1","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.6.tgz","fileCount":11,"integrity":"sha512-keoqa6aTlBPBqFkz+yEqUpkNMsDeDMIIy8GS8qHM64mg2HQRdds1feBdmZKhnBTsLMYaYGmzrUVF2wCzDCc14g==","signatures":[{"sig":"MEUCIQDkkjGxqMCVl7IQvUNFLmdy950SxdvxNibLbHRiJ6iyLAIgDrAUj6xwRDlcDRsCqfcMEBZJienucpE65jTjSZjhqVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":43082},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"1e449416b0964f9a1b4cef3284e16d3a6d13524e","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.51"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.51","@babel/core":"7.0.0-beta.51"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.6_1531404088211_0.7767185081153294","host":"s3://npm-registry-packages"}},"1.0.55":{"name":"gatsby-image","version":"1.0.55","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@1.0.55","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"716c7f44d9949864c55331bd3316b751c94ca0c8","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-1.0.55.tgz","fileCount":10,"integrity":"sha512-czX2ovq0TcHrL81VpvQ0vP2mqDC+YInBImFOOrs5dN9wUjNL9UxSJUKbHAJs1WIqX85nSIK/Z0LAMi0YuszvkA==","signatures":[{"sig":"MEQCIEujsoMm3qyVp+7pmh/6oprEg9gXcqCdGN+wZ44IA9GrAiABv2IRdQAdlnR/Kp6EllDtqFa1TFmmyXqU4fBfdpsUUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":41579},"main":"index.js","scripts":{"build":"babel src --out-dir . --ignore __tests__","watch":"babel -w src --out-dir . --ignore __tests__","prepublish":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.0","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-cli":"^6.26.0","cross-env":"^5.0.5"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_1.0.55_1531923901455_0.9991889690730611","host":"s3://npm-registry-packages"}},"2.0.0-beta.7":{"name":"gatsby-image","version":"2.0.0-beta.7","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.7","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"da6723165861baf1f67bf5192323e846b32d64bb","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.7.tgz","fileCount":10,"integrity":"sha512-+eptlThrbIW32ktVWiTI3WzP+/9K+mhH8jZ8JK3R+yVjuvoEIXF9GJzhjx4d1VXJvG9zgXiNafkoANmcg6sP3g==","signatures":[{"sig":"MEYCIQCnZqjHiby/6QeIKF6LGKOiEn1IZdCU70yqPwp9AaLaxwIhANkBlmMwVbpbTQVKe8twEYOjZtw1jWHSU1DuapemvzMm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30637},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"0d9f892e5df04e7c38e3ca8cc32946d35e5dfc0c","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.52"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.52","@babel/core":"7.0.0-beta.52"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.7_1532188796662_0.1256622173911408","host":"s3://npm-registry-packages"}},"2.0.0-beta.8":{"name":"gatsby-image","version":"2.0.0-beta.8","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.8","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"6815def2cc962beeeba0e4e4e78645a80f551409","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.8.tgz","fileCount":9,"integrity":"sha512-frKDoy9W9o4FMOJNWsUmg7DfvDn4mkE4eU65abxffLQA6hGNiHhTJz9rrWOVkRCjWMREUMWzyGeF3ojRcu09lA==","signatures":[{"sig":"MEQCIBR/3r9A6ka6vPF0zcy15VaLBil0G4AuVPU5ASDYGIsbAiBE9hEqCtz1VaTOm6icw4kgT2MwC2fSnnh6iijpxhRcpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdJcRCRA9TVsSAnZWagAAH4MQAJczDcDOTeiYeU09vTJR\nUrr/oT+r4X7i6TOaKuoePUbi4uW3MCnL0LRYHzwyn9Jbh0fxRJHrBQhuBqvk\nwrU/4qRnEHBtJq4LWPmS4PJibh61mF0eOlTn6kKzLNpjA0LzyAatQABAkXLc\nCZ+pZf2swuwWgutecUu8Bq9UKduLPJhCp6BHolYz19A3yzgYhUKCP/jd7a2V\nn1YgpB3Hr4qE5akamwa83WPKxOn1uhi95JrkwaJMpwJ0war2p3T7eANwONrY\nXU+ub7HGuaWcl6ZVFotc/SM7ABP6AgQhs/IE/5X9HcsZmq573FiAr3UVhLdR\n9Pszz6+4zUFl9nbQ3WfEZIDofLBr++xQedqOeBuoSj1wGhyqBAUdK5F+bEGC\nMrnTCh18SfxHnWvwG01QRWhyygbfJtNC8bTLY85QtQ8vkhJYKz7cwXQwsGXm\nppXkYN7PsMEI3kR3G5HWS187ZeKdJcX5gupq4MZeQh/bBk+5t8NFNP7So+sA\nUL8PqEcFk6dro2itnhamhOoIykJEV9KB5e7NKFIZ4pZWnrBADgLz74aQShTQ\n+B25XaA+5so2ta9g/+LSmpzLgrAaVe/bkMmG+h037H1Z/q2E6YfptjXrxh2q\nnmhVwQE6MqhcEOy/wJtg+AAM0lzfIQxuVJ16auBQVRHOfPJS3pgGbC1oDV67\nz56n\r\n=kyAR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"d938035f85f0fdba2522ff229099a3410f06d2a1","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2015 Gatsbyjs\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.52","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.52","@babel/core":"7.0.0-beta.52"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.8_1534367504980_0.6947220656790019","host":"s3://npm-registry-packages"}},"2.0.0-beta.9":{"name":"gatsby-image","version":"2.0.0-beta.9","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-beta.9","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"a72264ab6202fe606f5a13d57187b060d2727ac2","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-beta.9.tgz","fileCount":9,"integrity":"sha512-XpHDI6Xq/DcrEwfiqiAmGOvYidEWogC3DFum37loBYN/06UsYJqYeM8AZNPnvCmt9HdsKFzp+GO+/zc68N43Jw==","signatures":[{"sig":"MEYCIQC2A7/gjdsN8hwBRIWVDMgEElxdvaBN0L++6PFb9UWbbgIhAO5QMrlO2lXr7SsHc7rWLBd5KY4pw4+8me2dYk682xAA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbexwNCRA9TVsSAnZWagAAAI4P/RjrN4YfvguUDtEC5OS0\nc10wb4Jhejuiw/gCDTresAwSiajMQd9y78FdqIEtjtbMa4RqGfYLHBHbXwOG\nNe2xCTjhQBdBrcErwMfCzz4CDc3yCglQts9aDak824yRqoNIDliQlCDNzSWK\nOmOA4nw1Wty0X7MavIbS8AkTQcvXSWjBCtLyiZtaOdrvvQvZJgsoBQZfSd9A\nTZLgy4SWYYml09f77YiKfc0SKvWXJnA9qL5bTDy331dkPw67GwKATDCGSliQ\nqy+IO9FGRyG+rcKXNo4JqOTrwMRzDLDfjJLVCqwTclPbuaBzl/ReiE2fP33V\nlcKmsZIlMiSMbtpL8dac2kOWIpBAhdvY3Z5JdyYjtMbN5qyTCHB9y1nK3J4d\n+0VCLmcpVlQdlZLVLO0/DAV1peIkgB5a40Nw9bSEkhefyoOto+cqydbdlOBm\n0MLUYvTQoC5FOasgZUta5LfYxScKdxva5ui48Wu7vx0DUTS0eeJvIdAtB7zU\nBFKNbkt9OcuAYRn/YwrGCaPg/NvN1ZJNY0qQOqvNdX07QPM16DK1qdcva25R\nnO1vHT8GrhWLLC1vzn/AcKXN+xgKXBEBizV9E4DenthvgDfSUJuAGZYsxy2k\n3CIN0PH7DRJ3wYr+8wHuf8HahuhWO1A59S3fwbu6zULVNJw0hWkBF+QBH9Dh\nzrl3\r\n=AWp+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"27cd2a312956298cca555424129697a027a0429c","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2015 Gatsbyjs\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.52","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.52","@babel/core":"7.0.0-beta.52"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-beta.9_1534794764641_0.6723798712528715","host":"s3://npm-registry-packages"}},"2.0.0-rc.0":{"name":"gatsby-image","version":"2.0.0-rc.0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-rc.0","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"de029a8d55cf85747adf41cdc7fdea23f684589f","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-rc.0.tgz","fileCount":9,"integrity":"sha512-rG7RRgrvGlG8Rh1bvliN3UlukD82CuucIc8QqCrZi3tNz7fev14mJ2Eo+k+edUfQAdWCgTUbq6FpkrCs26pKBg==","signatures":[{"sig":"MEYCIQDVFfFw0ymSyGspm4V0y6le9ZmblqCnK0Ceejd7WlxihgIhAOKq++ZCfEU0fzVgWCczm1CzxrtNee8ux7waB8xf8d7q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbe2ObCRA9TVsSAnZWagAAseYP+wUCKFB6UTy4+cDeG5IR\nq3uZqKZo3UYuW6L2MdJ6ukZs85Cg7rj758BO6DlFdCKzzwCiIYuLwFCz2MH6\nhQQXQZaLmi2RzvnhPvD1iLlksWdivM2IXJd2cf/TN2h8eziCI9FYdAObLaBn\nfpss+hYY9mLNeANEMnPWIYvjMqAMEuPqTiVcsVS9Bgi8fFedyerb6QQNg2Xi\nAKrM8Z11fBbJ8ocYQePDxk+jYgeBzPGCV6K42y9+gzQX+QsYWjJs7/iHjyT3\nARynjLJE5CtOATlkTWEIU7bYXeTV2O96HlyKH0nxSILws/aHILbIkegFo29y\n7IB5uxPewui86elIvR5ZWqutyLwonwGvR4aM6rIlnX7EI51A73bsnvtMqiNv\nPQmiRJaNrZzmi3FnRf1d6H6JgCoIOcfIBdUL0foxxk7NB5ljY55trel1RVHN\nrrghYrqJ3omHFXhC96iHq4VUEW0jii2AHCh+byXDPPfUQqSo33lZCn5JLhsc\nHzc6S89bvLqcQJMSS6dzqYE6QvTpIFIfnbRXNqju2cXxipldH4co6LrwE+zZ\n+gDwvAkfzW0HIQhX4k6pOO8QBysilyw3i7U2hoFqrMmDTCSGpcmusrBFu/Fi\n/OfkVhseDlqTbzhjIHVYr0a/ndt7yxMaxRgsewcNTKpO3Q5egPpHpZf0lqFF\nJXEf\r\n=HfMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"1b29c4482828a533a32017a624d5a01c8a8a01da","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2015 Gatsbyjs\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"7.0.0-beta.52","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"7.0.0-beta.52","@babel/core":"7.0.0-beta.52"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-rc.0_1534813083008_0.00019415638189368423","host":"s3://npm-registry-packages"}},"2.0.0-rc.1":{"name":"gatsby-image","version":"2.0.0-rc.1","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-rc.1","maintainers":[{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"956a4222fdc1a679c2f0a2b1ed8a91c325d6f73a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-rc.1.tgz","fileCount":9,"integrity":"sha512-9P8F2NqzG+ccVEMgPiUEenZG4qsy+m3nLaquBjfLV0m0HnKDs58H2U3Z15wkRWV/99gFm2ovywJsOg1YqF0zdQ==","signatures":[{"sig":"MEQCIGQaoBGcPXY4hyOL49v75++oLpbHbklii0sW8XjNTznUAiA16nyOvVpL86KwsoUXzvVlbxR5T0q9kQClwhJtirWkOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhuXCCRA9TVsSAnZWagAA+u0P/i45qcpK/cq4I9r/Sg4R\ndztoq1W8yG4u5mmwGluC/hr899imoWiY9Xsq17mYOUrNp3eNhiVSMY5S+M9o\npMbUUWQU/xQ22Y68cyZ3HnAavqM2wWYafuKQLuiGj1whTdNfu0Q7bXS5AzR7\nnoB1krTQm9o6Vn3Dl+gCx2NF2cjsJswmaJ3IsaG/Sj3ogJ71sOcqIY/+kOgZ\nZNDTY2+t9Adlhiepi1H6dgzLsasUXO6tODWLRrOWkGlCY/Wue4s7BSDR9p7B\nOehRlARoKQwIGi4oQP4mBif8A2Nwhvg4lTMzsC0JA9kHIw9nLW0MxcNd0s/6\n0rmqhsOAL65Z/5alM9TWp3oCnOi7oWsa2VHFKmjgElDvkqn/Ail9w+1krplF\nTCvAfJDJ4tz48o4mdxmAfP36huiqR/AvDe+VLUw2pSnGiYlFj7W7WQYJwy9O\nTkImkTedlgkba4QTlZaOeDU1cABGmlNENo4/I3/m/5Vy4DcYbRUX0zEH/XHj\nkioyBf6fHAiLn5V2Z1EmagZbxshLvy7rD5wiQ67/B4rE5bwwVxUcBKUoFALO\nCPtHntc+SavcQ1MPpwiBxQX+2oSgr4sBQESKn0bePXONBggLyUyDQyzxH1IA\nt6di/mZZjHM/kc6AckD6weWNBa8wBSR6opFDT9pZdq8qYN2vdJg75gW2xA1y\njmEQ\r\n=UHMO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- Images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n","gitHead":"a8a4c69c97d9d7f59a7bfb50e7d1fbd463d2e012","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2015 Gatsbyjs\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-rc.1_1535567297823_0.22255012917012906","host":"s3://npm-registry-packages"}},"2.0.0-rc.2":{"name":"gatsby-image","version":"2.0.0-rc.2","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-rc.2","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"adea43d39e856d9db072f1de786b4d817e0d85f1","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-rc.2.tgz","fileCount":7,"integrity":"sha512-lwMLSBF3l9R8xRnAYrBwGP34UDhHyvp6/a4kzzcI+OlujzIVlCxbJ4JuVdFPJ3TfEZuD1U6C2X2t3C3ro0EKsw==","signatures":[{"sig":"MEQCIFQ1NbwGBACIwuy6n+AkbPtUg9C7tKUqLKLK54kO1GnlAiAaLdv6ma+E9Re7khko+FZBgcJsNWOR+f3m3+a1ag0hdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmTCqCRA9TVsSAnZWagAAvJQP/2d51Q1jKDoSUFLi6MaR\n3nJo+CmAUJ5PYeRfBIInyrRya4kGbchxC3dz+HyJOIcHifZH/IEKh29BI6R/\nutdSc+5LpYmWhhQhhOWQ2F0sc2zHvXrhudE59yCw45WbnsJsMtTaybXuIq8A\nqshfXCdUs5kNnYdstsNAORXnuTo2XcjduEklwDMvoUfkA5roJRTpggmBTUvj\nEtct/7aV78/BICgFk8mRKYeTXVIMqKvwwhUc+7hk6P6BEtVGTBwm6XrFm9wC\ngEvpPgfEHsPvongzX8dpbqewwutYVj7mSWKJdl9U5taaxes31FkIzkTDvBJ/\n3cx+01wxXl2XFmXUCVTP5vongQbZRUPjySALK+q+QVdyeePoapL0E0rYUGhh\nvBJjRAg3RNMOYI4hvy+GWDJQizddXfC9EONcGv+5ugiknRK5lnN1YyvNmmyT\nDaoKy7j1FOh3bp+Bi84GzwzCRJmx9Djt/lKc86u4ZKxiMAKuM6GXdNIGqRtT\njkPAg60jICA8DK3G/Sx7AcPUgD0d+Lact8p3smVmKHvC05ADHaDyptTsDnV8\nnBHTRMHYRe7IAjdOyQfh/74gkviGvsmXINoiCoX7E+ikPedoiy7UGn6aYnYK\nNemDXECru+VSGRxh+bqaX/aXx4AMpvKtf8X100t++tfrm14B2RV7u0oTJYWL\nArtd\r\n=vf4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n| `critical` | `bool` | Opt-out of lazy-loading behavior. Defaults to `false`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- By default, images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n- Images marked as `critical` will start loading immediately as the DOM is \n parsed, but unless `fadeIn` is set to `false`, the transition from placeholder\n to final image will not occur until after the component is mounted.\n- Gatsby-Image now is backed by newer `` tag. This newer standard allows for\n media types to be chosen by the browser without using javascript. It also is\n backward compatible to older browsers (IE 11, etc)\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"6.2.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.9.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-rc.2_1536766122029_0.9784622667017306","host":"s3://npm-registry-packages"}},"2.0.0-rc.3":{"name":"gatsby-image","version":"2.0.0-rc.3","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-rc.3","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"56a503fceb1e8c75bb8b456208f0095b367aa615","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-rc.3.tgz","fileCount":8,"integrity":"sha512-CpIV9if0+DMHSmM/PQZG8V4oF+fKwS9U/hvXGSX2ZZva9//DlmzVLYhwq53hlJRkIUWFiguOt0+J39WETSrt/Q==","signatures":[{"sig":"MEUCIQCtwA/0QIpCeacpKrOimNvU8p0MTiqeHPn27JJxUKsxdAIgHDMv5vQNpu8JEu281g5aHwDTSuf9iX5P1O0PtJMbzMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbn8w+CRA9TVsSAnZWagAAS3AQAI2DAdufFc7xLOZ4WBP2\nnJCJYgF4O1HyCdPuSBJGWx38PkFvaJqWBrHf5w/dXTZ3AvoZyivTa2JWWXKQ\nKq2DufGw/fBR5lQEyYd9gCDFK+2MoEKuG3ebEbatX1hhJhj9lyWk20m/d7Kt\n8rfXsW5yWkRPB992sfQ3NMToxgeqZw21WWPOsBH5AYFz1PMYdTkrws8VlE+v\nbMbzrlsqbU2cEam2qy1/cMzTcE0eXfXXAGRXAsy35QNZ9fFvxiTXDl+pMnXg\n6wnKT6iYyYdnHA34DYHhwU+4VHjJDI+3kUzz5V0CZxLksDXCiDwUnbgANqsO\nh05pS3VGnO5Fv3GxKH9SOrmQQCU5BgN2yoV/J1jzJtoL3P/dHVD5m8veFQxW\nPM8I6eTTD+ZTBL4k/6mdTqu5wAMUUnzoP9vo7Y9W1Tehev7b0eXqV60/k3mH\n5YFCIvyLZEeWl269mkfvOl36eDqQejSYN0rq5pCiZKv/o+V/ifir+cW3Wo89\nKwl1VKMYM4sxob6NNWmqFFotD0VmhM1IavCzhUTz6RBtphh9R5rwOt+Gxf0/\nek0/uRkHz7sWKfdmBu8v6ExEF/PK6WpUpl/y4Ozqkfw8TZlC7Nbcr1jslFKr\nUjdLq5YyNBUnC5kmYSdeNeh0c4JTwKrmlZyY5BMflKoh+UT3YG4lWDuKHDAf\nDcWy\r\n=mfP1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n```js\nconst path = require(`path`);\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`)\n }\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`\n ]\n};\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `outerWrapperClassName` | `string` / `object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n| `critical` | `bool` | Opt-out of lazy-loading behavior. Defaults to `false`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- By default, images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n- Images marked as `critical` will start loading immediately as the DOM is \n parsed, but unless `fadeIn` is set to `false`, the transition from placeholder\n to final image will not occur until after the component is mounted.\n- Gatsby-Image now is backed by newer `` tag. This newer standard allows for\n media types to be chosen by the browser without using javascript. It also is\n backward compatible to older browsers (IE 11, etc)\n","gitHead":"17c6dcb7f421cbef5f4d7c8afdc6de7a155f974a","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-rc.3_1537199164323_0.16170608227074457","host":"s3://npm-registry-packages"}},"2.0.0-rc.4":{"name":"gatsby-image","version":"2.0.0-rc.4","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0-rc.4","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"afea4d6264dba450edac8d06c17fdc182eeaeb81","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0-rc.4.tgz","fileCount":9,"integrity":"sha512-b/t1itnt5vePLtepDMjTbCyLJCjdGk4pIuWjckR1yB/BFky6xuXouaolrDNoOMvdUShQpw2nwL79dAq2gwweRQ==","signatures":[{"sig":"MEUCIQDHcuFjxcGuG2a6EXsfU7/ZOJtPp8zfTEBAR7sKWsvfRgIgbSrUkr+/YdCOJq+9UbA/lnsa1dfN8AiMGisZu15lHys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbn/MSCRA9TVsSAnZWagAAgIgP/0CIpcRcuiVajgrkBrVQ\nR/aVHw7G/pEYQ2OXfQ8rIvmlaePxpKE9vP9OLpiZtpzDzUxvynhEfg48aDLM\nukFpC+QSHq7r2mtc/XDjfVm4d4+KNw8rZCJz1hK5s0zz9Rp8926n3hoLkH+K\nV2yOG8XzJdGACB3rYAbf94XypS8rylinCw6RUiPnokLGidtU2w93+1bdu7bV\nFF3khGKki3FzniftmFjxkrGJh7Br9MztS3D+Jy1x7BqHOa0dwYXCE4Jl7LRp\nipbhWN4Cjck3AconkC7PY/T0nr9De0Ohs6HKGXi1OnE9Evdu2aIMOxn3ZmME\njmPpYWspztZnlYUvlgrL8xOepB92yVLaNqTZMtalouPmAF7V5sfe/Yh1HEaf\nFcGj4KFTAqtP1xDSd1/5RCkOsQbEJOmADgcMmMdhtTbGMBW0lmbufdQvNoAK\nGk3rQpfRMtgpSaEu5o+C8P1TT9aTJqESOOC12TTe7pB38VNENcBHyJmrGP0x\nziUTrkuLNA/9b2MglKVDgRYjlHFCXhuz6ozsvl2q5c3DrfA5grl1vDOfprF+\nmbhsvFWx7FCqElMeqetlV1hbZ7npqUi01BrLQ9UdNlONwfVKV3L8ExsQxOYX\nudZAuzu/9x6O4EPMBkLbapnkBKV/xtNaLUF5QOv4eIbi5T4nyaF40Mn7dQY4\n8Kbk\r\n=zC5Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```\nnpm install --save gatsby-transformer-sharp\nnpm install --save gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```\nplugins: [\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`\n];\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n```js\nconst path = require(`path`);\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`)\n }\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`\n ]\n};\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ----------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles in the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles for the actual `img` element |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n| `critical` | `bool` | Opt-out of lazy-loading behavior. Defaults to `false`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- By default, images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n- Images marked as `critical` will start loading immediately as the DOM is \n parsed, but unless `fadeIn` is set to `false`, the transition from placeholder\n to final image will not occur until after the component is mounted.\n- Gatsby-Image now is backed by newer `` tag. This newer standard allows for\n media types to be chosen by the browser without using javascript. It also is\n backward compatible to older browsers (IE 11, etc)\n","gitHead":"b792c2282e957123cf16302116fdafc39db6f378","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0-rc.4_1537209105796_0.9404742453375063","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"gatsby-image","version":"2.0.0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.0","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"12328a9fe5aaaa23e802eee81783b0b0c40311bd","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.0.tgz","fileCount":10,"integrity":"sha512-8ZjABtHGDAho2GiwM3UHeX6zXjGahF6BWE6QsUy1SAnMcw4ajalQsMZalV3kq6Bd+TTxKSUmDb8PzZ6cUhCuNg==","signatures":[{"sig":"MEUCICLRuNLiGxTvN2MgEY86ButEPCK3uXoAKx+eqTXdI76YAiEA70rRT0CnoATsR0lXF7nPE12mj9bTKF6oLsdZwe+BAGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboAr3CRA9TVsSAnZWagAAgJwP/3Bx9hYNHCnXKT4nJnBs\nxYu292+E4k86lmjIGk+Ut69eXaHz5VJyi3BNA7eQKXEyNgmkfPwr6mqoEmde\ntguHJ6oIEcP5u1mMOuY2SR0+yQVABzW9UBMnQ7uPwb6Z3LktndhNQhcXJ45Y\nVBywzMnvvvh0MFmf59b5qf37LLDj5+AkF5KOO0G04HLnk8o/x5bPRpTW/jci\ns6vrHouBqJQkhlMsRyiSwTI5y1ytg0XChIOPulzjAANWHidU4OTUT3kqQkHa\nRpyX2tUKSe2A5v6MtxFQX8YbqfEoxRzQnX0kakBNpnDdy5t8dBY4lUd7EQPZ\nGs/RoH1VrVboPdfl+J/v3IXqoQLsGk89iZwb3BclNanBj8f/5VfQarVI2nwL\nZHXRoVkr1wwRu95QVYd4pJMZhgAXsZsRXpW4Lkxc/FCedRFUBiCfNVjw0T1p\nbn5q2Y9jVvZ56VUESAwu/4xN5zu+A4rY7JLpnGAEd5e7yXGCX2gx8F5lGDEn\npbKp7dHQNjC9IZcQzLw/a87r4P1NqqpvoeoS/Bwyyz8fTxOJneycOjx0Hik1\nFe3OKxwtYFJ1akiVJk8RE0itSPEZ5w/ooKTlEmqcb3Sft4iFkK+2lQJc7e7t\nx0DWtxfTABL9NhpT5XLjHFXddmUA+/CSx71I4G1AvAn7sFJDRNG8H9EVsxDr\nLmGq\r\n=hUUM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"b70dd5acc031115296584f879aa52cca62b5dd9c","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.0_1537215222539_0.33383180014792857","host":"s3://npm-registry-packages"}},"2.0.5":{"name":"gatsby-image","version":"2.0.5","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.5","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"81323df1e2183cf692c9d3c4b909b0551193e579","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.5.tgz","fileCount":10,"integrity":"sha512-EYDIRqWgaQUdp+kvPUkxozojL3SzDqPAS+dnJgipZJ90wW08r/nHaMqJ4PjMJzUzfrVRn0WcIG0TaHa3luRSRg==","signatures":[{"sig":"MEQCIAo4SxFnXTZ2Yjnj98kSKEJ2E7JLs5DGkTZSWIcP+uzAAiBaHkDbyhVXnMosHMv+6iGaszs69qG9yj8ZEG+8FPCc5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboBFrCRA9TVsSAnZWagAANFsP/RgeZo0ebSK2Q5iEFnRi\nxNpsFkUdsAsE4pHB3NuwyK65qiOLfTRWeTmbBJEQISeZgYsffYbmxJxlqFj0\nVcetidXdHKNz4m0BRNpuTfym4x1KSj8lA6EKyhcndcjrvTnp8BYqZVz/tG4C\nXBnK68883N3ZpDalCCVSTfdKZubmbj6v4oIgdBM1amkDIUb0Y0nzeRPImukO\n3HRrJSaeJrZGs/E0DuUfD4X6dBGHuER3fn7+y5Fc+KCxSNvZULd50dlaeteE\na43b26t/7+So1crul3aboejfHa5SKPhr9cXhEQSOjsgfP/saaGz7huCyYQQH\nurblCe52dfBbvgys+IGPQCmv3LZPpUcn/OVYXsVnqKUvucl6yyAXERXEV7rF\nzXB0Kprpq9WbSquMeqaybsi7PKg9FEbm/P80wgQs9R69vClL+ayOUDASsPIx\nIyZ40VHQZA4fDCbq5Ws4QxqC94xFs3pToskSjwzYD3d262+LvytK8S8vg3B/\nHce1fI43PgMMYa4tlXtYzucZd4p65JjpYQOFYPHODXs3Q8GO6IVU17AORxzy\nKOjGSzHL8YcsVi6X6fGEOE1EcDYdo1YkF0OUAfeF6WQFXRGKb/44KqKW7GY2\nZEALnpjmX1S5uYNW99HbcXN7FQvT9b8mR5yszNgOlURv2HsZWdFF/LNtynlx\nvDwF\r\n=XWSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"dc95450df6e853d04b0b8c7bd1b6e1a17aaae6b0","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.5_1537216874355_0.6982148023407988","host":"s3://npm-registry-packages"}},"2.0.6":{"name":"gatsby-image","version":"2.0.6","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.6","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"b9ffbb9dc082cdca556c21a1d7cac54d825c52e5","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.6.tgz","fileCount":10,"integrity":"sha512-0NK1lmiU7Jq7/mM37U5QbI+TUYjEpRrSJg31zL0/t47VChoyjt9xfJIecp9yasrzlZQ0W/WVbHBT+h59FfcsEA==","signatures":[{"sig":"MEYCIQDNwrtLFxut3i0HJS3xltEMdVido+bzeeRyapZGBwNeHgIhANo4yL5XbCMCMnxpOSfXA17dSLUAiDsc4lzxyF1WrknR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":104297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbosOiCRA9TVsSAnZWagAASqoP/i74yRtEPK0T1UJNFuLQ\n/NQvf79b5Po5pFkYi4ZlJB4Cju1ZdqST8mkS39q0EkvMlLM6pHM2B55qzDmj\nLuHBDc3U9NtXb+7AQB0OBzMc/1PG7/1w0FxH+Nb6aFycisdX+n/FUISLnIe1\nOJdYJdo0A6YIT4m5Fhl721IRSI4EJ+lQs00pY3LoZD16PXa52XDPAJv8bZBg\nXzQxYzmJEE9P5OqcUr08kBM4zQYhHKj42WnQqYq09jHMaLq6Vcx8UmUwa0Dk\n4Ye18/KO6PAbipBPiKxy3Fywd7YFHweYZbHtGRoIgx2m5tOGTbwxPSuRoaQf\nSGY2hM4HtQ6QDDngKak2qHN2InkD4raGMGkOysHHtDW6DO9QkeenO1PIvMxt\nuGNSy/dlZ7eWWG1Y4LKimsBubmUrtOFSlyjrFzm+TfXRiaq7Kipsr+p5RiRe\ndl/H1rjhawy0+s4SA77Hb9ub4b38Nz6vAOXDi41s+8ol8MB3J2/bSaP9IXDm\n1mB4pHYGFxdiF2rRg5JvzmnTJj+lxxuooC8g5TRHqqRD9LfrCAkwgXnxH+85\n6Gma0HnjUv9uVbKKuDF/Up9rILYS92K3KlLBfFBWwq12sQeoiU0LTTf+kixB\nKPkxtClUijccceu/tg+7QXZalCtgsIr6MuHNgzLNaj2zqLtmT8/P7KGcmw/I\nzuqa\r\n=L/uX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"d72dd029363c92b58aae3a0eaf273909ceea43fa","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.6_1537393570024_0.6645069924443479","host":"s3://npm-registry-packages"}},"2.0.7":{"name":"gatsby-image","version":"2.0.7","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.7","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"1a2a11275b1bea48dee199af5c16a5597b67bcc5","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.7.tgz","fileCount":8,"integrity":"sha512-yTR1PMHKxw4CA5Kk7qjUK6s0J/ze8HfzEINhSaFNUIDsEtSIKAJjaX/GSkqvz2GqoaQBmufUCxbnl3YlKebgOQ==","signatures":[{"sig":"MEQCIHVTHjq7pIBWwvEGMvrFPGsClsHWSqY1YXiae4YbZe4CAiA3cFeMzCBkWjl3XWqkXsSohBGTh76exchQ5DqV91z1Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbo/29CRA9TVsSAnZWagAAvsQP/1htUcfx0Mw6hmrDbdXn\nQ//G0BtWgL2at8aX2uXE5GthEY5EquPQHSNemrTryHurFRdUv9fPcSyU7tsb\nMlN0NhXcu0YAemFoBqu7aLpnLGmfxVBJq/RajzgZBj3vZSph8E86UjZqKiHS\nU+xNH4stLIdVFc83iu4NzXhZoqn13vt7HKiexnqo0XQ4mYnPhUojCZPse/xA\nf2801G7/0m+k6SxTXjUngKmRtvycSDZYRqfN7fp7Osj7E3FeGuZ1nP8567fv\nZbv36nXpuQ4PPIjpx7BVc/EGn9Y6Xix0l7zv/yOEjm9b1PjLgpy/g5G9S0Eh\nLFzabXWBU0pBMbTp4erp1fQ5RTuPvGyk7C4tzrZBG2pL8xWgB9SO3ZxA+gNN\nIKuM/QfPJ0r8+utprTEnErS4f9FLelFwJFd1mFrSJVdG5h10KmaDjN4a1bD2\n6BEh+m795KORP3Mk/7jPm92pLUM4cKYJRHTh+pqe+uALsf5I/CfS+s19bk43\n1C4nVECy7cQ3/0Vw9sdM8NfRKDWD+VjWZ0thSNtSVLlrnolQZSvZop9m/kio\n5OFBPV+/LpYu+LS+gAOWxO05nE3r5m1O4qegP0lexV3z9+9dCAeri8b76WXO\nf8wTr+Z+QkH5QCnHzUEp0IwnzNtpbnowWxnGw2Uu/XCwqSXLF5fADTbNb51e\nsgF9\r\n=Fh2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"edcac811f6b62ce4ab700ba871c77a791dcaeb58","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.7_1537473979661_0.7617756333435892","host":"s3://npm-registry-packages"}},"2.0.8":{"name":"gatsby-image","version":"2.0.8","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.8","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"02011c610e8cf2ad20423506f11996a5e67fe39e","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.8.tgz","fileCount":8,"integrity":"sha512-07No0cLwvAraTTL60JqL9XV8vCvf/No/awDp5DVLEKdfTQdL2oIwIUnfLLoNV+Uw6F4PlNCHMdcRoroe0trDTg==","signatures":[{"sig":"MEYCIQD7ACOU9lZAPjdiFxvnz6K0HY9RW2W0WVrY5Xo6MvL5AgIhAIfNeBqf6CCqQbJAiEx/YQ9gT3wNMOU9J6BvVJS5vcOI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpUkbCRA9TVsSAnZWagAArvsP/j9c3tzlmpBKlHsyLzBb\ntctlOxBm+c7bcaSLSLFcsNqA8pb4foN7unos675aQpqLAojKmzJmmlS0PXy6\ncPiaV9A+MUEsa54xQIlh5F2ALNOCU4zruwiQOehIgucBn6riT/QqP/hoF15c\nLo56cXur7p/+3IyXIH7P3YaHqAcn0EEaq2aMrKid8GawQH7L2jOY1V7F/WHH\n/R3UXJCLogfbO2Hc20US9tsWYwpxu9GKhnYDsoq9m3Af4A7VOZq3p28Vl7Ha\n7zrP0sBmoUf2xcPcu4suVspsgjWlE17udmLlG1j6+SHM1QA0K3sRX10MYaRZ\nUhMKt8IuszhUTDhXuxmXzH3iA2yXa1wM34C3AZac9oaZMgUG0xEo2VWkYfl/\nMotyaYBOgbRlFPvkGfINOK+Tm+P+nvVien+zDU0d7GDYkJWBdz3/5/oJbZ2U\nRN4BVydinY7Zy34XCP7ga40rN/hayNUYpdFzIpyVD26cXnk8on9Qyu3lOhKN\n7bw3wZD19s/X81rV8fGHsa16EVUrz0pE/g9TyDS84ob0B+WgxmgWZ0kL3ocS\nOrUUZntEZB7ewarN5u+OwFqiqEaIdtqaPGB0MMDuXz1J7dU/xaI8efEux2yu\nSIyTMcp4QpoIUF8i7hggQlDeTEId5yhKejeuSCFB8D1VLQxWfk/VgFbi9gaL\n1XSH\r\n=q9H1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"1fe06670f848efdd091fa982cb869332ea256b7f","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.8_1537558810287_0.9625229757527134","host":"s3://npm-registry-packages"}},"2.0.9":{"name":"gatsby-image","version":"2.0.9","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.9","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"ed5feebb4749530e5d53436ebfbec409253e1493","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.9.tgz","fileCount":8,"integrity":"sha512-G2v4T2XHe4es8bbFyLnenjpf4HdNteAbA3NzVb857c1h9SOPGusLmfymQ1hEDoDQ1J/zNpCUzJrrE9vdNhcVcw==","signatures":[{"sig":"MEUCIHmsQm09YzXqcYus5EpiPVRXbG+rf3jm8ElmbS9c/aCYAiEAuUT3awN2u9J7mcyj5G3pigHVDs1o2jl1tRUiXE3xKl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqNrGCRA9TVsSAnZWagAAS/cP/ijxh/BbY3YjbV91AI8A\n+18C6TICuqrq4xmoXWiEGwWvvRjWKBqihQfXTP8IUMBpbclxCsxe+2MkZRNU\nP/BApUNf3ZckQOARGn39jpGkekFiFXRjgBMw8CB5XG/dpthdOLuEkE32OpZv\n0LuGtZJm9KrFzA3YDU6INH1NTc9PGFQwkhUubX4mY0ryU4O2fkvjfXA6dCPy\nd6Q+moTAXZ+tLR45ALULccZWGBIKy0wWjT+pJxrdoCHYCJ352En9iFBNHEk1\nI9f0hsL8kL+NMXoVE0vpJQtICzfuSfuctlOu9EweYOF1qEMpY+qB7BxSlFru\nTX1BLB4Z266/Swgl4YfL5mKEbQd0LOF4opdZhP+crYjlmQwOQihgR7Zdn+qY\nDvYlshgCXtUYxtcBVFtIJ2hgxXWFl8rpHF9NKDXh4WbXInDX02w1N6GLNrDM\ng3ZRIC+eBKJFVRkhDW5cidn+YdJpvhXf/BPlQrrZ6Vp7Lu2gbopJMSf1N6nK\nyhC0uSTGLzZKuuLZe3dDEymuMq50I4XNIhaZMtbZRfFsKh4HbRfWWeFy3FHI\n7kqwYw7gkpNpSv66KnTB42PdglKCEbrvP/Zrsqpj1r9Uht2PmoJqCrdmeuJg\n5u+ZsVB7Pse5x4sO35d0Gwjnwxsgzi2KSwbtq01H8ACu1EI8b7A1Mc69/Uge\nTL34\r\n=uSZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"fe384a3554c1c2024cba1c9e7167569593814f18","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.9_1537792709604_0.2325831784491419","host":"s3://npm-registry-packages"}},"2.0.10":{"name":"gatsby-image","version":"2.0.10","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.10","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"65c1f27e6d0cf024b8b31e43ff0d115f3b264446","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.10.tgz","fileCount":8,"integrity":"sha512-kad7qZY7JcRzEUkodCkH38zFpKW1IDlx7AjSyX6aKR4GqJ65BpWrZkY/080IP8tUkyUh+AESn/TgZN+BoKTfLQ==","signatures":[{"sig":"MEUCIQDtflWl/QkeY4auX9Quaips12XGC8IGBerB+EA0EfNWnwIgG7nFsj2cKYNJBbiiL/5S8iKOGMZESDYnDyZZ3GTkjmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbq2G7CRA9TVsSAnZWagAA8FAP/36vnavYlVwGLRyJlAQH\nkGFu+ZTkpIWAwArRxR7qlqsT2q6tcmi+j8Txxvs3b+2dY4UHimj4D3kLSQzO\nu//CSwyrUE5kGGNo+0OBOVClSXIxntbh91Rt7X4YaaZMO/Z4Pfa7SLotLJi4\nuI+ANqL+WZFlRa64FhK8Xuenz76YCL98DACqOvhex/+VwALTIEV1SFlMeE8h\n4GcP0+oo9tPt+Ao9jmOmsM1nw7NGZSAzn1G7I+me54gYVfNChjMLG504GA2u\n2GM3LBL2cNLBr6kA3h4wm+DW4/2FE7JPd291EQuNGKdBDqzcGQonKdsxl3UZ\ntGyeZRp4vT3SPY44nprvfQ2RyWdFDTyiYCe8gSYMb1BTo+zC1HoBrsFC03dr\nKUo4FPKIT0W3s6RDA6+N70lEDI3Rw7ZVpwL2lVaoklArRjZhjSftJHZnCUkD\nNFm16OV/5b/8mIkrQ5OXSoft5ORruPPYOx3Ev1lYjhCGLKsW4W4sK0HlrK8T\n3MSQPaw05H58nNTmF3mift82tottdco2vVuhRzkvrnJiPZZcwJyRY8FHuvSY\nxOaSGB5oLfwtdSjFN4im7Ku4SavGrPSLyNbvxl3rpSLQuaEYI+s8ZuBGXQm8\nOE5csPf9P0ME57Mad5E7GWjp9UUBu4R612QFq6lxyJMAhXaA2BSGR5AcXtNb\nbaS7\r\n=SEzi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"3e48ea91cc8cd96b7bac2bf9cd0f61f34a9fad87","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.10_1537958331339_0.2763076063416472","host":"s3://npm-registry-packages"}},"2.0.11":{"name":"gatsby-image","version":"2.0.11","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.11","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"d261fd891a5541e6f7c9cbc7c118977909740a13","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.11.tgz","fileCount":8,"integrity":"sha512-UATAsxZIZ7bxwDzp2CP/04ChkDhazCNS89QLW9QcLeYAeLOn/eW7bDuY1Jkhpj+a9pPGQd2gr9Pun7eqL3n5AQ==","signatures":[{"sig":"MEYCIQDion2s3PbMp7SJALEM9yTn+GAyIpZO0YE4vvxZI698/AIhAKlL/g0iTEwQ2NMZJV7uHveM3mlt1XXFOnN9kdsNxtpF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbriwxCRA9TVsSAnZWagAAKigP/0XFAB9b6O/P2/cjUFM/\nuv1Ipl3cbcTnvZN0S9q8V8s+Lx7psbuI6LN/taIkClylMTt6jpd8XFvJI+g1\n6XtUlH6Na+Kvk+2lyvZwmX8f9mdMETWwUKSgE85l0GLUKLGENAyDvCcen659\nDSuAYrYhYirnkDeEAX2JP4558I8U1ZaOShf3zAxRPw50ELvTsjVKjefyJ41+\ntymIGBgn8s8imVwnLlPg6K72OznF4qIYU6l/5/JNbPj/uK/svPiXxU06l5Co\nhOj/LvmVrKMKJf8t2wmjKgcOHfkgPU0sJbG2ji3QB1T+dnNQEcmo622lCBym\nR4VouKh0SW7XdFt9AFJ+MsZvcGZ9rf0Qvueu8NeRt8Gaqhs+vljl7OA/Ms71\nrCNz+3/ZL9cEg07m8fXLE4K3i98rSH0roFeM3PvkAT3J1rTA3umW0htzXC1x\nNtx4OjVc2ZO03pdBxqW7laV67dpdUe47tqR2q2D8S52al8F+HHrw5gOd4IaN\nseiEJlN+NhYPX3mE/MYM8M5wah/HF0glrKKr1w+afITfW2TiFwiV+2cF3Ial\ndQvX/GfV0xhi1m4MjR8uIgkgFrnwneDdG2ZwZLjqOLV2YdISLjcMYWVOd/DB\n4gUrnodlcLRe1sZ7w+m6E5nI3PGGc32V6gjbX1t8b1LlWK5NSHeP7UE5LPkk\nYHPU\r\n=gMrH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"5ad1bb5cfeb9b53653655e97c21ffeb5b9297fb7","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.11_1538141233072_0.4008475093512145","host":"s3://npm-registry-packages"}},"2.0.12":{"name":"gatsby-image","version":"2.0.12","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.12","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"44604d6318b9e14fe7c71a4c19251b833b3aac5a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.12.tgz","fileCount":8,"integrity":"sha512-yQicyWmwodYdcyY83TMvQpOr7Hg/xxERhatkO+oGvDTcuzcPxlz2I15CTlbFtsCnixM1T2FMR/vatuYGsdCX8w==","signatures":[{"sig":"MEQCID9kZTzcEX7ivzWlA+LfAdYhdYBbiWKm076BpEe0UdSiAiA+BBCi4HDoMdosYvrrRpKZft2AFcH9Mn5ABLcbFV08tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrp+gCRA9TVsSAnZWagAAqSEP/Rl4hwm0NZpvziMxJiYp\nzU67QlcqkvR8qhX0vJE76z+VlSz7dMEY1fi90zTDRaS5IkAsCHOi0FBTNOp6\ny99awxPZ631UNCCYktqo8MRlSWE2ByidR8R/wQBjegoI0LRkOhs5NK1eBmtL\nWUNqJgWLQ/3zWJCS1Tom2B+VEcHX7kJUCynr8elppnxyIcAghNs9BkkpZsmx\nOarRhJ8+X/P+IyOvt6rmXWT0SBxlNVDaSgGEEnvyvLO4erS6xrMGTKta+M4U\nELi6bzHARzHLwtU3wwrLiEMb8mq9PS2PJNkv0tHYER2zeLrU0GlsTCIRAZEY\nlz07boSEO3YaK9nFl1Oood2cUsqTOtDLFlpKd3uYTtnPWhmPPD949qnYv7VH\n+sHP0KB0bvdlyVdzzIxrYZQcrbH1rfDup8csUTsgv+kXFdDHC8rq7DuFnlvo\nrN/0cOytG1GnObdeY3iVF23rQP0rshuDBLg5Grcn3PFNulGOrMvkDSGM8JxB\nV+ZoKrnpkZP+zpVKw9ZrbqBoSf2RtjK+0GIvRY5hAdPy8uTcRY1I5T3dX9Xi\nWbwfziULrCXbeCaSyqzOI6A2t3qT/R8Dw1qoa4erbhX+8AJJW+gB6lCaWncE\nKF8wmWg5H2sTxD55QMn0FY9exEI9WzL6Lj52Nh917iAQ3szRpX07SJcBbeVp\nduKg\r\n=qrbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"3def2340369a518c3aaf3250e0c2564e91e4fc0d","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.12_1538170783139_0.33340814315783995","host":"s3://npm-registry-packages"}},"2.0.13":{"name":"gatsby-image","version":"2.0.13","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.13","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"bac15fceeac699aab27e821c97ea9f64084e2cd1","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.13.tgz","fileCount":8,"integrity":"sha512-TDyYfhSZ9gXu8pDdmZZ5ml2zY2kIwPelrHzCXwfAIWbgr6zd4HnYSLPuZCgXUjbstwNsHTS9VAhvmrfUOBs/QQ==","signatures":[{"sig":"MEQCIEmDPHXGkthj0vcrMgcp4Y53SEzcqyNJwtYjUC8fOiYZAiAo7Xyzdbj36HdJZXKwBKD+DN6vYkp4AMYgtKntU4LkqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbsib4CRA9TVsSAnZWagAAq7wQAIr7I6IGfD1N4hGWkvNm\nk9YgjNTUg2wjxaHhNh1dwlV9CVTGZ0CBtScA+VNlOdFnWA6cavsuycrs3aXT\nLFKQtgUwJ7kMYKpv30sF42Q4f9TV2vybjSF1xga4S8tbyXH9PGTTdJphq3Dw\n0KGEKN6urvRQWSnnaa3NQhB48y8uzfXmloBhkKh+bYVE/jjGHr+/66cvyXDC\nuaR8M2phKNwBKulSMFLdAcDEijb46g1y00PYo3pdPvnVDvy3R2YulJCTQCoY\nmLtzNlq49VNHgKG+p6pATy9m84IfcObcjgS/Lh7yZj5Sf2Eb8b304ZsXkqLL\n0qOe4/DnoeW2GhVEtubLxUif42mIIbAyFQGttaNqmrYQ3oJEYjGaOq723OnP\nfdHrQ26AtouZ8IB0lTsWw6ou0YWVmiALZSEEaYVkTDNYf5bUdxmzgHdAvfwh\novCLC0snrORYlLubBDbIZoi5zKvRtVJSBW9/Wqgz8D16gn1QWJFRe/cceIgT\nAHDuoXrCr1CfXeOcEU7tq0poPdmOPXV2wcdxgdHKVXeKCg1kE84frBzmdwQA\noxA/yaE23NqDIpcRt5Fw7l03aeEfGEiBEDip1lye7+xm5r74Iy/Fy205aUlu\nBuvVkjlOH1krFeT4yGe34LoYH7PF4lINWJuVbRjeJq6NgzrmWUTfA8xQo3Yw\nkrft\r\n=86+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"df9e6df512de563a14679d121ba4026a3b606a81","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.13_1538402039848_0.6205868822812348","host":"s3://npm-registry-packages"}},"2.0.14":{"name":"gatsby-image","version":"2.0.14","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.14","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"d3ad81888f970f3b7d2a0564ffab6e4f59756686","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.14.tgz","fileCount":8,"integrity":"sha512-EeqjvCj/pe3UsvUoBzJptxEo9ilJ2uWbwpvW5PtjJufCh6XNjXSwVKq9F0lt1BgOCSz7K94HhOSU1Zn/STNMEQ==","signatures":[{"sig":"MEYCIQC9MqB3b3BCov+eGNpeZ/q6r5pYX8Ie+EHMh//ofPjtqQIhAKxmnKLeccizmzVi7S2LLMBGl3r1nJA8W5i2l2SpCST0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbwPfPCRA9TVsSAnZWagAAkRgP/RwhZG9Zp8ZYBhhBkIrd\n8ZCN0eYuYZm5LL3brwA0vHyQhxrliRPwQuV/WHh/LlLcwLLGB+C1M9k2Nf08\ntwQ+DYqw6+HzHqyKd+fM1Euxmd9dRTzfsPIM2MDCv55O8OnjHIrMAfV6CDtF\ncEcr4dpSt6tLTY7l5O7GNB4JkmWYRF+/vMthqxlc+Mg+xG21k1kt8E1OpqSa\nU0zn0V6tYtI0G3WJBT9ni0PkDL07f317UjYj4DURv03vFJx+mpM7vpTNJlGL\nOhU6GYlyJm6zVLsbVYCCdnDWw+ou/kFDCMqnQKJrJn5IplAknp1ddcAruM09\nXDz+rPzLPguA5gRc3ztzqztvkPkaELeRMbvIZL1fi1vhj8TDoSeOrJ6EVedi\nFDU69jAgyk7LHfgXfuSzRYPFMQNVIHstLr0Cf6YDEJBH46e+CrNFnwVu6v78\nW+gl9fyRY4z5MiTMLfGjFl4f15e3XLUDlEAOJjLMg6COtpnDXBw3TBD/+v2M\nX1Nh0dZDhysGZAG2QMviQIGlPvyukMmoZQO/tM1DLHGKuTUf/duOkrJG/ir3\nkxeCz9kyHJaga15FYPtW+fPFoBDNiy5jWGFTK0XdlnvVrt9LCo2aAT/M73Np\ncDpce2R3GOSzeYyO39F43hZO6lgjQqk1VFvDhm295sB3hLSZvl5gFcLHcKpk\n5Eqx\r\n=1PoJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"aa9bc1b353c2f83dad7d39d07f5a7c1b8ac092a0","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.14_1539373006678_0.3664717215698394","host":"s3://npm-registry-packages"}},"2.0.15":{"name":"gatsby-image","version":"2.0.15","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.15","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"16dec0f7ed2f8ec19d3de53931ea539054583dbb","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.15.tgz","fileCount":8,"integrity":"sha512-cqMn3WGb4f9esAPz/eqUhYNsmEPCz1dg9Z/YXzDZohb46OVOIh/38zTGYI9zVLYav44OvestciPc6e12xn80Kw==","signatures":[{"sig":"MEUCIQCr94y22uyCgENbhKiYItfMpBXPUUHhd7YAI3mbi7KsTgIgPm/AL3YCqLIZ6A56iU8/F0zemcRzueU0v4eXAyB45fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxPjICRA9TVsSAnZWagAA7aEP/RTRPSBVtDUwNDI2aAkf\nhK8bd07qATI6jRAqjM0+wRFmPo5bowO5MAMOtXZ+eyB1u1vbftSQyImiqwcN\nK0VfPp2I+B0tZ22OH/fIxv19noy/Cdsm4KZreJO+g6B+6Baqufdy6UIlYJH1\nIabVQwVbDLP2WsAJt9cY9Rzca0VDtbbU/KPLBvunIOPuPFTWWwTe1X/Xae5q\nITeK5tXu4PXhzWVKYEGR1ZgWiBVtidJgzsX8nzdCZ1YcMP4jQi2RQ2j/7tVg\n0FlyfYAKeiMrhenaHAL1Fe2CdFZHsaIbMcPyLmN1jX92po4kiocsFBKldnxS\nJlMoWXIvJF8zT4z+Pe5ljy5K8AYLmO0KY5DbvLzLfEtoxuNJHQrK9Uw5ed1t\nrlW/mdbV8PgroGwIAXbwtLeMNI4edGHHUfEUkn5t8bmqooQPqdgZdHxXbhvm\nXqNp9vlwenb0rNkEDmcSBIkt/eqQ9n/tjrcgXncy3QIF3mxAogBO4IMDCjMD\nmzZiIvyDg1+WcJiJo3RbiQ7Lyf37W2H6hPtY5ly1HJUL80DcvI0nTrd2UN5O\noBydAiyyFGqkuyWTRI1sW4068hgFzBUxdvYCH7EPKPxl2XiESbt7kPZdNGf1\nLb6c2gUDpzVuQ151V1GF2eOdprF8C6g3JMTGOVEpoUGOuDZDtNbCF8mLOAuF\nq3Nx\r\n=XcSp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"1b1b1d1df229d98431020a6ff10004a8c50e5d32","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.15_1539635399152_0.02147575370661592","host":"s3://npm-registry-packages"}},"2.0.16":{"name":"gatsby-image","version":"2.0.16","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.16","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"6b58415f9ca37e75a770f6e98dda4591978bfe2a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.16.tgz","fileCount":8,"integrity":"sha512-XCH6PuJfVkBUmVJKtCt8DUXFXZ9MAVNrekRxKFompse03cJJDf3Kh98mu4Z7LtnqT84pGuO0UvHdd970JaRmaw==","signatures":[{"sig":"MEUCIQDRMsAL0KyAniPYtU9B1Td9cf+MOxg0+8gNSs920VRYsQIgCEZbfhNBlEiJJ5/2VX678qdWkDJMod44XMvcRvl4wzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzxG3CRA9TVsSAnZWagAAFV0QAIA+9aVLg13xB8uLAsfW\nX8so/2SkGUMEvPMecuKhvmkVhlIFe6ixwMDG8Sij8uRVySNEntxTrnqqIXPn\ns+NdAIjhA6Q3CKaOTv6l5ausvh1i1k8pbF2TpnZ7CLPjCvFuPz5OVmwJDFOX\n76GyUwLMXBKtlWYLZLJ3r+rhQgGJFfs7qRx5yEu5OXT2mJL368YqRM2cwjt+\nH5bUbGJHqBdO8k5+4YFxNFP4SZIyTfswQW0k7YFMayoLKj2sq8TdJhIjRT2j\nJNgB+uaqY5n7k1Cwu/59+aULl48MNuu18XzSMZZGuGHs6pb+Gb3yplPc0Qrk\nfZiRcqxtq3EtZTlOYQ9frpJtABT3BqkQLkjHmQrzRkXo9iSVV5tLJkMqjYYQ\nSx6K8dUGcQb0VhZO6DVjesE/292r41YJgRBB1Na9/7MnFZCo/gzJJ4Emm2P3\nVqca6j/vC2Xryls08yj+wGnIGykKJVo+fIuAYvuJSl8IneynUrWNI/XIyX8a\nqmIz+pTS7MyrT+OIJDlFvcUFiuGueehFW5McnFNk954kJhjGx/a22iI1l8YN\nw52VbYr1MAyWxWu3td01zfZtYXZvGNn+3c+yfZ38ua8eH5o6omD/N+Ot8sjo\n4AyQ7nNMyS0VnYmTvY1zj88IxLL3ykm6jcGiV621Isu5Fm0R57QUzKoIpT9S\nK4x9\r\n=sD4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e288e673949923182dc65ee05aaee506c396e8ab","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","react-testing-library":"^4.1.7"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.16_1540297141924_0.9920881201979059","host":"s3://npm-registry-packages"}},"2.0.17":{"name":"gatsby-image","version":"2.0.17","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.17","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"15030697b67a808cd5fc8283af80e22bcd1e740b","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.17.tgz","fileCount":8,"integrity":"sha512-feHLyuZXhV1GlWsAkK8RiWMjL+1C26PUCKFRkQYaa0BiZvvOXMgbeZuC/W0L7QSzBA6GdcOZeXEUtGuuavPFLw==","signatures":[{"sig":"MEQCIGZo7S34JvyCtfd23h4sr1awA2srSoKDrVZLt5z8KpkDAiApvrw5F3GfcGOUARWy7Bfid03HJSgXIvLnMWqcuEYntA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0NF0CRA9TVsSAnZWagAA6x0P+gO7O9aDDOdCpjFpSl4C\ndjJg0rOm7LTvpXf/pDeNcZ0zSsKuu3miB+RRHyEZ35A/TVNR042eKyn7jaSD\nI9v5Zh1l00kUKO2HPg+1uiVcZHwlZ7ApNB22HbW6/+eZ9JW6G0TZMmNrpZtt\nhYP8iJ6fVLA/gSRYpj/HHVFZUdbsoIVQBqeAGtiN9HHnaR9AYc1fCLj66F3H\nAIekxFGrLHTepseOG9f9SMGUbEDSnauhXzSYZgvpBF27TvbTg/zWXjHA7g5J\nObSU86l+/qWcDYvAXWxclZvcoPZJ5envTzI6w74nDxQEPesIbPOLP/mb6rKo\nbjts1Lglj8zJlpaambBwQKEUh73gXdxS4aFukm3c+Jj8uNQLemoXtNtuQtJB\nXG5eI7+7qwmGt2CkEDIdfJVz330/sHz42fPsvTq78eYsUQI28NM34VUMIJuL\n/8CLDfFXhUFsNHiBUzHEYR+MX4gSmjQrSsSEl2Dh8D7ZyNp96SEvdcvbf4IH\nDyOO+ztm0ycG2f3QSopEw5HezWSX01F7JhZyXj1Ddq7o8whqArAb3owEJWYY\nZn9Vce/V9W6xuolMGE6Nezg2YCzaP5aybjSR18zulG9Y3fEcaIsNOcq/lI2C\nayn610XJNeJz2X88WVwy6oCev5Ze5u2d1nuW+uy2bWyh1PppNe/V0IQ9hXDt\nWFe9\r\n=c9uw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e6d7dc3a7adc122fd6a3c606978bc79dc59fce07","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.17_1540411763071_0.9792744497786356","host":"s3://npm-registry-packages"}},"2.0.18":{"name":"gatsby-image","version":"2.0.18","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.18","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"657571b3c7c7c5c53426ca23a10c024568d45b74","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.18.tgz","fileCount":8,"integrity":"sha512-/M1tXe/RoPk0hwqMfq9AaPw0HLoije1SAuTNe5SlVwphfVvKByOqGGEcv3lJtitZPEK1IMsk+nBlk4Ih/egh6A==","signatures":[{"sig":"MEYCIQCoD0zUB1UD4U0KNJsCGRLyrKDPaeFJBtbK8/PNWVMeDAIhAJ0fI+b8A4F2xYKK6OjSKfoJq+F86TudqoilxwXRlxL8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb1yXyCRA9TVsSAnZWagAA3M0P/RJn2Hv7fvBK9uhTQ0Lw\n402y5BEOlGPAi2XS+b7aQvIGnLN45ixUJ8e8ZOj0DtM+4pf7uFDrgXn+nIZG\niYDWZ74sBEJiWsImBnxb6856fGWEezraMEwWK58ZRc8pKswlhxCngNOKnbjU\nFjLaoH1h/GBXG5Z2QQsrQBgQz3DS7/yZEdR7+uPctp921QOetkBNTh8uS8vS\n5edgnGL0Uhoa5oe71/CFwTv74W21wMj9xjuAu3afIXYNhcn7F0vOxPyaHIJF\nNNMfO2gJqUdS04/WR6AvKDzc11qWWZCXbrobWYMu8c3L/lbugUui4afXrnd/\n+NPNYqr8CUeWIvhTj6f+nltFJI8xoKZsKBzewbwW4mhFCGbDxGtRYJ6gvJOz\nmVx15zqqIW2z7b4m4dcQhBdWca4QMJSjJdlxGlsLG7cM1CkfwBWh4NR2hNE8\n80NSFzt5Btn9ZKwtoL43nOpyzCMeIXH7YqzdbYK2bI20rbs58mf/p9M4sWao\n21h9eobAx09X7FN5PyWMf7hGHZyoJBGi8+TKRWrNH3H7hXtAwoifLyOjPyxa\neDIG80+6RZqIVzFCi4lbznZNvoF5ASB32+Ya/feR5KKlOd2c7f9YWw0r3gl3\nK7v8rQoEgTWA+3rDam5quFXcS70/I7K7u34g+GSDWtDWrjeh4X6pJ0JBKSUm\nKk1o\r\n=MZMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"dbd71c33ced0829c5f4bc552127ef80b4a7398a5","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.18_1540826608993_0.6639760296858164","host":"s3://npm-registry-packages"}},"2.0.19":{"name":"gatsby-image","version":"2.0.19","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.19","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"375d570e04b3d442b50e409fd84c272c40d7cabf","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.19.tgz","fileCount":8,"integrity":"sha512-fKWEYD9LvGH97on12xlwUqwz3RvOV3oqW8tXwEDBAUM1tsN9wwc2k19CPVCgWNbFJd0dVe2ZOQB+6Az4elPmWw==","signatures":[{"sig":"MEUCIQDs8dx0risJYfBu6vYy24hGa3YFy2IeG07Jitd0qY9nxgIgf0ChCUXPLDsqLZ0g3lxXX8CwR7lXGrwz4vTgAZb3GDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":38306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2KJACRA9TVsSAnZWagAAsqMQAKIj27Tohn6OyO9xu3ur\nWNAHps1bRhvBQ8029G0Jtp4DJCkR0QLqbtNlYwhRxAQpE93xSG9poQj7XbrD\nyzh7yNi5xE2JQB8n3j7+yO2rhk5Xezp6uS7qYSjne9f1Ptc5/FI1zlzr/wrI\nLQHV0SymiUQrh+lWqLdeZezOTgznYs39zeLcq6FmNNRh96Vbc/ZuBi8csILh\n6+nEBXgk5ikXv59W8d8LjtiZ46apVUODpTFua9r7O2EoavPyDddQYr0A6TBn\nSeQtg0SMywIyRty5TSR6S1hLlRs03LKWNcSITi7iex8M50ezK8naDbJRvBTh\ngQE3R3YOabUH7yeiYlaUM+37vJ8/mDhyZ16HhS0ITzblTNKPjdaHaWfOn2sF\n6D5BxiEiAGnpcTWKsb0uao2y0KLdJOe7qhCt2zvMGo3E0jwaTYx1H0nTFuE7\nK4SGdh0h+RqvrSgC3s1rZhF+lLfjLRTl2crOjaMqL5LVXOZPoKU9VDYXqY8S\nl5AsyAkShnfIEcZ0Thvo2sby1s7+mcbYZ1ZvQ6nXWfiFV+Ea+v+PBmyvr2Ir\nVAt6tw8NcDT980C9Ajt+2gNZARIDdBRTAB1XYSfAGW/n2rFQOONlSBrhmaTv\n2xO+gfTOPMYhCsOd5Mz96Y3slKOE1FtTMxX5B5yZv3ptijO8mNSPYttECprT\nDUqZ\r\n=qBDT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"ce24780bca47ad53f52f8c0eab86e46f8189cf9a","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.19_1540923967789_0.6527111595453652","host":"s3://npm-registry-packages"}},"2.0.20":{"name":"gatsby-image","version":"2.0.20","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.20","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"89e85d8c2c2ff8553f0831ffdde689a3679933a4","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.20.tgz","fileCount":8,"integrity":"sha512-AxLNe1W9QbVr23iD7h/ryoBOo1PfpjLm2tgZ7ITi5NQqMOIn23YCUfWtSWDWQFd226twyfsHzJFr5XZM3Lyl0g==","signatures":[{"sig":"MEQCIHOF5WAEYvPSFkvC3/8ckI1+yEd3i/5dLOdlwHyc6MnlAiBTUwizWqTZ74M1963Lb+tKihuxu8k3ht5NSKktob0X3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":38529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb45MwCRA9TVsSAnZWagAAwUkQAJ6sQWIJ3tEJnJFAWAAa\nqPtYtfdprqcWZbrjc5MS/Jp4rapIsm02f9sshcz2npYI5SWi5+XQjIWfW7qP\n1IRcR5/KNIqvHGfQgi6VuxrpoBW6zd7MQpKZVnf+DCICJw+vQP4KT6omH0A7\nskA+QENjcDuLnL/GJtxGgQEypj3DPAPJFc1TBhfXKBWznlWw1CbePMOtNcC5\nAc//E3LR0030xfJC1hU+uPirRnSB5lKRycw/4l+IcWRaUVJFfNdMYbTnNk5E\nwS9pcXQQDulywZ4Ty3LT+MQAT36GgfpEcokE7RPFiPhhlqUDkv2z6MY8LoEL\nCtbWl4uXaSIKbTJ7WdYWnXSJjFillvta7LKcL2T9Ngr8RTSkwNnibz4i4+qe\n864VO0ONG9bUAtrsI50VcWS0xY8gUOKMyqmwzf5mCIhYxewm3fNPCPiuz9Gs\nI57qdcYpi0iYdyVZANvi9lcuIwYuDnRt3CRsspqnofSVcTnPz37hGmevBdyo\nxH3Gsv6OhkUUdeeg/Fh0FmQjhAaUPZYRKVmzCFgr02KCs6YzCS0zjGd701Hz\ns1Hs+a3Cd47qhmFTf11KP8/x7CL/NBHcCi54qounVoGdgZi0oj3T9S+1hekV\nAkkP0JBdyRnjWGGOgNvECoR3T1QvNaIKaw4fwtkpGFyHs22WeMM+azeYMSeX\n6X7Z\r\n=11GJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"f9714a5646523bc728586e3692190507ad68e6c1","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.20_1541641007456_0.4679976072729537","host":"s3://npm-registry-packages"}},"2.0.21":{"name":"gatsby-image","version":"2.0.21","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.21","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"adf418d63ab6a63deb47f9b08702f18288e708b9","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.21.tgz","fileCount":8,"integrity":"sha512-vZ8tR9LVZz4Ar+GG0f7MadmVLvM/pQwxDiju0DgxkA5DcwRv/sHDO3XZPLvpTNRjEmKxw3l2pVO3m9ru39lFBg==","signatures":[{"sig":"MEQCIEa6uZ/XAn6jlm6eP8n7TlWKodusgY8gUyrC8s2KegUkAiB20cyw/w6PWLTQFirG1npDuG9pn8sDmONjS35YepUOuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":38785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/b3UCRA9TVsSAnZWagAAet4QAJ1KIoWiSA8isLMlxFRH\n4NdXCtYixa1cgASZwB9JsufTClWnOdLs7U3LE6GRQQbX4NUw/eJk2qA40uz4\npelBbRViOYIOn57harU1UPLI2PkjhijGZDqBslg/hp6uoTiYQ3cT4KQ2T/T9\nrw2DPoE1Ne7jIzpgdj1NKVnzvwbDGdEln5SpDkY6k5/shQaB98IRd7NAsRCh\nap3qmUZqwt5Y9VyXAkqisuoVeZVuBAcmHSnfUUO5F3tGGkRxjgf04+mm0Abb\n7h+/Ucr8GdN7V544W/soYdHOnd6eFtuiLOO2nxcrWpvO/8teyIRvOC8kMMfX\naK1IIdZnJCwMvadECi2yfoQlVjmDD2Oxa7UCa/Su8xB6JDAobsprsj7MhVNH\nJH4xxW6ejLlLg9JxFI4eTWcYUe9D7ECJwmFU3ZNXWjKIbP2rmZagGZ9d8cMX\nZCUpLK3lVkvBu8LQ8+ajCnRc+9vAVsymtoyAYZquhGOBrNi3m/pi7mr9DVso\nK7js5OggFYEKTmd+B2HWPe+28EyXq69fwUU1i9mSuRm0oJkoD26GXheze3eG\nJg8CRgn0jP4KDSz+8czhrnE+a4ohkGkGJi76Oj6/XrmtX0oWX3rBR0iD2c1z\npCbQ2Yun3HUyIz4ReHMW86xQJWsUoOhMT/dYKDaweHdACXkd27Yi57h/YiNZ\nga7q\r\n=Zvg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"a3e505c256d71915ce80f4083d3ba1f5a251d507","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.21_1543355859210_0.06324375358746859","host":"s3://npm-registry-packages"}},"2.0.22":{"name":"gatsby-image","version":"2.0.22","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.22","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"67b82f0bc9adcbc49134847cfc85355b540fea96","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.22.tgz","fileCount":8,"integrity":"sha512-o8ILGBXl9W8aIIwy9EL7HE2bOMQePMQztXly3FI10AMWXJyQLlQHhHzZceF1DMjCUbbCGIKRdVOymQdjm6+pcA==","signatures":[{"sig":"MEUCIEvaJVSNRSqhN2/ZgDyMRV1P1U/DqaSLhthZrSEjNL9sAiEA75JKKzXiS2FQOBn92PhpaH5E/GAehFHrHSzOkHAPlqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/9fMCRA9TVsSAnZWagAA0QgP/32TjDwAxl5br7zJ81Jz\nfvGCanuixxotZhNPeoEufzCT2Mg0AcX2wMWcKsOsvOw+WSnfV/diq7KqiYFV\nmFbxfk5Rwose2o9OFeSHxNKKxR9/xibSsavuXtV92G61k7xyuHTNqktgI5B0\nXt13TDOTEQbmjJoM59/0c6RtxO2+lkjKTEtKsWV4Jp1SpupExNCwtRMHzfho\nftZ8vat2CT1aE64MfS67WEOhs0fEEUD9VA7S6RFhos6XsUXhtKH3Gk1+zRgu\nKawIv/LHAdxto4mhXHkHdxa4yhQwTDtL6Fv975T//mHFf5pIDdMLNIwjz2I+\naP6OV1zs0QKY2ExbuY9s3djlESptS1E8KZfrL/s1mMke7Ta6FLl1QzSg3U0S\npzRu2q00G4hrQdOBxQ2S0jKwSUXUeRrscT5tpoorp9NoCjnA1Y28xCCueb7F\n7/1eXRlTCFRnh2vo1BIwiU//SgsWaDuzoIgxI+Wdeb2j1JDF9WF4iGQ7YkUR\n3V3uBIHO8fXib26GAqPJL626Zxz/SO9RxfLC6HHHQckmGAMXSWDyggWZtWj4\neUHt4FUc24nQyOLHzMs2Kc06Dz6jxo91Xzdg+YaCarTKQO8H3VryyoULQiaU\nyjRuYAlbue9J8VeykxFv7NPJ/0I1WNv/q13029lb+5rpnrCJArTn35GYeEoj\nJaHz\r\n=GFID\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"a3e548956009fecbcbd5e55f11e7803cbf5253d0","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.22_1543493579441_0.013399616556621474","host":"s3://npm-registry-packages"}},"2.0.23":{"name":"gatsby-image","version":"2.0.23","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.23","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"64e6b01a02234ef71e7e93500207fd9e7f77df86","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.23.tgz","fileCount":8,"integrity":"sha512-Ab1wQI9nJQxF4TTgdYqENs5tFJg6voBp1YCRUl7ppjSJadKvmaoneVQFCSGm29WSK/DgsRE0MVQ1Fe3L+ke9mg==","signatures":[{"sig":"MEUCIClKGmtNat4CMDDXquUxWS4ZgJFXCs3rV2h312MiX3mdAiEAt7aADd4p64MFXbJ+oO5S0OxLAy52GzdCO0b+qhIST9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcD56uCRA9TVsSAnZWagAAMYwP/ihAawQEZPfBR5NY+/au\nMjeTW22bdXmSUr15qp+poN9XAQCdesW+0JF5124RCYPLpQLuM1fHooszXhRP\nAW4WzSzSKuXwnXdgj3Qbvs5BMtMM8vP16HII+lz7eKsXAPaYkazE3dqjCjaT\nCMaP5gB9eAa7Ae9WqlA3YyYyBUuSBAG5xBRkJKg8mzGsqj2n7rY8AhumlUiL\nDwiVoInWmn+sRpKxIfKB+9mGH2HmiOhI6VxvYXNX7lRfLigJoV0+//sTuKH1\nljlNgs2e9jpbsPLclX/KXTCtOOHLsdZG3vs5RwzPk6ydO2dh683iVm9zM6aT\n/VBHAjAJRXCVzEOjzVEkDYca4j/+wrtypFvWV2XMrOHM4yEC+QZcCaw2Xja+\nXQCr+RcrlXTr9zUV4+qJ5lLulm01fPbwDPmXg1+s3A8WieweuI7OeHd4Je6V\nytBd3V6jtN7+G3fFpxrkbBjJeWzzw3mTH9xCRqrypAXh9FMO44757Wwx+jCR\n45/k5CILZ2EYVkhdRzB5m4qKjSoHl7QN5m758yKnPAl4iCXqNsEAVCxTKGxv\nEtb9H2sWevdWdjJu4+ql4hVFD3R/pXZ39HTmBBIiMwvpNyUE4GHVUoUFqf7f\noYS2eeTsKQ9NoI6jMVKnPG8MefNk+wBmXMuG/7pwIrHnIrw4wNGF3t/wreJ2\nRiFg\r\n=hWHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"a3042fdc8a285caa92b3c53d969a14f5197cbd02","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.23_1544527533277_0.034504406023805334","host":"s3://npm-registry-packages"}},"2.0.24":{"name":"gatsby-image","version":"2.0.24","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.24","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"90ca5a9dfc377a63807c0d6a5e1a7ab152ee7f48","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.24.tgz","fileCount":8,"integrity":"sha512-x4aeBosxBKStSTSsb8U1NrQAo++9YalllbRKI9a+14vfrlrYrKXFj3S/8Y9l4ql7TcwRJBibDQilw+fd7YFwyQ==","signatures":[{"sig":"MEUCIQCabUN3t/+QG5ZPmfHO6AODkbE/id/NQFDNJTk9bf0tswIgVxijmrnn38HKvT4gXobXGtV5xh58JXPCCkqcNOWYIo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcETkDCRA9TVsSAnZWagAAzyQP/AwheBwmjl9rQZ2LrHfy\nFwP664jMBgUtoGdeqUiRN4XqMFvq2LHnkk8EbBwq+8A8bZX4vNMFN0mUGC9X\n1dFAcrqH2zB8Skl4n+IExtMSLmGSuSzJPhwdzOhY9TaTtMy3xvYpwPgdgowl\nNRK6CqlNh+TSZQX+HONozrzJlYwZFnkxiEbtKYuZN9jHLq8pZl4Ryp9JAEOf\nzSrOKzTTaQFCHFFVBCdayoQCHtt7uG4p5iovDSB7tttgQjIj5Fb2HKUJ19/O\nlpB/V0zmtd1KmFPeVRbUKxtq0UxQvK9ZzY0bmLKSVqrEmWjZ8yYlqf88jJWE\ncr+dOFWtYDdU48jx07Drj9pxkEmonIpQcn4ERpcm2Y8fSPNajIBOeETQfMgU\nrCDmAzLghJK2uoWU+WaZv8Hcm5R+JQ1mDU0h5aCohaDhEPYnhxo/vO2kw4gF\nFlrbuh9oKg1VcyZaH0bBnWeRa1x3TvicElLcFqaScTxB6sVNaScXKOMXlARN\nBhVo3ip4LKdhtVyfKc0ruLr2Ulf9b0nr83177aHypgXnQdSxpCvyjj1YiJ1X\nPTlynPlDl8u+Si6Sk00WrugP7dD+SmtbyLINIGCvDsrhVW7OMXL+Yxd5I/6e\nor5/rx5isaSVBTMnGOopgjWf9O3L1U+Or8pKbhG02HvktVl0SCLN5Pllo18V\n6p9h\r\n=qwOw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"39f3c3a99edeb608e8a7054a329a01f4a8da7251","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.24_1544632578095_0.43290741939588573","host":"s3://npm-registry-packages"}},"2.0.25":{"name":"gatsby-image","version":"2.0.25","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.25","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"30547589701db4c4c3e954609201fce2103ec8de","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.25.tgz","fileCount":8,"integrity":"sha512-Czjwf1m/8p7OX1hEh5YKHIFgqGZylGYKqXcDQ9myOQW3qOZ3Mw82ERjT6YSSHTQsELK27LgrKacL0YvvPR+ZJQ==","signatures":[{"sig":"MEUCIQD0KXtBS7Xyb9Ap3kUYopCANyPRPed4cVxLwSEPAje/awIgRG+9UOhIPnn1uWUUOblzxI7bFG6Qr+5DsWObVSiXc1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":41276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEblbCRA9TVsSAnZWagAAG1gP/0ZHb/YaufPlTRC4kpG5\nZagh2QEOlbGW85nBxo0S2c5/L3Bd95JO0wd6XaIehjOmKqA5lM4lMplMW/IV\nfkU9uR96t4iwZV5JpToGUQRZnjX4rQcXToyeIDp0knw8A08Soe7jqJfi/JLw\nRFfQPMrzdN9vw4XY2y4zAAZ6ZhFUMd9/DvBBnhp/roLNCKukI/WReubJgiyf\nzMzj0ePz6laePKIF/lgjsuAHgfOl5zSMHsDX1+jk+mTmVteK3Zkc6qz1eHXC\na9U4rU22pSrJGYAHhwRArmj8kZJ5DjK9q8zfqs+6lVmzXXWe7LXe2m27nqCz\nUf9DOmcnqIJL9L/y52VKrLO5/id999m4nK1x8xcs42XsyIz/23KTnytPL6Gv\nlZ3PkjGGJYariELkqinNQdVjfUmb/9o+i/xzuT2UstKEFFjjFAA0YXEdCGQ9\nrsyvtT4yRt9FjX9cYgXEqzDrhC1EOK3zjRZmfUv1/A012Ulv0bGs1D/yKc1v\nHoHzTq0luB9ray6SigAmjWaRPJ/rJZHavswoR9jWQi7f09O+g4Vy23LhU3EL\n2gOtReMalYewlUKyRKtslFOnKKfyYa/PKdFdqpxQmcefVS4+2U15liHwh5Ek\nTRGpqoSbT1WE9jB99FGquUmE4tk/4HFEnWzRhfGBc199Y1n0CzwhFAqVUkp6\nI94m\r\n=b9Vi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"5a08b7640c2db2c65696be56d81afee83b2ca9ec","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.25_1544665434059_0.4769927516893464","host":"s3://npm-registry-packages"}},"2.0.26":{"name":"gatsby-image","version":"2.0.26","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.26","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"ae97a62a49237b65660ff9c1b4a559660878bb17","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.26.tgz","fileCount":8,"integrity":"sha512-bvW9jvrGsc0lC36ikwkLCDicgolyAtM/Z56aavXy+aVE0GRL2/RprolRITIjt1ff3pzo+n0L7unAZOoR4oUR1g==","signatures":[{"sig":"MEUCIQDxpWvrKqxEaxEDeQ09ZvjUkMMWB8GiD3byfru6oka7OAIgPQSqyJiQabRscTZ6nNsk3STdmLUB1zmJ9F6Z5P4POu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN1AsCRA9TVsSAnZWagAAJNsP/iCuHimF7OCvSZUd3onm\nppkUHDN4EzRAVLXZLxtiIyfAcZ44KhO0Q9OmgSygAaHGiDlMPxcnCdH01UNi\nWj157JzdkF4suf6fxZde6ri5kBWQaQbVOMobVD99p66+IkVzfN1Lo9ORVJhx\nmQekz0ECIQa/PQSe4Z86NqZtj7QuiV3IOBB55ZVbVJoAO0sBikpnA9n1Ze1c\npJgaAhy8xAsd97FE1QTWa2lu9BlZNmqjWxDRbYt9qsba1McOMd+eyjDYHxSy\njAuP5PswtToZ5jwCCoHjrMAsD4tj44Qvd3H5ap8DJjkqEXP/ERdPfZpTgIq2\nPsoCY4nGDD8+BCENWud+Gw44kHCa9Vo4rIY8q0LACQEVcXDav8nZzGqdnGWj\n1z1rw+/rriCWe40A1HWlMlofsKSamtm6OQ1r2SV1X6Mig5IYqk2fFP4uHlmN\nkiA1On8eNC6P8U9Uh1a/b2ENy2T+Mb/tYrQw1uQAHpAk9s7JdWcXkt7AUqbt\ncZZsdq3hA13n2rNb5rmirJ7dNtxQhnaEUnybQAMNxhL+eOq40NPvVHZK0qeQ\noUbFlUWzTI17noWsP5TmwOo/+sjd/aI4DVk3TggjdXx3HCibxH9d0uxvKR9P\n6vUaRUJlMcJNjQ86XowUHh92Uz5sh6ZQs1pgnY5TgD1Q/IFYWNK4L3oxNghA\n+k1i\r\n=jzYc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"c232a58a7d8b6813a9b1467e10a52f9c979e7db8","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.26_1547128875941_0.2392568578322618","host":"s3://npm-registry-packages"}},"2.0.27":{"name":"gatsby-image","version":"2.0.27","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.27","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"2ac20c9c141dd012f8285c34cfbb040cbc60b3c0","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.27.tgz","fileCount":8,"integrity":"sha512-f3av1nSSU6r0qGALYJ5kPRxuehiZJM/MAGXhGKCYi3eqbfWT3NERDwpjhSKHYa/P7s4gc/jAyGJXasDlxztEDQ==","signatures":[{"sig":"MEQCIGmxD+29QIQMqxOn8kIUinX5CTo7coBDzfm0wy4L3aFGAiBf685fecaOzj6ODn/YdvanewLnf37+GqtlOCw271YYLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSIdFCRA9TVsSAnZWagAA1iEP/jtsl3FXYFO78wr+1uS7\nd5UMn14d69Fhus6PqQEEA8aDDS6Q3Te+oU11LiqS9zZMCZIb1dhqh7h3jnsO\nZ1+QS+ltbpTr8Cu4RWgMhso5AVBJdCph64RalyEbvZQ/Qp9o1cFlPnzWr2Vc\nAj6xt8afv8PhqIjL753GThFYnzvM0oeHjXW94Hq+MvK+/L5fjv1g0I0OvQW3\nnj9ZOAzZbNe4kQi1loHAwfr0SVJrqk5YpaRXf221YqiMWxQRUy5Y9z5zd0kR\nLhN6sJV5nrmAt4b2GyQPqax8ysVBnJJiyhI1uvU2oKTtwwdx58eYc0YIwtMr\n6mBAhp+Xfv8IB26Y9BAGeWWu7IlBFdMqAbfzkFZVNtOju4aCadddR6+fiJbC\nFahiUpdf0WfcHuaEDLTB0A/9FEeSOmqbE+mok6hJYp1YXTviGRr/sex6h89e\nWTkzxsN64R6uWYK860zrc5vEspQEShYMXPtbDwGf11NL7NpC1V93owMF2g3D\nIAn0d5cuUexcxFenldsW59SGD3ZN7DfFLFqc7AC7S7jDDYeIrav7Z6mcQIY3\nBAJfnG6F5TMVhl93m2cSJ/e7RBtKNc0J5m9rtMNF0LV/+ojH/g/coIqtMJn0\nnu3Fys9Ucu74kHl+OH9rdAb0hmweMyUq+EYKs2Y5R+PUIJPrlgGc6PQMUpzp\n9V/K\r\n=R1Z+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e9cfd13508cb3a6951699f23ae3873c5eb9bf74b","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"m-allanson","email":"michael.allanson@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.27_1548257092382_0.015260158135266488","host":"s3://npm-registry-packages"}},"2.0.28":{"name":"gatsby-image","version":"2.0.28","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.28","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"368734f2976d4664bf46c014cfb7ae33baaaba7d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.28.tgz","fileCount":8,"integrity":"sha512-GAJ2nZoGO1EXnB6yJN+fm9MWZxhzoYla4JwEZU7hP0VaNjZhS9mxuRGLfaBO2PxZ0k+abO69/tiRIO+NuxMg7A==","signatures":[{"sig":"MEUCIQCHkL9igfjfr/nhw7H1GaVNisc5U7zZh/+eGTkEJflGewIgfFA/3c/7k2reGsKbYB1y4BdagwVZTC+z7NQgIuTojBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":43326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSuKjCRA9TVsSAnZWagAAOCgP/Ax5bJ1LzeVZ1JH+xUjN\nuoIpu3j2/OTi03C6f2hal5Pjm09nIYUDTvJjBwfVOU97XNSdVNPSPsuaf1mw\nzDWLM8NI6Bfi96Lfj5OmweELgIjplkXuW2BpGdcuvX4qCiRNjQyjmi6E3mIz\nCrcmT/zzdz16+GeWHlp+z+jCuhJ8jlDilNHjnu3cjI2TIXwWV2RtyNI02XK+\nmxZYG6DBdTXdcA6AnHXv7ghxYQiaG+LFEfrw6UtWMBAw+dTXG2QTqGhrvAE0\nGQqosZhq0C2qdA8pI25mxEdQQF3pp+A99NmXoG0mGlEFAy662C5B9C1xRU6+\nhlpmFSY8iP3/L0sVQX3gYDrSmkca29ak56C1FZFyU0A5rG8CpksEKTcaplti\nOxuq+bPIbXjmDsjWTfIA9o/JJ7MboPv91wNTZ2gZNjG4XXSXDOa/zDFBUFph\nxmDRRhwBSa5+BBLGmU456TuH7idTU1j09dfR7Wu4HAiU2jqS1EPOjaN3DNDm\no9Jnvv40U3E4faTBOKdk6CDEBN+1otyNjRbbSC4CqZPoUbCg2unnmD2/dANw\nEKrj9fg6TAydfrpEYmUwNju5T4wsOLsFqbtxtvktCYtVdbHepbrVXBWgrPwN\nyP6TAv/vQkX+xfvhOJOdUwlQ338ftbdyY69yjso+iC3fgb5kevuoEsVMF5NW\n/uvR\r\n=R5mR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"79bc7d48c84d4b36c72a91e2d5e1af2e8ccf6378","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"freiksenet","email":"freiksenet@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.6.0+x64 (linux)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.6.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.28_1548411554661_0.7650244516531755","host":"s3://npm-registry-packages"}},"2.0.29":{"name":"gatsby-image","version":"2.0.29","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.29","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"38475842b6e9a5d58c4e3bec875179b959c7d7ab","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.29.tgz","fileCount":8,"integrity":"sha512-kMB/MUbm3qPlioJL8lVhLy000W7a6fA0DKpyTS1MtpixoAJKxwBTmXv+EYZPFizazRbmpHaCXzq3kk9qMhEEeQ==","signatures":[{"sig":"MEQCIHVtyyPHNyC8ZIEz7lRk+oHn/JeN4eY72D8sbhchQaq/AiBGVrOTLzAa5MI0hEHdK7mRxNG0C/YTk628qVrv5dSyDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcTzS0CRA9TVsSAnZWagAAiAIP/ier+YKu+SdspJca9je7\n62h/FG1nof7RLuDmoGc6qvnVCr4ObazTtE2bvPkqfTpvjG6N+ap3BOtuR7yr\nKywMXNAsVANdB7+gnLNWMXxYJLMiGWOdwqitsYL3RALUgRUfGu+9km0tGZUs\nbtg6LVryewpb5Tw+b+H8cTt4RzVXBrmEcpPxiooVkjuYtbYyYlX8jq7MXAfj\nFEZhr0pI1O6JWrSgCwODpFjUHmELi4MlbTzWwmVP5ohAC43sTHC2Bkmyop0C\nE7B2Z15fkhOVa3dFPrj7BE0+c0Wa5q4Q3KXzDdaSZwB713sXd7ZCadyB0WM5\nqrCNJrK5jdZ8OmcMNBl+AKcO/1XqVQl5jt/2iCcGHLmFcxfDW8LblY5thW40\nEQTSOwTGGe6tJz+MEt7cD3tLB1x6cY87kGliueCuLePPGQCyNevW6LSpnH1u\n5k+hpxvaQQ/qLh/q7PdSMYLSQwfjA3CiF6EsiaEcVW/JbQQsKcWag8RN/rd0\n2ea7D+rdYh4BJS0AZBR38HtqLu28fQxlmpgpqvEXBAeNJotT7ag/GqAx42Ww\nCuF1ztN5wOcM7w7nI6yUwuBZGHWKFPlrvCOWtpjNrZAapFmtHhgczD7NiQHo\nB0yWr83tYLzW2oMY0sIZeS2npJAL7Mmjjx2IO5FSIhu8G0pExn1eNIyFok4M\n96I1\r\n=vmvl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"87652543ef7b5773bcdd2dc2bfca393cd42b52c6","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.9.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.9.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.29_1548694707902_0.8217096642816752","host":"s3://npm-registry-packages"}},"2.0.30":{"name":"gatsby-image","version":"2.0.30","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.30","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"8aa3cd89998cab092c6d6281700832a065fab2bd","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.30.tgz","fileCount":8,"integrity":"sha512-CBkJwEQgpZ1Qxb1AsP73YHAUL8NSTqmv75h2+eR6BlLBmMvbEqZGTMnMZddA8CCrbICrSQiRupDYPl4n2vzFCw==","signatures":[{"sig":"MEYCIQDRGpyd61WJw08zVq0IOwO9ikc0dBO+LsC9wl0bvbYKsgIhAKvYokrK38y6j1Wix6xZYjcA5kaNfr/+p6yGxnPfhF/h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcc4S3CRA9TVsSAnZWagAAT54P+QCUTQRwOF+C5eSE6tUt\n5C0T8EL5GWtqpWlne5LY3KoaC0TPfQZVwHAKBY6LvSCYABmazMvFElXfRz4/\nLTNFXtDs+g9heHKBgUZCa+rEwRwPH+tp8Ry+RQ9fkNgcFBwh4mYmeuyuZBMK\n9pYo20TW7SuoS1f+hWpf+ZsMeM0I2mASuwWvW3Jm6MgrGJpWnEQdF6b3jN1g\ntZD6f750Sa+0raMLqZiNPk4AG3+N9z9zltz9HNZbZDrMuoquioYGlMKrMpTQ\nJCBe9igu9ms/f57+aQSjyrtt1EBy2d94/r6x/s6bU9iNYlcAjA+CdH7xUnI1\nMMjCtg71rybVcRLXeVPaGcM0fP67vwhBobV6+VKvGxuPPYivi59h1qM2eqQx\nsAWXVmNtxqBKw5vVyFcCTjHkGns6mq6ePQJm/e5EvthArElelUobpvyYQA9q\nANZNN6aVBLnJO7aTucoQl6YuEdqdH51/aLs1RUBOLV8dpVXwMJdD1e+sy/Ly\nT7j0AaKoQp7ZT7TEni4jAJavSXLzE8qE4IB3e6UMMmxGBPMamJour4kmyJCr\ndEq4OLdmvcwt1AvSA4SrC2VruxhOllkuLdsnbh7ntNdqHIWBRFcaArIPdlhl\njUtkCWEIv+TTjS3qPfGtPurvqImlpWGh3dRBVtjpDQizniYnKDUxX+Oa8Ft/\n/vLM\r\n=TSVb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"fc6001c6f16f64f4a0eae17d1d48c35645e00ebc","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.8.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.8.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.30_1551074487006_0.3989332090718998","host":"s3://npm-registry-packages"}},"2.0.31-alpha.0":{"name":"gatsby-image","version":"2.0.31-alpha.0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.31-alpha.0","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"cc8e6d789084fef2d3468a347810118eef12c156","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.31-alpha.0.tgz","fileCount":8,"integrity":"sha512-PnGViKaI3kXi0iIFAhHsmtNc0O7HpHFBv/eAnBWbuqzb3hyobjnMou3+aece2FjV/kCRCjpqx2lPdQB36Fq5FQ==","signatures":[{"sig":"MEUCIBL0fx3O5tkompezr+7GwmFJ/Mm5bgJ8jJ43ezCkbnrsAiEA/Ow+Cu6tOGGHEJ860IlDtl5jzW2JLfgWZGzIW0WmyRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfNAhCRA9TVsSAnZWagAAAjcP/2dIa/XFhf3V0Rnv/axw\n/TltCe4fL2QGRmSMfg1gEQmFKTFW9/o2h71JDNdSc8JqWyotRsZxtOuJtclp\nAkH29mE/xtl/9CceeF31wbC0RVi20/KqXo8hLhfkwNlYiqj8PtD9nfd9jRJW\nNiSdAkhSJ79+s63/Fg8V4JH5k0c4j2I1cjj3KPD6jyJuBkPgc8Oa3BAVSP/x\nx1IG1UqRWHKQaMYBdamzpGfvxdq+BUmWCxIssRgB2vMym0Vq9WhNzn0CW226\nKqiVhRLFgSsQ2+E5Upf/dEri6WodOakLpg0vopRSTOD7esoXqxDTs3jzLqyX\naRnXrpfmCHPLZ9WCYgifPSl+I0eyle+uhDy7kTScAKvacnSOkJvFAocVoOLn\ndM90X6V1tTm5XyZ8MJliQpZIdedCNrWgnsI7DKbd+29M5qRLtQeehVDkcjCf\nzkShXJ0FGLsziiQOUhifsWrRrG+wanO3+IjhjSlbOzwdik6/6pode6xm3sZr\nj0NMZA2PYoQfrfHanNlxALz18Cvp0Ul++xr0hfMk3lVS14iJ6YcVnV5C8k/y\n4uBIE2B8i9zMSNxwoP7COPzwUBKi367w/sYkNUmTTG5nTaxnycrkozwGDs4w\nkWV7tcacG4gzto5zJYjP2a01egnK9+ww9g7GU4jqL1COOk3EkTueP69OdLWh\nDHuv\r\n=gYY7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```bash\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:\n\n```jsx\nconst NonStretchedImage = props => {\n let normalizedProps = props\n if (props.fluid && props.fluid.presentationWidth) {\n normalizedProps = {\n ...props,\n style: {\n ...(props.style || {}),\n maxWidth: props.fluid.presentationWidth,\n margin: \"0 auto\", // Used to center the image\n },\n }\n }\n\n return ![]()
\n}\n```\n\n**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.\nYou will need to add it in your graphql query as is shown in the following snippet:\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n presentationWidth\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ---------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles of the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles of the actual `img` element |\n| `placeholderStyle` | `object` | Spread into the default styles of the placeholder `img` element |\n| `placeholderClassName` | `string` | A class that is passed to the placeholder `img` element |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `onStartLoad` | `func` | A callback that is called when the full-size image starts loading, it gets the parameter { wasCached: boolean } provided. |\n| `onError` | `func` | A callback that is called when the image fails to load. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n| `critical` | `bool` | Opt-out of lazy-loading behavior. Defaults to `false`. |\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- By default, images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n- Images marked as `critical` will start loading immediately as the DOM is\n parsed, but unless `fadeIn` is set to `false`, the transition from placeholder\n to final image will not occur until after the component is mounted.\n- gatsby-image is now backed by the newer `` tag. This newer standard allows for\n media types to be chosen by the browser without using JavaScript. It also is\n backward compatible to older browsers (IE 11, etc)\n- Gifs can't be resized the same way as pngs and jpegs, unfortunately—if you try\n to use a gif with `gatsby-image`, it won't work. For now, the best workaround is\n to [import the gif directly](/docs/adding-images-fonts-files).\n- Lazy loading behavior is dependent on `IntersectionObserver` which is not available\n in some fairly common browsers including Safari and IE. A polyfill is recommended.\n","gitHead":"9992c123f46b00c1a8dc660331f2155c42cefd3d","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"freiksenet","email":"freiksenet@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.6.0+x64 (linux)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.6.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.31-alpha.0_1551683616616_0.9672953227012828","host":"s3://npm-registry-packages"}},"2.0.31":{"name":"gatsby-image","version":"2.0.31","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.31","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"07bc87a92b608630f50af7cac4315131be75d01b","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.31.tgz","fileCount":8,"integrity":"sha512-UQju2WMe3B9AfEaxApP/HNjkJMS/mJaROC2KCq2qEaNyuaSPNaGGCM1YACjWnC28a5vy6tOZWrxTx9vsBThb8g==","signatures":[{"sig":"MEUCIQDVoo3RsYYdrX2GBmZADyySA8Gg45rYgRO0LuU8bYMWrAIgdIEMP0jeqw/7/wrb+2BoUpZeZOg4iZg8StzJ8z+GMcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfPNQCRA9TVsSAnZWagAA6GsP+wav1Z1bFqAqBuYL7tVN\nXHk4mZLFB5sXJ7+W0ZhCyqs2v8S8S8/LxVXb6yazYt5bl+BxdJLg6K86RQWn\nF5f4qfhq8GG84G7AcanWaJm6qjD1VhrD94hAnmWBv6M3cFycuwOV6ZVA6guZ\n5ZB9KcnzBbfODQGpgFKfeRFcdZj2L5qzDD4FxKcGtgckNyBNBhhGMJR67QdI\nFi3Eght1GPeVCEUJ9EeSpa6uxcTUimlGA8WO7MHcJ+c58wWUFsH4nS8AfJ2N\n0PerTuKgUDJq41eTgZPNEMseRtpv9Z78qFu4/0SEba+Fd55fgEt0sPvRv7Zh\n7N+C9HianvpUhKayyBWarhDgZJWKaWGaebfOlF4QW0ejm6WJeMJzx4oNhFyp\nzkRE7v1Rt6l68BMubb4ZJVf/S7VdoTCmiJr6X6MAfYS4w2L25vh7oMfslEKD\nxWXhp9D70sS36GZE+2gvyv6VTqKe5NzrrMXUina6fd4W24JJ2XWau8zangs8\ne7oje+GPIm5MbuQD9rA1k5CN3USjVVDoOhulpGfSDMsVE39/9RTe6vO6eh/o\nkfLqwLudd/X1pceZlCwY/IyNbAFnn4VtU50WqMszJ5cGjeO+JjO7hpNqRWUt\npVZzKvLFf2/urr9Ybl6rW0A51oZrJSRQFwdjmOIbhHw7hSXgCMPt74ySqX/y\nEKtu\r\n=5fAC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"7a4b3ff1d42920818448c7784e96b976bf08d8f6","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.8.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.8.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.31_1551692623927_0.8383856704626644","host":"s3://npm-registry-packages"}},"2.0.32":{"name":"gatsby-image","version":"2.0.32","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.32","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"0fa8537a65287f3cc4de40a6df7b9ba513d2cc8a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.32.tgz","fileCount":8,"integrity":"sha512-JrPdkUnBnO1OQvZksvgcH01U2ue+9+vjQNW3totflXUx7yqvT9rHeP5zFfM22I7APFLhvLiv4YfEDwEmur1eUg==","signatures":[{"sig":"MEUCIQDrUk8PD74NmyU/tGQjgvAfZUcjVtEUstgX2SRhmGps8AIgSYuK5TMAgRk3oF3G/8i81R433llMrHRbXKlygNivbe4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchn2NCRA9TVsSAnZWagAAYoIP/jOWMIUYlYvr2vsX+gwU\nRL6AZo9uenE5XoxkAHTx//puJGaLBbooMLwEQNjxhKa1rh0ILVZgzQAzrvPk\nfBd6oB9tHpYTky/5sfqcPPCkTRM75UkRfXe4xUoZS5cFsUi+Jumfo+eDkNrG\nurpTz+P57ELlEZgIw/N4lW8XMlKHcRtftX9qYEroYdc5pFS/xGzXSIwhHPlY\nKhniWaEtaNL4qeKyh/chbUVBIIniGuMdoqZKyvWgLHERdvukC4uuIpCKzkPC\nAkOQNYX5/ggSmXI4FAA9knXQW0ZbXbp3aAv24+na47ULICUh0rw0IbPqZx+e\nY9LCbXy+inFxZrHCDHbOV4BtD0ABDk3/yreJGcPyUYJLUeT336lRg6E9qOTs\nHzmGkXk9lsDX7Gmc6VW0bHdccSnktdAJq/wbVH14P0er0CwhE0VN6lLmr872\nMt5ngAcAVSuiX9iTpMWcOX+B0YmtmNoZC2Fdilluat6b6HCxh+dkZVU9iMvG\nBTK4vZQyxKDIvPTOrAdFjQX42Hq6zMnLHsKWeL9hz0/9EPTubqHkohH3qS3I\nhlc9HjJLgvpoCsFEj3WJqxTMUtCAtQkTP/l1zrRUejuy5CPlGIouB0f/Sjqh\nuccVGAEanCGy0N5yoWtbzK3pmfeHfMSuktrQ8OLgytQnLbZuJoOWPs+Fq4Ka\n09rU\r\n=iMtN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"17118da6ecfbc274db521e11cabbaa6f45f7fd5a","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.9.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.9.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.32_1552317836323_0.6949654692216478","host":"s3://npm-registry-packages"}},"2.0.33":{"name":"gatsby-image","version":"2.0.33","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.33","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"f167c128e5347e17e6611b164aee731a7f05caf3","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.33.tgz","fileCount":8,"integrity":"sha512-Vl9eARq/ZFx240KmAOnKDRU5re0kY9BP1bwHP6Sq0ZqgUN/HjWeb/Gqa1Tj8uQwhFGy989EN32nM4xgKVT+5JQ==","signatures":[{"sig":"MEUCIBCkuYDArURfiRWJ/aX2ZXj75iwl5Y3fqFciInjNZynUAiEAkoK9FZbDq1YTIYVfsnyt/00ikqKDUMSDD0MyeyUMkaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciBUwCRA9TVsSAnZWagAADnEP/A3PnfWQKU13eGZD0uDw\n4P0wZ/ww9Sx4uXroDdvdNGPyduyeTjjJpnTaS6xPUYr9b3tXEgR41/VlxCZx\nvjcQ6qIQA1I/jVpuQV+89k4dF13HLfTa2dQDnK16tuUsUfAGjkQt12cHF56U\nXcWAmBVEaqSgRPLk+rTpE86RU3wPSqqbtUijET6rtfvyB2UAH3P6s+dKZN9v\nM+1cCp6Q+S3XctUYJXNe68kNvtHcHbUmRIpaYPxGo0X4OfbWwzhe+edxt1kU\nkyURkIPTcgjVSQkqoQAupztnfx02NjQOdSi8BzvUSrhMXVe3ZQCsB/aq799o\nkmWdODYmTa9xaLPlRZNw0NryEIPVU9zhTDYmTsBo5xmbsY4gHyMMHBew0St2\na3w98UMYqxurzpgrtUyi25NnLzM7mhwliPucX9Dol9KlvV0pKyYLNOu53tLZ\nf4HUzbrnWcIXv/Rvx5HHYK+NdhA1K8ZtJBJVOEx+sfKPKtsVUW9iEMYx82gu\np0ozpZ+zOhrZcdoLUROfJlFMPCCsa7MKj2u1SGgth1DH9GzSCFKw0rR8la1i\nZsvu3adJXPBZya/YKXixKPx8JlQIrmMeBG6e2wHYZZM/Ehl15XafIzIn+m4B\n6gB23gMdBdqlWhM/dEW7FOR1h5XMbwoAX9qZoCm/sHk0qROJkCPmUE8LCk7n\nlF84\r\n=50zf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"2bc1bcac6420b8ffd8a451699858659898da5a63","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.6.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.6.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.33_1552422192002_0.856242218463463","host":"s3://npm-registry-packages"}},"2.0.34":{"name":"gatsby-image","version":"2.0.34","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.34","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"b4f33c3b9391d55fe2648fb629fee9db2d524a86","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.34.tgz","fileCount":8,"integrity":"sha512-nbqybNM9xsc81yaaPiQu6/pQHeNO/rcXI6RoADpUVKr3s5hRgddcf8xv4FQ2n/sTYJ6/2/bmu/X4nm70tBQCLQ==","signatures":[{"sig":"MEQCIFpTaTR+AdyLFITKSQM96+jrzssWP6p344LfofcUYEiBAiBV5z9wYgtRWI3272lrLYKhLBLznXbq1H9ETCsWna3yrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJci8t9CRA9TVsSAnZWagAANA4P/1lyfqImUsmpCpBJirMp\npcXWvnpPGAJEu7Yu2DVnMX4sv5dqsuBCQtBixFM7D1o9MmlK1mbRmFcRBl6y\nay1TeTvMGO4VOMVk0wCm8qNFHVpdpeXRWkW3EjmMAQaD3rxMahxcjHpJiiA9\niu72CBDTMn/A945nWqQ/Mho6hEJd1NICIWrrzRFAZCJUJWZvh9j/QepT80b6\n0QSxcIOjJNIzK5ANjw6rt8yNofL/xfoAUbAeKPD7Y1iRaJ2PIb0t4nyPaFe/\n6XRdgIxM6ugT4loZBnz8lkrjgcrKWRlttqLHnoUiwNZV5rXjz9UUQBi69gJL\nuBn3OoZ9NDZ62ToMR04HwH2XgswYwXclk4iJ8+QDTIm3nOHc3W1cbsFDBMQJ\ndN+/Qc6im+07MtddJL0eZ7/YJS4tT51c1+9OWVgQb0IYhJdDwWTk/jvPKcc4\nJz+GhZCR5bqK1EtXHBI110lmxCtYPCqWTRcfNeGP1z2h4RNQaeN70Ho4Qy/O\nqSAig27FyeAv4jZRVLCAuimxCocE+kwzNixfXoew8MOy2scKvRVnWzXyQzBP\ncf6pet6tgop5/+87vP6sM1PoKGDPk6xxlg8IdVM6XqbumuoSnzVgaZ8dz9ly\nDNR6kJ0k1M8w7VO3Z9SWhsyo9GBObPGptkSFaK1vnoYHq+AS7QEDZ4HgV5mf\nqDH6\r\n=IRim\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"b62816f7ec1ec01deb7d7f7860e58dada818a93c","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.6.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.6.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.34_1552665468286_0.9437491001867058","host":"s3://npm-registry-packages"}},"2.0.35":{"name":"gatsby-image","version":"2.0.35","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.35","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"8c19b4920df9a33bb17c2db1d5c83cc062b96e39","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.35.tgz","fileCount":9,"integrity":"sha512-rr1R1GoXEqLqT4pz9zaKLfCNBdgz8vi5MZU5Iu4yCwYc78dsx9M5Nd5ftwitHu4lc4y9eKyMcRFX/UOaOm5hvw==","signatures":[{"sig":"MEUCIQDKk/K2gnM8AKGrZxR72BSSLjKu7JaWb6Mrh39wcyvn1wIgXlxVbgPi3iiCKymXUlqWE7LJIq6hTBg+1KAM42EzILc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmlRuCRA9TVsSAnZWagAAfeUP/RVFk+R3iHVldHIpAIbX\nk6niCF7600K2ozhL4SwH1pFA4URsIwSLcgkV0B/QvONFxDX/LW3cAW/dmYQh\npZ/Trw3T6Aw6+fOWKJr9/GBP0MtB3NWeQqNs6tQJjNG4V7gcrvcVYyJKY1Zl\n+Zk7Mz7q9q2wukCTfTQuLGynzdbgKtAobdN24VpgEOp+0LOwhx38Yc0pFsT7\ni/WN3vBlhziI+77I2D5hpxSXsiqbca8CYyLy0WS2Fesr6MX2WRebMsRb0qrq\nFpm/NG7Q+oaW/4Lm1/67NlYXtdMdyQrBwQ1daQBGrdxb5lZ8thysl7f8yTn5\nmJCQ74VJPS1eXe1+wUIs1nLIuWtq/9tpPvHKA7ZlquyWtk5knGkG9DHFSg0W\n/3oJtq8/KcRMSfz9aqBgd2ftA/6kuEhAwjKcBDucJ/U0IDEAm0JT6IYG7/1Z\nibgiEGbu5PYqS7qzVFX4+jM8COHpHLFw4yELSh6FDC+QcKOu2F/ZiNVT7kQy\nLsxUz06IzFig8ScjCqQrl8ZRkFVk/OCc/Tp6T4vREoKUdqWaV+vK9tTgFJ6X\nnYkpAoIt1a1Fygq0gw+0DjwJh25eBQTA8GhW5yYHgutkuX75VDNumUPnWY3a\nx8TfZCmcUVhdMOkmf8/yhKGrvUP/e+670kIng999rJDK//fdLyoGNGt5L2p5\nxtAK\r\n=BbZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"a1b8f24e0dfe08a057df7eba1b267185a2b176ed","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.11.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.11.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.35_1553618029776_0.723751139915924","host":"s3://npm-registry-packages"}},"2.0.36":{"name":"gatsby-image","version":"2.0.36","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.36","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"4b97b559389c0bf7ad5ca2755905ec4b95e2ccb9","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.36.tgz","fileCount":9,"integrity":"sha512-Uyu1U/qtCO+MbgH1rZSLf9+OIlk/PDfl4f6kAM6d/ncPJhZjOyoWI05Q22dd6Oe47ojYmJu7PNGaHzq9mWKdOQ==","signatures":[{"sig":"MEUCIQCwlWp9B9jgJ86LzSZXuOCPLK7aVL1yi39r0216MpGWewIgal4XTleon5IvvT4hn5t6EDdcjhInsNoqfuzyjXknTLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcom3tCRA9TVsSAnZWagAAWzYP/2e1rmb8oNYuHOdIUJrs\nldDb14AJWOSQO0ewfaiRuFi5mUlMPd5NreHtYsJHZaIdkscO/4vi5x4xygkL\naZQRyZU0w3xX2heofWiMXJ5icEY0HnposnFif3mKroR5biuw46K0a1G0OMsK\nVhUejA4uIE03xbm14KtvJN+bxzBQaq/DOmfFf+iNz2Wvf24K0oYF0cZOExjR\nAQAIzrSsetgDeKQQAOis82vsp0n6ngukeNNjN/P1q6vs8MkcDna6OVAvA2pa\nPqv8p+20AYy1+ZSIV0Nkk8uBNf+U9xu1o3jYTMbOQBHZkC9WxB0/4eXscM9t\n1NtV77Ac5+UwyekcO3sGNwRHynAU6WAIk7QjDDaWt4ANLBg0g9tosOjeggTc\nq26ORuIK5OS7P0dwgtQ4vjUspErtXA0G6UgrhNX/WkgJN3iRNZrn/wxWvl0n\nv+jHBGfFvqWtcSun1OQwNs0sFZzb0KI9Mv9iAGmkicCiqvq3z1vMJnw3zcgP\nvLaEs8oRUBO9tVvKJeUOS47DqMXMzn+HVFtdv+MeBibRKHzZMkR3KVmDGPLE\n3s7FArmSx2rfsZEiunAZzcBg++a/VUZQeegjixX+oRjeWyQ5VT/ChIx3rt1y\n7nWlorjYPzIOXM8vp7TH8NUyULtxkpkcTm2+pyWxsyzWyuzIHPpMJOK0y2mC\nkgad\r\n=IARb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"87c1f2884a81b6221523e0210012db7db33ef4bf","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.11.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.11.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.36_1554148844194_0.34402692716117556","host":"s3://npm-registry-packages"}},"2.0.37":{"name":"gatsby-image","version":"2.0.37","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.37","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"9c28c3d8c2a249f6f5eff929be67a761658762df","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.37.tgz","fileCount":9,"integrity":"sha512-KdD5LefTmigun2NmvYqoBVXRZ0W0y3Rr9j+yOX6hxU+RJQb9u3gF3vG/dC0Aljwgo2T4zKBqG8wolJ7F2fWj5w==","signatures":[{"sig":"MEYCIQD21UI1gUXj7jxVLW9HHojzFEEEjl6W+gjEV7EClVFd8wIhAMaW4E8W7kT01q2OcJmXSM1Q+Fbsol64Ek4X4iZaBvFb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoyyBCRA9TVsSAnZWagAAoAEP/iVCdm5izW4Xw//+bliu\nOe0A1blH3FcLFCQj5Gqu3M9cMjPhL8pYBJZssaBS3XgivjQd8CfXYG1Ksjow\nxI2xLpL3oxg/BNl8ARS72TAkYoxSrgj9BOeP4GSptDR0QoTw/MPsf573NJm/\n1DTDOlfVqyv67Eqyztc0G9UJJvOMWuGLMmCj9R0qS6EbU+IqFJgyNsC+PO1Q\n3+qnSDqvcTabM6aFt6iUNINTfeT3LZSE5YgNdFt/7JQ8nqNXvG376Huvl1LX\nNbTuX5nbOcqLDeFQoGlHliX2a2UFVtjJn0CrdzD3gNLzO+MnAgr84pdzJfKx\nrSy7yYDSN7oDudOWPiXz16pbbJRV7iMXyjwgpfQUdXur1HnCxiqDB422XvLq\nLLpVTZ8tQfn6GD96nn+kTScrVD2pd+4F4GBmU3HFAp7J/hmYpSBkPO4FvwWo\ndQPc+NqGivfUdL59M0iIU4a/9abaDUARDeHwHEqciTocuF8mg9KdOltNYd93\ndrue2VZysTH5m2N81q13SYaIF7/gjkuYnViDsrTr2qRouBrk1oBwjZNS+DYk\n4zkGtpTDX+NLSk7O+Kk1awg2j7GlJKONNxWZ+cKJ7URYMCYWnp03p3LA5GRC\nSxjWNkAanacdUJdRJ3yQAgU7tjw3m4Clzyw3Az6cWXqt20S/S/t4ACwnutdJ\n0uZ8\r\n=Yvcg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"748f83353bc08218b3f248a5b5eaff41302800df","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.8.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.8.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.37_1554197632893_0.9791804195009581","host":"s3://npm-registry-packages"}},"2.1.0-loading-attribute.1":{"name":"gatsby-image","version":"2.1.0-loading-attribute.1","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.1.0-loading-attribute.1","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"2f6db4212036ad072d4ce83f6526958e592b1b5f","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.1.0-loading-attribute.1.tgz","fileCount":8,"integrity":"sha512-Omc8EVj3itlDCb3QUjInHyJXhDN3x/v82DdOcwNkdunvVYLZ0/jfoceRCNb4c8+UajGJ3ER9iZVZbNi86Hca8Q==","signatures":[{"sig":"MEUCIQD8SqVgUixPUCzqfGPNsbye2wbOXmwDXfC1ecWkOk0ucQIgaFFmGA9f4cLpDVWSLgpOjUc3oZ903oy7rj8lSyG60J8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq19tCRA9TVsSAnZWagAAOMIP/2L8r9+YPxg8CHl+ovbf\na7mMn6VtTh4lqS4n2PuVL5gtuZtr2grFgUITu5CDhudyngoKremwBApxTelK\nsLYwDZg6DDymWe512kIh7pkWP4tFjo7Ju1FLKzqjeqqmLCUysLKezQ1qzlBL\ncgf/miHLgan4vJpCe+yqzl6LjmEAHqzmTKC/4se4JVC/Bi/BnamLeMpyyvyI\nyacSLjonP89vy8HjE/H19krfk2pFNNTGo0fS8XOYc+SXJOaVb5Awf+a8fIEW\nUEdtDUghukW9uTEhYf7YKILbAJOMflKdPoSKkuNGzET679Chslr5zQkDdbQw\n7M+7WZB2HT/Sr6jwhVvtw45DRtfujufLZjiaMODd3I3HPG1iLoaPZzPJ6Wkm\nn0uqdeLa7sCTQ/+kCj6+c4KkvasPTCDdgmRSZhgp4Q4NOBResZ87YHSi7ORd\nHLqyu23Z+8TeXRQyOO3sw93dHmBTqKgOJF8QhWWiELNQIO8vn6JOKvGV1mgT\nmDM3UVJHsv/RrINGl0M5TmM3+xVJv7rVp9ZOBtf6u73ZhZaw+fW96lyFirFj\n7WhoFc7jBS4e8pjRhY9feAo0DLmG74bqbECPK8iRKakMsq8gYgszlxuPJlwk\nXy48JUmDJN2CdkWUzF7cOims5dzT6yuvtDcUwCuPUM7NMX8jnxgocKByyJhc\nVFMl\r\n=3kjy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```bash\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:\n\n```jsx\nconst NonStretchedImage = props => {\n let normalizedProps = props\n if (props.fluid && props.fluid.presentationWidth) {\n normalizedProps = {\n ...props,\n style: {\n ...(props.style || {}),\n maxWidth: props.fluid.presentationWidth,\n margin: \"0 auto\", // Used to center the image\n },\n }\n }\n\n return ![]()
\n}\n```\n\n**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.\nYou will need to add it in your graphql query as is shown in the following snippet:\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n presentationWidth\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ---------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `crossOrigin` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles of the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles of the actual `img` element |\n| `placeholderStyle` | `object` | Spread into the default styles of the placeholder `img` element |\n| `placeholderClassName` | `string` | A class that is passed to the placeholder `img` element |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `onStartLoad` | `func` | A callback that is called when the full-size image starts loading, it gets the parameter { wasCached: boolean } provided. |\n| `onError` | `func` | A callback that is called when the image fails to load. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n| `critical` | `bool` | Opt-out of lazy-loading behavior. Defaults to `false`. |\n| `objectFit` | `string` | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `cover`. |\n\n|\n| `objectPosition` | `string` | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `50% 50%`.\n|\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- By default, images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n- Images marked as `critical` will start loading immediately as the DOM is\n parsed, but unless `fadeIn` is set to `false`, the transition from placeholder\n to final image will not occur until after the component is mounted.\n- gatsby-image is now backed by the newer `` tag. This newer standard allows for\n media types to be chosen by the browser without using JavaScript. It also is\n backward compatible to older browsers (IE 11, etc)\n- Gifs can't be resized the same way as pngs and jpegs, unfortunately—if you try\n to use a gif with `gatsby-image`, it won't work. For now, the best workaround is\n to [import the gif directly](/docs/adding-images-fonts-files).\n- Lazy loading behavior is dependent on `IntersectionObserver` which is not available\n in some fairly common browsers including Safari and IE. A polyfill is recommended.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"6.5.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.8.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.1.0-loading-attribute.1_1554734957107_0.9812214324595019","host":"s3://npm-registry-packages"}},"2.1.0-loading-attribute.2":{"name":"gatsby-image","version":"2.1.0-loading-attribute.2","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.1.0-loading-attribute.2","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"6d3e8e9f4ab4017e3ada30a131355e12058e03b7","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.1.0-loading-attribute.2.tgz","fileCount":8,"integrity":"sha512-zoAQKuyLVl2nIY/0mqy99eCaPXAOQuLxFEPaHDaMewwgyhT2V1YnWAo6XOjzkskW3Vd1UzOOHdSsZ+mDfw2FcA==","signatures":[{"sig":"MEYCIQC89Orvj2M01CJYft1sk8uLgSgtk/oG1q+wyXe0TqAVogIhANvMZ5AbolL0nVV/wiBvzNXRjnhnBjYHHlCC2EUedi2G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq2TXCRA9TVsSAnZWagAASesQAI0OD1LKi2H4+1DH5ztD\n9NP8XRXzvBOzUjDlbAZUbiwHTh36O26fgaedYohKChWaP/v13nn4TtowzFMV\nHegtcW00S9H49+J+pp7nKqZE6WrebaaJnSUstYe8P1e2E76TMbVA00ESwZUd\nRbprpdJXZn7ei11F0MaPBvb0E9aX/RckaE3K3V0CuhnbQioqw4TN4WHn/I7j\nhYyi6rUxz20wpg/qECc385oSFa3XQh5OBvGdXUsKqrC0Aijv+W4Yi+8Xvsod\nVyX6adjRSbhFDZIEWZfNlEf1neuqA+ly4gF9pmqfWw7siotuQtiLDlA1916U\nIm7Ej1/p7jA2OoSluiGDFPWXt/wPMQxGOEqyLdX7Yqb9hTX9e9EArFb90Kbd\nRkKc16q8ZRrSb2MJkW6RPn/Ea3JR0XqVi9eKumlkJ7QUxAlN/OSC/OjBfOfC\nPWGuWSO8ziocsLnroTM75iSMlqVQZ83El9gKtZeBt+DF3gulC5LYtNq+xucn\ne0VhdltKGzWcTIu/4vJdC9kdbFV8e8NLLcREXo10kXLkw32rydTWf3MMU/u4\nXaJVnMiyyJA+xfNW6PXXkqooQbGwySxYH2pfdL2+45XgSO5mmieCMNHgRcEu\ns8XoCoGgVnMTOM6hyT7trMpNdwQRy2oRKIIvKV7p2S4tFxKnMUF0Hs4QYZYK\nlLIs\r\n=X8FS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```bash\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:\n\n```jsx\nconst NonStretchedImage = props => {\n let normalizedProps = props\n if (props.fluid && props.fluid.presentationWidth) {\n normalizedProps = {\n ...props,\n style: {\n ...(props.style || {}),\n maxWidth: props.fluid.presentationWidth,\n margin: \"0 auto\", // Used to center the image\n },\n }\n }\n\n return ![]()
\n}\n```\n\n**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.\nYou will need to add it in your graphql query as is shown in the following snippet:\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n presentationWidth\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ---------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `crossOrigin` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles of the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles of the actual `img` element |\n| `placeholderStyle` | `object` | Spread into the default styles of the placeholder `img` element |\n| `placeholderClassName` | `string` | A class that is passed to the placeholder `img` element |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `onStartLoad` | `func` | A callback that is called when the full-size image starts loading, it gets the parameter { wasCached: boolean } provided. |\n| `onError` | `func` | A callback that is called when the image fails to load. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n| `critical` | `bool` | Opt-out of lazy-loading behavior. Defaults to `false`. |\n| `objectFit` | `string` | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `cover`. |\n\n|\n| `objectPosition` | `string` | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `50% 50%`.\n|\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- By default, images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n- Images marked as `critical` will start loading immediately as the DOM is\n parsed, but unless `fadeIn` is set to `false`, the transition from placeholder\n to final image will not occur until after the component is mounted.\n- gatsby-image is now backed by the newer `` tag. This newer standard allows for\n media types to be chosen by the browser without using JavaScript. It also is\n backward compatible to older browsers (IE 11, etc)\n- Gifs can't be resized the same way as pngs and jpegs, unfortunately—if you try\n to use a gif with `gatsby-image`, it won't work. For now, the best workaround is\n to [import the gif directly](/docs/adding-images-fonts-files).\n- Lazy loading behavior is dependent on `IntersectionObserver` which is not available\n in some fairly common browsers including Safari and IE. A polyfill is recommended.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"6.5.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.8.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.1.0-loading-attribute.2_1554736342638_0.5917862854370177","host":"s3://npm-registry-packages"}},"2.1.0-loading-attribute.3":{"name":"gatsby-image","version":"2.1.0-loading-attribute.3","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.1.0-loading-attribute.3","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"c9ec55eefc81bf4762f0cd0d223ab7f2d04de56d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.1.0-loading-attribute.3.tgz","fileCount":8,"integrity":"sha512-MUWkY8yhumJNWsbt1Ex62zo21lOwt2haZeFQGIPBAFrOl14MjiyaoAHsBwFXtaf7wKRcY2Tj2d356qfCVcr8+Q==","signatures":[{"sig":"MEUCIQCxCangERA6tiXhBduHAytPHA4RYnqTsHrGi1bVpc0XiAIgM45+jrVnuCUYwA3JDXye43pwOpnBQXv/CzG7lqYqyyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq355CRA9TVsSAnZWagAAEdcP/31qKkcYnjjNYwzlhj3f\nCCkNqC75u9c3sB4Nv29KoYlo6aBKmP4wS/WKhpKp2MssNlw0k1q3BMCsohjJ\nELN7MjPGYw8OeyShY5MdNLzU+0nRHHPyO9bk7BkENwwEUMwCxadCjpP8ZwXn\n1SZNlqc3NMHsQ41i4TVXjVXwrGzg8bGCT2y9NeGP7tXRp5mGdnFwqjItUFtc\n/3t/wUlES/46VpTqFXkq91FujMx0D7Z0NAflzoXfW9B1olD5YCDbmG3V++2q\nLjVtPkOg0wTuKWwxI/GdrdCi5O7FRIeYWiBCmU7AyHctiAqIUruPFXV6qKko\nmVbblVmHcrDzHZxW2wrBybPfIN9H910zaGoS8gc1/CY01tRsVPAww2PzxyAy\nNtXSn7HyX+eWnXSnP0zBfTROoA4VX+8qH40CifyLxUzpZJ2ujG4U++UE3lCd\nkPMK5cpA43ikAYOn96dPgHoHV8/Cy47E0+Hdb9oQIABlQh5v0bKFLG3X/eq2\nxRAELJSYp/gpoeW9HlvCfs/5X7gHyCFFrgz+9AbRSevUMdHe7qsG1sGuMFXQ\ntoLm72plnRO6/xZRGKyf508htwFDy83vMkzqsresyBWCmM1KKzRe1yb/NjHT\nfMZyqYuPmClLRJ3noZa52zK4YGPHvty4RxVTw4WGqoNn6HV/puKC1oPOdISA\nH3Cm\r\n=HB4E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Warning: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```bash\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:\n\n```jsx\nconst NonStretchedImage = props => {\n let normalizedProps = props\n if (props.fluid && props.fluid.presentationWidth) {\n normalizedProps = {\n ...props,\n style: {\n ...(props.style || {}),\n maxWidth: props.fluid.presentationWidth,\n margin: \"0 auto\", // Used to center the image\n },\n }\n }\n\n return ![]()
\n}\n```\n\n**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.\nYou will need to add it in your graphql query as is shown in the following snippet:\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n presentationWidth\n }\n }\n}\n```\n\n## `gatsby-image` props\n\n| Name | Type | Description |\n| ---------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `fixed` | `object` | Data returned from the `fixed` query |\n| `fluid` | `object` | Data returned from the `fluid` query |\n| `fadeIn` | `bool` | Defaults to fading in the image on load |\n| `title` | `string` | Passed to the `img` element |\n| `alt` | `string` | Passed to the `img` element |\n| `crossOrigin` | `string` | Passed to the `img` element |\n| `className` | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop |\n| `style` | `object` | Spread into the default styles of the wrapper element |\n| `imgStyle` | `object` | Spread into the default styles of the actual `img` element |\n| `placeholderStyle` | `object` | Spread into the default styles of the placeholder `img` element |\n| `placeholderClassName` | `string` | A class that is passed to the placeholder `img` element |\n| `backgroundColor` | `string` / `bool` | Set a colored background placeholder. If true, uses \"lightgray\" for the color. You can also pass in any valid color string. |\n| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |\n| `onStartLoad` | `func` | A callback that is called when the full-size image starts loading, it gets the parameter { wasCached: boolean } provided. |\n| `onError` | `func` | A callback that is called when the image fails to load. |\n| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |\n| `critical` | `bool` | Opt-out of lazy-loading behavior. Defaults to `false`. |\n| `objectFit` | `string` | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `cover`. |\n\n|\n| `objectPosition` | `string` | Passed to the `object-fit-images` polyfill when importing from `gatsby-image/withIEPolyfill`. Defaults to `50% 50%`.\n|\n\n## Image processing arguments\n\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like\n`quality`, `sizeByPixelDensity`, `pngCompressionLevel`, `cropFocus`, `greyscale` and many more. See its documentation for more.\n\n## Some other stuff to be aware of\n\n- If you want to set `display: none;` on a component using a `fixed` prop,\n you need to also pass in to the style prop `{ display: 'inherit' }`.\n- By default, images don't load until JavaScript is loaded. Gatsby's automatic code\n splitting generally makes this fine but if images seem slow coming in on a\n page, check how much JavaScript is being loaded there.\n- Images marked as `critical` will start loading immediately as the DOM is\n parsed, but unless `fadeIn` is set to `false`, the transition from placeholder\n to final image will not occur until after the component is mounted.\n- gatsby-image is now backed by the newer `` tag. This newer standard allows for\n media types to be chosen by the browser without using JavaScript. It also is\n backward compatible to older browsers (IE 11, etc)\n- Gifs can't be resized the same way as pngs and jpegs, unfortunately—if you try\n to use a gif with `gatsby-image`, it won't work. For now, the best workaround is\n to [import the gif directly](/docs/adding-images-fonts-files).\n- Lazy loading behavior is dependent on `IntersectionObserver` which is not available\n in some fairly common browsers including Safari and IE. A polyfill is recommended.\n","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"6.5.0","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.8.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.1.0-loading-attribute.3_1554742904219_0.6177258366461675","host":"s3://npm-registry-packages"}},"2.0.38":{"name":"gatsby-image","version":"2.0.38","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.38","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"348b4a9ba690e1621ec53a7b60405ab525304a7d","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.38.tgz","fileCount":9,"integrity":"sha512-c51nBwQuFlTffFrOs4nDI7fjS+OrWmniklzGSkmLhNojc4YVipYdYMDQLI252xYWzAjToUouCInFErlCTcEYRw==","signatures":[{"sig":"MEQCIBIN889v4eyVE9+7idgSPe17VTWeAs+7nZ6bdUnc2RPRAiBPZ0SkDdGwE0GqVNi5zPQYh0T/UU4YyRQzS0g1C5mJbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcr6bkCRA9TVsSAnZWagAA+UQP/jbnPIJzR+nkmL8A+b7Z\nCJTymgalqiwVWkKNzIuPubmJnWRlBPRRAhGV4ypb/mmY8qdNEVgWruOP3wpL\nXWys/tZZbA5y51BidzkWMiQ3xBvWRfHBHOXkw/bLYqZgQNBiykHJgmkJgsf0\nKE9aMc0LuDWc7esDn+H72otLBVZlVbEgxVFA9MpCZgIPXBB4J96tSRgX0acC\nT6oIOlYxDq67rYSvV0XGuDtX5Oi5AOV7AjulFH+X+vDx3PylW3QLugmrFePk\n5F61C9QTt2fNlApJCFJdfy6g2XtO+dkREyBVlAPt5IjyLQK+ET0mDUxl17WM\nZez/AJBgWS5s63Xp8q1TXF9RRRRrnpSxlzr8P8Faw/JP9zuuFYI2zLa5nYw0\nT3+6ONDN1rd2Hqe1O7NPEp5BF3U+si/nUkEw0OSrLSHNMhvQnp1f9jDf8k9H\nTdWqIgKDOYmAblubYQN8RpvANR63YGU2GH9QBQ16dgyNjaS0EjGwQA5ASgI0\n+quKl5IEOQUUo2EVpzHKnPqzoiggNcNWMMSiNWCMwxZtDMzHwyDA4E4Y1x27\njfHuGEWBJ9xvFhqPP2Lsrkv80bhDI9UUHIFtyq6uPX4inm96bzDCuDlygf+c\nVavsOI1bXEcrsO79fY3iIl7PYCFd8UvUUx8B0yiaatVm57xDUHYQfCs165sS\nXxrI\r\n=C7kW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"52b4f3cd81bb9a929b71739565c9952518254a1d","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.9.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.9.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.38_1555015395461_0.6671887172143893","host":"s3://npm-registry-packages"}},"2.0.39":{"name":"gatsby-image","version":"2.0.39","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.39","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"4dc7aab0bfbbfb9ce737a3814d8343a7ee02df17","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.39.tgz","fileCount":9,"integrity":"sha512-yXuduhxGNG8T52VUJK8w+ZbcLwVuZSyA64R6fizbgqVKmefLlYc622k6MiLPic3qswiJgkAw70h700esErTcpw==","signatures":[{"sig":"MEYCIQDjie76Q/DToC0rGEUGcoZ7Y1qHCyUGabWuZfQujsowUgIhAJn2pK580jziVEV3r6p27W3xm+Z+Vg5ODp5PlFzI5n0U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctJc/CRA9TVsSAnZWagAASJoQAIaBrugYLsbOb/afIe1y\neAYBT5526kX5BotymoC1wxIvT50oyKzWi6Y1fGTOY0rBR+8V3maeoJfsB5Sz\nfiHjGgFEnoFfQ0Gt244hgysSii99y7ner/qwunAK5oBCFLQmEeGMFXlHM+E3\nzNwRI9brxYCrUJ8/fJQNETvI7n3dvUbtCsDJkokerwANB76orSrwbWGrNHky\nnHrSWSyUUSqGOlw5hRg6DzpihxEw0OVR1Gu/PXlrtifHKG2ow0DDXNqYhLJK\nGHQyxSLx/1VtIWi16w+MkvK9kUIZYhOtwhx3xve0Jmnl5jDuFb0z4EJapBx0\n1jIIo7qgIFLC3hIx2NTpMjHbDH2uoxLAyCAOn5bnToBDNVhf4hX54Ngv3NUx\nGO6oKfzz+kysgqtOHUi7Qi8Z1ndyP1UQ9G2RZxfbi8MiVvueGngd91qJ1nT4\n+sVLVzR+vxczsx4w9Cni98220F2t2mJiX+p2qHF4KSg17w9899B5t2Yw925D\n8n47c/GEmLlkSxmV8d9rI4fHBENAId9cQZx3Sg0zTksvPFmDcAv4i4O9NZF9\nmvk3RIr0JLVH5dVdXBggPCLeCDaxETL24//8lD341T5f/H55VM5OxOPIvCBI\ntk6hOuvJbJg2MqLum38c/2beS1opwtVeXLR9HQ3RTrE5Ahx4XQuHaI7oaIQT\nyx0a\r\n=SfBo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"7a62bc53a72e8e77dafd8f0e74c824332231e819","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.13.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.13.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.39_1555339070606_0.9219296083196384","host":"s3://npm-registry-packages"}},"2.0.40":{"name":"gatsby-image","version":"2.0.40","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.40","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"eb59aca8891804464e339baa7421d78f4b7a66c4","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.40.tgz","fileCount":9,"integrity":"sha512-iH2+F/J0DiDXeiC2n/grI1QrcXNJDVxnxxCedHeE0/0iUFwlQ52TYyRPbCSnIZg0xcOmr1FB7EaRCoqi7rddVg==","signatures":[{"sig":"MEUCIQCjriT4WkYnpHsOBXGrHam01+AM7bGkvdfJZDxCekge8gIgXukecvBcsNkBtSwLTGLO/LRCuhrYINjfQPxfjyRoJHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcv3w4CRA9TVsSAnZWagAAM5QQAKFOHZ2GxoalrsDeB1Sc\naqDCxbkELrjuCi4RTGbywfzkyzRrXkCX8g8mKXHUcZOadXAOVDEE3BJeKwC8\nVOMsEoJZ3rOyqJpZh06WT/T8i1gfPzq5BMy3DxRd/SyEXPZA1oNJCT6XYXWo\nd1jkuFSZIltmQOVHFPLbm1pDG1aqfCY8wU6UWHDGCCrRAhEjC4m+HVdvtn8n\n+5b/WrKq3Oc4EAFbOE5GX5V3LdKKk37kXTl3BM6RjlplExe5uRjK3O8/YwB6\nz/9aAom6cyqz3tfz+ZRyl4jxlEJhWNiE3ZxKYgIxak7tUxeUf21+FGZEoatx\nopgGQ51lNu+7sDpOXSmH+m9XqsrNhlRgEMIvFE+7C7TZSQDv4hGMJcC28Qf9\noy71NJu3sYuDUamNXBL6v+/SaXmmJr15t6s18jez+aiHPeoDy1KAMP6iTbMy\nKlkxKsKw8eIhYCUMFuMSI1PLD380JvHnkWSBr81RytSaGr2bQq8l9G+WK8Zc\nZO+qqa1qtCcJKfJ5501p6IWo0r7ZuUdlI3Sx+hil628le1/W9M0HSCPbU9iU\ni7F+1uFd5bL9wwI/1SotaT/wGCojIx/xPil/hHbhZEAslCWZCoy3YY9IPDZg\np9DDxws6xaB99lkAFhBEb35TVYgRlrTdy0vU9NPjuKleYWWN3iImp+XqxRNa\nbB2a\r\n=SNAH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"c35dab51ef9eaf41376579b314f607c683f20c37","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.8.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.8.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.40_1556053048182_0.7995038342258729","host":"s3://npm-registry-packages"}},"2.0.41":{"name":"gatsby-image","version":"2.0.41","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.0.41","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"d2f41b13013c7294123c341799d3645bb1a6dbe7","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.0.41.tgz","fileCount":9,"integrity":"sha512-FeR9DkTZAfHJf7jF4nduDPMEOElpjouzKi7aHblmKyBPBTxT3wt57AQIdwjdg5RoUznjVlDfRnmemJPPGWCNLA==","signatures":[{"sig":"MEUCIQDZ+5oZcX/bT7d4HmXvfjV4KOd+xU/9154YhyWa7wi3jwIgSmMB7844imWNqk44gmgQDif8izCrbB+T6H7bVPMTFdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":55068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcx/PPCRA9TVsSAnZWagAAZZUQAJMllDWF/8xSi0EDmmid\n9tiO/L0BiKx7lyY0R7vYSGlozwsbAbdLPDgKpkrnfShx73yqxxCKLSKtGn6w\nOP2xE63E+lb3IshaCmLtaOrTZg8lEnqHOW/weetVvkgHxUq6/vyfbY5XtQGw\npeXLucGUI4cCFEliGgx5u/KZ0KVSboEPz1G3TaN9poLm4VsdGRGpk0+TRqiB\n7tFK8UAmz4euvsnHID7sI8PMDSMatT1fqVTJpVRhlwIn8xNbfarcL55bOJTF\nnbAjavRh+8fFmwCHOasY1CrTEBuH6y2Dl9qYBkNGk0kABxMV+S2fZvAbxnvq\nLgWxvlG3wBBhU068fK3oyryogbWOaaaDJ99tG+ekJpYHyLEtxG2h2MDfkc4P\nYBItXKEP8sfhIisc+a4brcyR3Mw0K3O8abG+ht2CE0LZWtepQJBuSQqpDjw4\n+j2lMroQgcTVSLtIZq6/os5u4HofbhCfba6zgI3XG0O52p/3KQsJ+jpUZAmE\n4WJvX1OjCaZKH5WhhEL+nTuf/2ubdY4vNxbwLf/i9hCmbTFUVXfJMsJ9DKzb\nDAxxzmIieqIyrdTT3tv8hvPhpw4RovISM3FvqaduUSiW8lQj4hR3+bHMZ13R\n9RiupSiBRnDsDMY/lr5WS5nMefUwOY3NxfGYSdYRglkpWQTTXAtiqRjrXd1W\nWjnc\r\n=wWTZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"41928aaafcf266f388d8c8a36cd926640adb90e2","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"wardpeet","email":"ward@coding-tech.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.15.3+x64 (win32)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.0.41_1556607950512_0.6032815843259773","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"gatsby-image","version":"2.1.0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.1.0","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"81a68c619f1cc2f23d153899a84c048764fa73ac","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.1.0.tgz","fileCount":9,"integrity":"sha512-AK0jFWkK/vG8/Ce2COwuNho/3XSV2Zn0y+FUweDj+Tvffjs+lGOhiVxDUODY8flKCO+Bz1UCfO0HcpkVH9Sg0Q==","signatures":[{"sig":"MEUCIDRqRw8bZbcbLy9N99sgS4NMe8fZwgl7yB46Lzxu1mUdAiEAhDuem1Gq4ekU9znwGV4jf33cAnuquD8DQzFFQ5hhees=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3bocCRA9TVsSAnZWagAAM2gP/3A+iJD1w1aqJL9Nh1zx\nXu/+KPDwyiF2U7mVIqpqWAr8qrsnK5CZjrMQgshmJrqrCip3XaBtr0X1uUQi\nUc0GAJlExPYkQt5WoQEBpC0ADaAvxhO9eJKjM6USpLQnRuZVtzBgFYOTN3Z/\nMSkmnllLepCTkPAnPLqRJ/PIQsXVC+cMIuqGCC5R7obRP8BQxP73lAMF2GgP\nTtdkStYW6zXk/ua3r58TXtSR/TZVx6sjPXcJSH/9BppHFAWwXyB2cO0b5nqn\nAlerQR/zLZXrV4cjnhWkGfHNhf1D6dAsNTuYMp/GP9owUoxmgTgtH14HsjZL\nJq8sXn/Rx2EeQbWs1ITZNSYAbsRq7JlYC6rqX31RYgqc4CmUMkiE3dGZkITZ\n6A6xay5KOSK4oTYwrQY0M3Oo1osJzxJWO5B+LH8ikrw5YYtccn2uTIwLZca4\n4EZq9aGjtqMzxEpfWaaXmReJZTRDPEMLrVOHEoUezCv/bKfQViElAi4JRm2Y\ncxDLi9s/hAxdGhV/fVsGfMGquOeMBXgfhf0Ts0DWWT1ZYOz7MDO0yTIo5fxT\nr8jaAsaxXn+k1IG8jZSm4dUuDYnFlwCVLo5+CIsn6sHZSzxpzHU+y4RIovIM\ncq5f2EcvBQ1SF99mBMimcyBZRvW4r3G5lpF7de89EV9DJGLgcIhIFFbJqIy5\n1NnN\r\n=3WCD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"1fba5a6d7e3900422ea92f84a564b4fe0d9a220f","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.9.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.9.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.1.0_1558034971836_0.22314575076870158","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"gatsby-image","version":"2.1.1","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.1.1","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"bbaca556dd90083fbc59d492807d12fb06435c42","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.1.1.tgz","fileCount":9,"integrity":"sha512-MPmFDyF7Sj8yycMcA0ngFSHSDvO0PU6Flini3tDz58v1GOcyD9Ks8asaYaEhdZaauPfIKfXmun32G+QMtwaotw==","signatures":[{"sig":"MEQCIBBfcwMz/anCkH/M+SmaMzD5qxWoIFw8YoI8ZML2IdliAiA/mUBnKbDpy+YE2XdqckyF0Cp+sgOnHSJQ5UZAZ0HooQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6GxkCRA9TVsSAnZWagAA2iYP/RwdGGqyV0gv2zQzhWfI\ng81KKtPRV9CbSXGfXMk0o9lBf3Lf7bb5RhXorDhtGHCpSC9lDFcfJiv44ltB\nwEYj5FjPa+DXxlz64p6FWagy4/ZjDlyPuVlA2iFs7DU+OwCPxdknQu0LvtqT\nXZM1Peva70UyhmMftq2dfTaysU+u6En0mXAuL5LLOb2Nv36D5PApRl9oz37h\n1Xj6W7k753z3B/h8A+PwY8kCrF2Jw2Gpn181I8uX6lQczTgyrQ+Df+497Vnx\nRwK7EJbvewGZo9nfNvMjmWXULLlsX2tXND4wUVqRmFTCdyOzA7gGYVueysTd\n5+A/pI9vqdTy2h3qsNBnWUxa1RoLYbWYxetUiaOCymAK7rFUu7EZTrmsTGwr\nU4GKzfaGGjaO6pAck8/Q1+BwjGK/r2FcX0N8TPDDX9FJ4QLNvvLP/PdUXDGU\ndsXnG2DLzcLVhWWWZnL1VNruZJUzWticH0WHK5JHioa2a2CoBMCDJprHQPCe\nBXnTfBddPoziBtp+NDd0FxNCcae7sX/v0b7P5qMCEA11FJZUroh461WY+zLl\nKd0uGCbLTI5BDE9Bpbg3GlOaQVTP2EuwIgbzb0BSLmIZHlQDCU9OxtjwEHzZ\nvMZrSPV+FgnUbbcRKnHTVE5EWFTYfwRvEsfVQ1lOjoDh7OISz32rWP5LVMHK\nvt5K\r\n=ozP1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"534b4a83230a80235a71b5f3c4171347e8862e58","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.13.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.13.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.1.1_1558735971297_0.8821657437290742","host":"s3://npm-registry-packages"}},"2.1.2":{"name":"gatsby-image","version":"2.1.2","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.1.2","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"6c0caf0a4a3eabac5f516cb6e5abf8c95e603d72","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.1.2.tgz","fileCount":9,"integrity":"sha512-usDd1O+fz6emqu1F7HyaUvUUXpWS1a98R6kej7QVS3Y7pDo3bx15EGqbmIBvPwrwFaQanGe/0e8IF1DHQ08LZw==","signatures":[{"sig":"MEYCIQDikpVonGDQENYiiIUeEe5BGHDjvHNHjY3b8Gs+IFsqxgIhAMy+qEDluXDXnWE32DpG+WgIWzzXhpUvlrxCbAnR51qc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7nKYCRA9TVsSAnZWagAAhH4P/izdb47frI4sQcULObw7\nR4Jsm4LUcrE6XCv16jOxaGoAflZnDGuIDiRv4i5iG4CegaK7lLQaaBXyMnrt\nR6BDJeNj35G9/O02bVFMEnMsUihN5lIL7j7thhTy0149g3aXasnrI+36JKlg\nMBXaU7BOKQmvVLcJVilXWTfCi9tXqIwlEFAAlHm9eUn8jVEpvwsoVAgpKDNl\nv0frQn8nKhHgqEq3txRIhGNO2eAxs/BO6DEBHNF27+s9bylvCCkDas6z/GoE\nRw/WD15UMw1mTR0PtGYt8s2Vp0HRMDd9zBM2GYXvE/nOeM6nCKYrmA8hdZvg\ntle4OmwR3/eydFTO4iGO+vWKNHvCk+sxWAHlPgr2LttgCgRUBF4rAQufWdbg\n2NOQ8yFlK7YWuhto9oRLfsEqQ1VMjbxRCWD/H1uUmLQ72tWVt928noNZcVf1\nDYvAdvJBK5jh3DX5rexRPfvyCsJ6N2ybBy4C0WcqEXGsvxv12lRPWPRycTkW\nduicH+o4xHtgJ16Hjo1wIG+r6a2BSTxeL6cN3qeJFrOrs+WIndlMZ/JclFtd\n32D9JOUBKHM6Fx4rKA3PweISLNEN88cQSww7k/Q3KbmicUh8+XJn1tLvpokf\nMrWcQGIA4YgVcb2ylr8PUBX/ZX4kMKfg0YvQvwKASoLTzPZ/1Cq3FUHNtGRe\ncUel\r\n=c0/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"887af7dc531f4923f5b5d9017b9ebeb16ae5b6bc","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.9.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.9.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.1.2_1559130776044_0.9452699542808465","host":"s3://npm-registry-packages"}},"2.1.3":{"name":"gatsby-image","version":"2.1.3","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.1.3","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"f01e0dde6c31c1f9ca268fb12bb3c5807ab1e432","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.1.3.tgz","fileCount":10,"integrity":"sha512-79Ug2GX/hk6Gycksf+i4Mj6v4MbsW/qBWBJ5QL00tCDCOxY0FB1vhPdD8EvS3tjREGIrj3s4bSFsS7krLy+Sug==","signatures":[{"sig":"MEUCIEJIp7KYSdAwU7KNjquoTB7jMcn78sYpZINLxsgnyUk1AiEAj4Hn1piZe4AEQ9CXJiWfQQMCkVbJV6tSYNgrNAOWVkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/jpNCRA9TVsSAnZWagAAQXwP/2nvih7SEyRJZuIbf5LC\nIAYrC7DDqhGWmVmVgCxFWHjqiOqsPabQFxluyyGurrHPjVtc/beud/LedCkr\nyK3NA3Pr/ygrcqHyV4ukvf2uLtCAAqbYwzEArSmQS7HWTiW0HCj2afV76eQH\nf88Q5h0BCYErsvwh+jTiTTc7mBPyBiVwSLIoun+9Vsz3hX/Bi27Z9iUY4fjc\nJgSISZEw1wHTjUqUz5l3mI4fhrBdwRxBJQ2B4MaRe9J5btphgyoiGHZqxp35\nI48+mweCCa+I/Mjgq6NkvtS8UELvJZH/S037S2J7mk41lsvSQ5x2CDNKWH09\ngLPlXQiFCw3AQvs5tVUqoVnb+3LLDwfKfBR/6r9FcJdDBL1qS7sk3lMw43kQ\naKd6ic5FCgL9S1y1zXxfKRpW6pj+7NCFBM7EP/1Vz5QfAfrbpdaGww6eiPpH\neuYEbmYmM4DknkDLNM0iGiVUJfet5ySdmnD9Pcv9fZsCAst4OcIVbb8Q/cRM\n3ip4gY0+/p6ZJ7pVungNkw1m48+93KcUFACcaxc8ai5rO5JJZJnhEEgFxXiY\ngV8IsC09qhuNSHv1lTyAUtsD0yF2jVpnNZxuB45K2pLaB+sows4FiG5otWOr\nLMVjhRb/vocmHHLRwN8kT8HGLxKdOgm+78fcP5plPb9jCAvP0vI/A7ccQyOt\ngNch\r\n=Pxxv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"d2fbdc4a8ab454544060693165f4be9c42b2c5ae","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"freiksenet","email":"freiksenet@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.15.3+x64 (linux)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.1.3_1560164939009_0.2308977884083363","host":"s3://npm-registry-packages"}},"2.1.4":{"name":"gatsby-image","version":"2.1.4","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.1.4","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"0a53a0919ce8499a9c480cf069a8abf610affdbc","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.1.4.tgz","fileCount":10,"integrity":"sha512-AqVcHp+vkkQYBRTBs+9w38cHfMFIKpDWz75fRK5fX5HU8FBXiqogrXHwdTguS/uPva9Mtpqjn93TTeGxDWF/CA==","signatures":[{"sig":"MEUCIDbdeaMuZY3lPVMEhatfQrVq0Oyf61I1xgv1FgRt+LDkAiEA4LxsreIzsui/dBXgfpywNTZ3ZYtsLqhlHpEH1ok/bPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAYRxCRA9TVsSAnZWagAASi8QAJqvaB3oNRQU5NJLYH4c\n2v+iqYYO6fLhk9yomKpOYKXRiL2IOEWKmzxoutt8R0yBlra4O0B+mVMT3APT\nEJU+VLDQD6TKHfmjeiO8ti+LK0sCof8Ytpm2m7SO8rrAnWQ0KRZRGjy/Oki/\nnsJ8tk8zOnkHiP5rnqhHGXALBQH5mS/Al4N1HnhBjy8iclu6lbnCqU6QQYcQ\nVLvxgQYnWnVYqt/O4CqTqza5b8rQsMqQujdxfiyX5rVaWSVzfr8dxbPIzLEP\n/RZVaH3jL0LlfiIFvitrYvOSeuEglPeM7Bm6BzB6Knce3cAcwQdF3mXcfMZU\ntIclkl3XItBJGgo0lwf0YCayXHUiZixZbyxSDHSVx/edltNh/vFCTp80rCzG\nUQeybMxTt70PqCOiqDcyOD122bET3P+CoNhmKMspmBok7viXlUb3SHmoGCFR\n2yXI25qcidXjx+kJAkWyhdtETWA8M5Q8PJZ/zHem8r2bcyp/PUqXxyGxUM3p\nShJOJyYj+bHHPsAmfsOX8AKgg1dljqWyrRH+rdua0fD4GjxShv2sBzciAVC1\nAh0KP+1Wm20jN2im2wL6yyK4j2x88e9/xZbUuw2dnfCNzQuJlOlmSxG6BeOw\nP8dIT0bZJOehTiGEPyCteXgXyJjteXUpslwMzCtcKKCL+kbyDbTheWVYYTn6\ncR4m\r\n=9vuu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"bd27ede8516988ff2a17a7610b2e9528adce76ce","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"kylemathews","email":"mathews.kyle@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v12.3.1+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"12.3.1","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.1.4_1560380528822_0.2915311026531393","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"gatsby-image","version":"2.2.0","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.0","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"37c15dc50f9a67e5a46b2cef8a8870c8068ae5d2","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.0.tgz","fileCount":10,"integrity":"sha512-DuCjaRdPW09XKn7VxgkyqrGoNL7RzUCgHDQydsKlLBXC+LdXik9SDI/9EDlsZn0/SLvgdW33n/VBziWpKCa4KA==","signatures":[{"sig":"MEQCIEu1vC4eGgBnrdG4uPnzvdIaX/zOYM69h0Xo6r8hp8rsAiBi/VcM22yb7sOMSLU6orxt2/mC3H4ULTCKzxXG78pkwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdC46tCRA9TVsSAnZWagAAt74P/A5PwkVkcBf1Iu/yp79c\njxUp6vLmhVvqd/U2kien8xPYGN8nK30STfCLjEIUxs2EyTDDegGs1qvoRJnu\nrAwwH6kQgTJuvScQ4ZKMTN+JoW1oO6141qYYP+pQMfbxMYNo3315xQwdg+9D\n8vo51jMpoShrSgz6w81+iU2O2LlXVfJ1x0CUx0X81HTAfm+vamN4EUKntXmy\nGAU3IuhBm0AN2gzsaHiA2OUrjWEM0/DSOnSlTdELJB+cG/j876to8wzSEqYI\n9MSQGmNKIhESdT27T6DWPem60wG+veqKVEJTwZ1LV4rCBju5dNRsgm6ZCBzu\nIrmpGeHrXyp+SlCv6sl/fuPreAs7aFjmrrTDIJuxUVPByxmYB1+XJcIih38P\nyyv7fN7r8TKUTilSNnXGZudLTL3hMjNLM4kFfIop0S/uQlqpRMm6q2JlNgAu\nT0lVVT3ZedAKngWIAPtAR96lcJ/0SvCOGurWoeiQAbn0YoSG8efV6APPMS3p\nhnsze8sh8epvI814mauKVLL8v9eMWJZ74if2//Giv06eJdctpCdyo1bNF2Pc\n5OYF2oxjRRRAsu5t+AyLMTK1HToqrm/aYHgKE2DFP03zYHo4CwFMm7YGcCOh\nNBRrLOE2HOFrUwkL1jMtWE4iR1Hcrhp3QQwRPqn67HskIjFyt2i0+m5lLpJn\n83PU\r\n=YkDZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"90d9440bcd44c2b6d70c78bd30adc8c0eec90fc6","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"dschau","email":"dustinschau@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v11.15.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"11.15.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.0_1561038508548_0.7732368620504131","host":"s3://npm-registry-packages"}},"2.2.1":{"name":"gatsby-image","version":"2.2.1","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.1","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"a883ac469734b9af4018b11dac4d9e24c0e889b9","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.1.tgz","fileCount":10,"integrity":"sha512-JoI3PY4jF1jCFqOEZjyOqsWI1g5NishpRnLa5eTA0Hb0WfcBRvN1xBfLGwLvHJp5QIYM4Fu6pFqpSwPeiCN6fg==","signatures":[{"sig":"MEYCIQC8suCf1i9kqzg6qsKKFRRA+TnbSOGeS7Opw1yAVoZrlgIhAO/6evCQOZxraSTGl5hqHrM1OKDxuCz/RUc8RdTyz12j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdDJxhCRA9TVsSAnZWagAAOd8P/i8LPZhX6GmwTIlNyrxQ\n/171F16FeFubdd/hYeeocSTAWREwt9xosKkKXyPw1WrUGzIVlbMQjYB/yh1R\nWXSdzb3Kbp4OcVQFYGjyrIk458GkS/OA2zLotgMht1PxFjODJ1UY3fj6ChU0\nsO8jdO/a/BMTn557NyzfgIX+Mj8HAYYwiTpDzB88frz6upilJp8HXpED9OjK\nS32aLAuBjN87F8zDTelLz0ZPwIUzTYKhq1i66DaUHAGSeHIW50cpw4SSRaO6\nakyHXqywj5zs6FhN/mXI8IZtyQqosRJsUZIUZS6Y9GuBGomMh7+pDzqGMBz6\n1vjDq64+DRIKmVsOTlY/KBADCAQckXltmZPnRXWHq7TqqZ3ofXlzG/FTIHs0\nXSRmFtY8VLx83ydPvF2IvxwaCqpK78Fk9QJgVYltjgz3NwpsIQEBVTB/VOQ4\nfH24r1HCzBpbPmdTVS/R3vWDyxK4GeSWtP8NhcoPaHR4BVffcsGZO7wuLxUV\nghhxQy5dHkBNfMKBsEmpocMG5yr1cPydp5NWH9zBanLRiHtEKSqZLejQjq3M\nZv4/xlbo5Vz9N0sHpLl+9iM6zxGl4PT+VJLs8U18KFuB8YVewrKB8WJ3+UEs\nH4uizqM1HT9+eHrymk3kYM9R2O9vvG+zIAqsekif8WBcGeR7w2FcwzbKpI9E\nX1gd\r\n=RRny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"c9ea948f068c3ba0be11adae4570900445be0922","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"wardpeet","email":"ward@coding-tech.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.15.3+x64 (win32)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.1_1561107552699_0.23182011981727824","host":"s3://npm-registry-packages"}},"2.2.2":{"name":"gatsby-image","version":"2.2.2","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.2","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"5e4b1fb21c314f9d58c4c6afc7ae294b0fcb32a6","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.2.tgz","fileCount":10,"integrity":"sha512-sTvR11X8dM+5DcvP317mH2xyZeXbNDd0ZWHypfkWNV3uw7e9RIo6Xm5mlI1+wqGGVQzr+Jm/0QQRwLJ9uGp7bw==","signatures":[{"sig":"MEUCIBCbUlii3a/ZA+yrg8mARpDkS562rD0ETklHpAWUzRj+AiEA9YuRJtyv3J8yOuhz2ZdiiehbDmJ6e2UsiEMHM0ytryc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEJuFCRA9TVsSAnZWagAA2l8QAITyqJuPp8kgAlznKQtf\nbuQA4/gGl+bl586LB7KtG2QXZJ21W5Ke0Yw/3PMqg6BSTlzX1pqQm2r4MSj6\nTWq2lwPkYq07l0LKhIM7Lclpz1iFtQLloyoZRmwjIUa6B1Dn/ankx6Pykcgb\nbgfmeO9LZlbjR2xVNq3G8D2G0BCGtmCAB16MFS5xq03U2Dzzn4KynW0TJdap\n5FwMDpI4ioMYCq23tAOjq5IusTfKE3bkbf5FMUJk2H2Fp9Jj1vaq6DXmzzw9\nuvbhtWxTVbZT/Ke/+5tRGxlkeiVgITVrzMgUaAxBOYrmyl5At5HZurgeYVwb\nfh1PI9omVXzloergEDjf8lxA0pPFSl4Qd4FYDQ3CgnUPqqutg5AWeEo0Wmy3\n1BkZQk1E7e3kD7tTxkArtlZyMRNy/5ehaYGTtaMNO2LQJ1U2xh0lzApITfxu\nAjOFHpPbAl4Cn2IL2U3/9S2zeKR9GwEkgUKe1WVSF0ZGMB/WY1rDrZZRUf30\n3y4yTV3hNogE+7qOAanAuzya4RQ8PiVlO6vxdDWmwJKq4AqObqqe7mQeahzU\nv6v5SPWs2DQ1WWLso0j/ixg2xiT5pIsAA91QpO+UPUyUhxxoGxQvWvalkBjF\nBWGtOSwNQHWvKX+Ajr2zuZo4ulIVJ8cdOPoVm+fnp1X6h/7KE8Za5z+oEExY\n7pDC\r\n=V4O6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e140aefee2a8a2ac893e151ceaa9fb238465f517","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"wardpeet","email":"ward@coding-tech.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.15.3+x64 (win32)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.2_1561369476791_0.39628885206026965","host":"s3://npm-registry-packages"}},"2.2.3":{"name":"gatsby-image","version":"2.2.3","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.3","maintainers":[{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"568342b3254d40fa1ae8150991bb96ca63cad463","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.3.tgz","fileCount":10,"integrity":"sha512-FRmKHkbvbJXYzdjxWaTr0Btm3yZCIFiEMXPf6VFTCaMGXzRUW30mCpaffqy10frpr9769zZC55LT01k4VHKaBA==","signatures":[{"sig":"MEUCIF7zleyLHDldH88JgTWHx4hlaY6c1wuR+4QJ5cYoxwqnAiEAqd43iba9n9G08Y/r97MHMW7MKtCqq+lmsWZFei+Dx5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEKaaCRA9TVsSAnZWagAAAdwP/j9KxNnrGXkbUpJGdCQX\nkDhBHz5XZU6Kjs67VMWXlYZI6Z2NgXL9mtQC93UNILyANFg0XP9tX+6iVphy\nrm+yh3ur2euTJuIK3OLjFmk9XhlGvgnmot5p0tHYssFXIOfSSoOS6uODKY/E\nEDIiN3GoaX68UjgaOxCXeL1Dr4u5tmVI5y+ZWkWMDNH5f3PWZUK4ZgwOEGyy\nVeKX54sKyrihlenssur0310XVbKG0mVo2rzOGs8cPbKBdStnwOeWpLwGD7Ja\ng2LsrJ98QmPPfXT+a2IrwYSDL1sQzEZ/R8hrF73CsjaXuOH8dp6f7MzEnYKA\nvAeLZhx1pj2ws51xZGxOHnN5SimrAAJpKFGcwMAN5vjavsfd8opv1TP3RwSP\nDLspqFpLgBtyIZPI59z5wdZ2MhJQEfqZhBHNNwQdKUGpYvIe0fbd/JGQaBRO\nmYp5G2VIRt/4V44ytf1JI7tGs5Cm0e9K7Vnc8Bz/4iiWFCTzmpN6bk09sCF/\n+64iWyh58kNybW5G/i6BH/x61frnE4SFnTstNCZgVnM/1Vq5o+mNnNVb6k8A\nK9GZHNCrb6LSw/vQ7WQ2qaeMpFd/uNVDmTwZZi6vZF79ZxK6WmulHe4mSWHW\nGvNzsZPChKZCc/Rc2J63V0ZvKL5JTY5B1qx5DnCd6qVOlK+mEfFJlElZEhJH\nxagn\r\n=PYSE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"023135d6c30dc93eb46edb563c03e89134b3733e","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.9.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.9.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.3_1561372313231_0.6111781341819971","host":"s3://npm-registry-packages"}},"2.2.4":{"name":"gatsby-image","version":"2.2.4","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.4","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"d6c8b42feff1252f7d285584b7107a2aae7b394c","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.4.tgz","fileCount":10,"integrity":"sha512-wlbqGsfIX2+ILz/fk/94fDShc5zfhTlj7vYGyTFZfKombvwPXFAJD6pey4zTBZUUBrxMt2tROMXNnmFi3wGyww==","signatures":[{"sig":"MEUCIQDuj5zoz88FgEPyiqc3+8lr2yHFXKV6OJEr0uo5pbpmRwIgMJhwZzRNndDDDQgZ9QGBkirnPyqzwsI8ETMB8EEdQjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdG78rCRA9TVsSAnZWagAAEfEP/2U0I9dewqWowtWCzgEZ\nTr3UgtOezwqQFaj2iswdo4xxf62maQSvskBKx211eoWl8MMY2S5+kg4ZoO7i\nDCzlYPNuuKYBuAd0fk4Wr+CCE+e0O9d62cMtW+8vvM0Jwosa9bxV7e/lZhEt\nC17fIRy9IMLzWJvUYHxCTs/pzUYvII7k38l36LBnYDG1yC3bBmaXOgRu0Pcd\nkIHB6WXmexZMXNX+66ZlOzPievdGFIiB52+4WtYsdNXZCl+/fK7z2wGiEFnf\nUbVo9fTT+zphvd9mPazAroMHTFi8dz9Ouszwo6ujWC9wrkTDNlF3sb9hVt1w\n/bZwbjFikFrbpNZAC599+qj2b2p6XzscQcYnKKspBCAe21SNK37D3aQcLdq1\nfRl1P2iO8jUGALRo9JSVLUVyq23qPmXhX0DTY1JrHOWzhBygrrucnmWuaAdY\nZpoxUJPjhWC/GccxDQciDR4YXhGDHMZavhk+q8iyyYJV4D1HrmqeccDcwnz9\nxeJkGGRYjTyE/czbl9V+FdeCOQXRT70gUMQeYgXRmhlfly4PwArhj4u9WI2k\nWy/qlwvebXfHkxZwPYpV1lpudYnCC+i0V3jTehMM1pGHD/OFx4BnohitArV4\nvPxhARjntqxMpcGugAt6pCN+ZgVcLoI0jj0snV79a5ByaHvpDJQr7kg/xA4U\ntU9R\r\n=0tdF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"2fbaa3aed691ee2554978083a605475401309beb","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image","type":"git"},"_npmVersion":"lerna/3.10.7/node@v10.16.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.16.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.4_1562099498260_0.48832942860143036","host":"s3://npm-registry-packages"}},"2.2.5":{"name":"gatsby-image","version":"2.2.5","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.5","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"2d9bfc8ccaa66a05990835fb825ff157d9293e8a","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.5.tgz","fileCount":10,"integrity":"sha512-bf6NmR8MgjwI1RcOEBSjBmfUBzU7I1/c8/fJjNI7PkjDlW4lTo8i1cnojo8loGYB3r1PiM6G2lKAufND7t4TCg==","signatures":[{"sig":"MEUCIQDSJPwPcpVujOMGEhxy8LIk6fWKWDmwrnEWXdtTpS3DJAIgGfdw1qTma1N3XlTsPX4/sXWsHXZAR8ETRk4qrgN5k9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJw1pCRA9TVsSAnZWagAAh30P/37JBlwdV3L1Z8aALAWW\nKWAznzSIR6WUOgG8drQQtJQMyWYA5yHzJMMsOEQvTq3KQw1v44sotwhs6EmX\nU5CXEqqNLNkL4funyr2ULgeWYHHZZdCIpQZku3V0GShqGtOXl2e5gLW1v4wj\nU4tGsdBFbN5myKy9x28xcejZlUq0AhmH3lRTvSONxDi6rwM61FhENtaIzti6\nBytinynyf/0MDJ/V9pu41ZoQeNdsICj+usoez4WkAnwfAXRIpqD4Zu0Lafla\nzviPtvaFMxswXe1Xmj+FuUTLa8JV88Br5FLAdSYPN9tCZh7VvJy1/NtUDVru\nuf7S5Q8LCaflKWO3RxZil4yJxsP2855MUOd0YfqN50pFX3S91YxmvGikTUHB\n4PZn5dXV1aDCqoP7hvYY7KaP8F1Hd77xFtrrlAbe3+Im3PPXJBknYcpnHJaW\nl8W6KR/f2RmHAlR+2k68rV5KKmClBC0Hr+QNBK6Q9qyvvvxNOByIrvge5HV9\nV5wtZTNRSECZuGgV+OeP9iPxOB0EH4/4Esz7TABzw+7488NrpQfR8+dGUaYf\nMPknZv6KImudF5JfMKfoLCV8+pKSDxIUblcoxj5TrDkHxDItVKbr9s3glRGG\nxyaqtuv0dMP2L3AIR0ygdNzluCr9gLUkSUuA7W5ydMXLxuzHYc5LeEcf22v1\nJluZ\r\n=VdSx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"a3288b8efe961df2fb357793017a36b608b39549","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"wardpeet","email":"ward@coding-tech.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.10.7/node@v10.15.3+x64 (win32)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.5_1562840424464_0.7364724466801371","host":"s3://npm-registry-packages"}},"2.2.6":{"name":"gatsby-image","version":"2.2.6","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.6","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"669191cdd5446242b0f3982df156a4bea971c5a8","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.6.tgz","fileCount":10,"integrity":"sha512-gPAt6vUUNVN5iftBrwZykOMGLOAameq9IBCXj5z/egPFIWF62GoqkWQX1/hO71qhyEszNYq+ilwBzkJVsJIP2Q==","signatures":[{"sig":"MEQCIG9drtLYJQkZA8ijGLC3K9jQzRg0zXsxe+FqtIqzH0q1AiA2UDHZmVuNwsjrX27otib+tthUBeEettAJVsptjgAhMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKKMwCRA9TVsSAnZWagAA0FQP/j82AL8l3+SSoJEimzhA\nEJQIdGbL4PqWlotTZzoF8hMbA44am7cFFYBHfiC4h/hm0L1xHb0GBlz/CJql\n9/+y6DFphWkXwS17ZidoEYInEFkitkPd1ahkSAiCPpBp8XI6I1bmsunu1We0\n1aFxmmh9p6hyphI1Ce3dOkiQ1PNKO0TjmseuHDiV8ou7qz/4PJfNB5lGYrFn\nPT9Os5bFQsaPKIEtOCAKld26vxp6B3sVK9lTx3arumx2t+YvlSB5IrykQCii\n8Hy1ME6U0/1S1QzKDYJ6e79uSkBYP9m5PfJrDZ2ZTFJs+ol+Tfs54QywzFab\nNzWbPFRMFtC538fZIL5uN/OYDiSUCaAdK4bD8Qr2uyD2NoUriWKopL7vGEav\n2ViVygH3z8wDjnM1Ya7mucmYpts+PR45T9J96ewBC1NKjlTaWTcB1tzBKUb+\nQrIBRSq9mMYLaTtGwIaBl6RLLpb56FlEfubopJ8OfQVkcyQnqn/ayI2lpmFU\nWWuCNDSgkHhs54dFTF73IfcBQnhIBJ4OfjXeWgO2a+mK/as3PWOUVO8chRTH\ngfar4n64MVgJ0fJL0+XEaOCrJxbhp6UZeWoDMe/QBiWn0agUJs8fexWAElT+\nkC37WVOqyg7VFjnZBSl99yCclkOhQw+PRPOW7cTNPd9Zyd+1cluV4+4RckQe\ncDBL\r\n=Usg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e900ae106a535668d46fa68bc118af9381595653","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.10.7/node@v10.16.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.16.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","react-testing-library":"^5.0.0","babel-preset-gatsby-package":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.6_1562944303433_0.014899957354107984","host":"s3://npm-registry-packages"}},"2.2.7":{"name":"gatsby-image","version":"2.2.7","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.7","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"358e85589e4feb125983814f51e228509fcc2a28","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.7.tgz","fileCount":10,"integrity":"sha512-W67bYjOXZlw8IvGd99ZmkeU6GPfif2SifLsqevIOUkT7ESiY6ZjOUaSXggyyKTzvMZG5QCBUl88JIg5rBjHCwA==","signatures":[{"sig":"MEUCIFaiuaL4ybp4DwlcWjXFSoHDYLerhvqGyA0+K+MvWfa7AiEA1ZCsz6+bCcvQGuxolRRAm/Vf4L8s9Nmh20bg7qQRMjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdObVfCRA9TVsSAnZWagAAjcMP/0EqW04y/p3UNW9l6xn/\nKBdOE5nIMibkyYMqykcsXskP7rf1OrgDSnZZ5T4qrWvlg2CG/sbhlYKjwEbz\ns5QySM0VQCPc2YqbRxLooGMLeIjg9rBqv79DysGNXG3XcGnZ0m6WV16WsPCE\n8ZHv/4nwO2u9bSN2ssWfEAoqcgYPMtLaKuJ6kIB3UnLsB2oYYuKGQAbHjTXt\nHWppbECgXJIlSxIU+GOGyuWdycg3FIdzLd7tROVKO1+vI0ToKi4pnee+bzgP\n65UvQ1kO9AKHxLLv9b32h3nfcYAeItzlpvA3+vVjsuC0f6Oust9r+uZ6kZss\n1e0K0U1y0eeJjIOS1++kgh0zYpgt36sSD5CxCz1SgSk/63zu9Nrf7mM6BK4d\nnKyZpSjDbzq+He6b/4GhkMKT+7KbtWHrdYqro9TUSTph7727c0ycFtiByI6h\nPAbbJAsZXV+gSM5X5GH2BaaJg1urvWW459HKgquY1MRMlo9QlFK6BIPLPLC3\nUSDOWORbNaY6ahnSH61XIF116i0zlW1gSubeeszCDy7i7XlASUXm2cGu9O3U\nlZokr376GkPqLMu220zjuDP1rtCRIu5pjOTnT8ozILBCFfJ1sG3o5CCviXOk\njIZ3RyTh8I749SeyF9pvF0WmYPwk6xDq/GVljrSBp1gt/ENhTiupGEVI2VGj\npciV\r\n=7vwC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"36a90305b5b33c1e66306caf4d94525f92233855","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"pieh","email":"misiek.piechowiak@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.10.7/node@v10.15.3+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","@testing-library/react":"^8.0.6","babel-preset-gatsby-package":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.7_1564063070145_0.04606096671478821","host":"s3://npm-registry-packages"}},"2.2.8":{"name":"gatsby-image","version":"2.2.8","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.8","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"edebdda1e4b823735693737d68855a7fb66cbde5","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.8.tgz","fileCount":10,"integrity":"sha512-R0hc37xf03Bqi51TlRHuu6KB5sFiXzHx0tQotml8TeFXu1k5yvV13D8fHhlHCZQq5zJe4KHx0rGfAprzb4s1fA==","signatures":[{"sig":"MEUCIHiWUrBtqxHwjHLfJIOjeVmB9o08Lbboov/M5bPBfmw2AiEAiHWXrr1gsQcewb00QOTBknTjtlP4hXIhW5geqxc1UUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQuEbCRA9TVsSAnZWagAA034P/iGkLUIBDD74VtX8tDSK\naz+trd3YJtFXK0UPBf6pBjX+BNW6f/h6bV9nj4np6Pcyq6PfEaDrligtwoGb\nkDfndQOT0ZK1xWMotCI4qwuQHmLkXd/suM+PAuCkpe94HJ9TDqTWsBU7ZXc2\nLVKONgq72RMZIlz/az+nBIB+BUfGS0QqmAuOXYFsMacEfXDHS4XIcSxb+Ii2\n1r5KM6gYNs+xLkbQfuLm09ZyTRNqNwHtq6m89MDzlhp1FPxvVzQk60rsS0cz\nzHKHluiRgi4DnHjvp8U8ntwcg5GWUaGfGdOm+gtx61ipAz6ALUTQ1cycLBW1\nP1y4dPfpkJssDTEsmETm/miX33Hafz45np1PWlDC7za+GlhztseInxFUxPPu\nrmrESOveDqpB6e4z7qELUa9g3Tbiqf1pFluXZR+HN9MiiDg6L+HHfI7xyrB7\niyTPGT2IbNqdPcFP0UYHpWq/b1tBwCZAiH8HbxPXfqY9djKMIYAZd5A/vCol\naEGUFmgEOoLTbSaEB8y3bh5ktwnIyD2EbtaZOkFA6PNNzrRMvQeq37UOv/9w\nQn4r+pdgh+EK8ood394TFHVQGBOB4IlBWPhFz9T8W5feTvHbfpwWkr223Pfu\nEMV1eVxC3P8sKMxu7TUUh4hpd9MA/wAMXxTNi3By7ZVZkq/eXD+hJkhK11o0\n01kL\r\n=n72Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"d879a2adce22e661ba29b22c095be4d54a38933d","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"wardpeet","email":"ward@coding-tech.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.10.7/node@v10.15.3+x64 (win32)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","@testing-library/react":"^8.0.6","babel-preset-gatsby-package":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.8_1564664090927_0.7378246931158243","host":"s3://npm-registry-packages"}},"2.2.9":{"name":"gatsby-image","version":"2.2.9","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.9","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"davidbailey00","email":"davidbailey00@outlook.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"f4b89d9ca939591ab7aa20b43c3c82a2d794aae3","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.9.tgz","fileCount":10,"integrity":"sha512-jmHoEgVDBsSLxWD+W78UgZRHcsKQMN2+i0wR/bbLzILESLirs4s4LeiPmSquj+cqMEtwaZ7CIDEeHSamelY+zQ==","signatures":[{"sig":"MEUCIEGYxws9FDE7Hw3wXgAmssLYP/v9eaR+kJh5ZD9YBo2bAiEAn9rVQrS7kf33/FgCTYCo0knEVKCfdSygrSpsHAXbT0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdW6IGCRA9TVsSAnZWagAA8u0QAJc41tdKVWfjJiaar/8n\nuYJGsD1EyJv5dG4VIBDYxspHsg2NTGgcG6P2mcC8si3myTT6H2GMe1dVVdiv\nLy36gO3niewCr7TydtNzZYrDThKgDulz/PQoHtmgW3DiwfUh8gkkKRakZsVo\nFI3Skfc7ZK50wu1UBKiPD6udMn6q98R0qxu7dlSgbzxiYkpBVaxVYM1Np3vX\n5vEU+VdFp5R7/Yb1txwCph49iEEeA0/l20YOdhopvN3t85BSlXdOcCuALoSF\nFH0Hacbi7bYrXSqak2tWZBIYA3YfoJrgnMwJpK+jn7MbnK4qipi4MhMThfRd\nxt9j3vifo40OPRoC8nZ1yd87zGIrpfT6lQeSQzQn0NwvBHSWREkzAoPHrULS\n6n0cUJmbA8rEp/jXAegzNTF3JKuxNozH/SwXUXRxuCj7tqrYJqlZqf2y1vBD\nHsUaVBqSJC1hCru77IlQ9SXanyyPzOXlo+JSkiLlJ/sUj0I2exJqJMS9pO+9\nc5geRZ+/JvHfyhz6Oba8ZTUOOMtC5KW4c1pMKTq/OVACGd7/X0frfswL53XR\nTTgitfU0elqSrmZ9WkHHSzSUtf2zxrKPejekYASnD/0tH0X73gs+rXnJg2Yv\n74APDNJDdu20nmlGnzZrp4prJiMZiUbgZCkG2DQDQwXJPOPA2KRD7EvpPH9D\nUEMR\r\n=d42i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e63a7ec48acf11fb0fdd6cf7b5e04c956ba02a4f","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.10.7/node@v10.16.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.16.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.1.4","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","@testing-library/react":"^8.0.6","babel-preset-gatsby-package":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.9_1566286341334_0.21061529766938736","host":"s3://npm-registry-packages"}},"2.2.10":{"name":"gatsby-image","version":"2.2.10","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.10","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"davidbailey00","email":"davidbailey00@outlook.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"0375e273167221e3ccd1ae3b4e3dec52905376df","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.10.tgz","fileCount":10,"integrity":"sha512-wvbxqYWxg7te7ui6RjCgohcVTvcI1b0PBZNor548Flg/0h+oSGnUXVDkz9HO8uS/vWlIbMpXonRxvnZCGu1Y8A==","signatures":[{"sig":"MEUCIQDtbLpx1ewUIozGNt9TtjVRKTlR5Gn3NkLrv00TcgW1KAIgIkz68SGurvN2+SC+cN/qgMwMuw1R4SdtwVsaGZgiQsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXEWnCRA9TVsSAnZWagAAnzMP/A8bZmNv6FyIin9lkUy7\nbtq/Z/gNFgtyenszIxZSIg9UyzLnOZutIlF0x443HIZBLuMLStIRieV7OB0/\nfNeh8I+++CVQX6Lo6ZeaYZ7ofA1/7cBhX+hJJvATUExBHvuEs0nHAQXsNIn7\n278+83Rq+oFwWrzd++IEPumebA9uhtSjA2jehlP+M3DCRQrJ4YoH/odjz+Cg\nb1NiXlfdeXrjhzi1lTRf3Cnj5NIPg19O+QhgA8Z+fF/+gjyU8XqZCdS99zTp\nwPMnoSnlRyNvrhI+pYVcbJJ+k1X4tOxybcUhHQBdCgC7PsyqDutfpTPbJPjB\nmEm6TjdKgE7AuwHI3QqiEB7t0JsNo4xZ6zggwiZm+9fbFwLZc2Xf7qynxlwT\n+XCh7b9BO7EcXJ9CiVpQoi5U6+M/wo2ty5hqcEzhmAaqo8FSKhqGd41PfX2H\nOk1Dxloy/bVSBhDwuQ8Ih1kf0t6Dk292bY1zPP9PmzYEcn1u6XFpy9CVPrRu\nwG+kSB0/pfXeyT7LxicBMhZ2SduuXMyAaYpnPYKcqN3Pl7cqeaq2ku2dn/qO\nHCSaGozRXn1JZEPhg/IiCr+oVEE4lqTDtFKdSDqIGOgGPcN508i+px/zZWl/\n7p/D9KlUaplygwf2RWLKFdIE11g8YF23LqFd5apk8ysd55raErqH7Dir1iu2\nBCfp\r\n=g5mE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e077f5c86b839a34b6d5f3a868ca3cb3969b6be1","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.10.7/node@v10.16.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.16.0","dependencies":{"prop-types":"^15.6.1","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.2.0","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","@testing-library/react":"^8.0.9","babel-preset-gatsby-package":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.10_1566328221732_0.4665481899530495","host":"s3://npm-registry-packages"}},"2.2.11":{"name":"gatsby-image","version":"2.2.11","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.11","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"davidbailey00","email":"davidbailey00@outlook.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"79d5760ea2594f29cfaaa9dd0e9782a74e075971","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.11.tgz","fileCount":10,"integrity":"sha512-leO7NSIoTpyBCM78/aCDNm8qAf+SW3OGgR55v1UPk/wr2Z0Wp07oxk6IMz4ewT6JcUOwQH5+14cPlgA7ZBaUlA==","signatures":[{"sig":"MEUCIQD5Fv6Nwo4bpINGafxau7MvbS8ZFzePGxy/jG3H91wyXwIgIjpVUPZVCO78x6GLpogrUmzNM4ZkPD8bt0od7vGhoFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXeDxCRA9TVsSAnZWagAA9sAP/j3OK8sKZy1tMK7I31LA\ngtqa0yxDlDHKmRpPZvWSyXQYxL2RhBEqh2IAKL8uaYGojeDX7UH4pWmOjY8f\nVKswnqUIrDjJC/I+eEg39tNz9RJJ7UW7u4X0SDRwS9baAhtKvhXTl0uyacrI\nqUTsXE9AKsdXJ6zNOwjP1gu347E3knnoX3fMQMPHkA2vkcvo9VzJJWADqjil\n3/Uh8cUk2Xv1YeYQNMJHCvqemmzSi6PMQNn2h5VVCKZpVXrhaFc5y7jqX120\nr9j42cFfVzHo3oCsb6IIluljJhbFf1H4tu8IzA37ufbJahbcVxftxEM957ug\nXM1HUidmfcOt6fl21L0hJOj1ndUFVMRwz4zeankCG66mSfCsXMFBT4JDXovY\neuud0RJ6nSIeY0xItuYd8NBGxgwNif1rvOqVnEq5nwgPh+eyP9ZFcs80HCTY\nxKbm0OjgnUmJcGYizYxLSXlHiVe+2Qr2si44fWvRLJc3C71xnqS+GQBnb5XK\npzfZyyhzAFjuEDpYvZdDZvoaRbQlHfHr4JAh7ftiXWKjXgGdRyj1XP5jlvxZ\n/vrMAlpVDZH24XXXFS8RUTfbYTjTVpSSu9CphD0U4i5WZ0fFlN1NLWQ1iXDX\nwRKVom5FHw59CPP4oyIcGs+84IDjgF0LAI0igbd512m4A/Aic1/Sq0e34qEN\nUq3B\r\n=HpeX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"3d4663ae1df1a694ca04278099266ab8e6dfd9af","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.16.4/node@v10.16.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.16.0","dependencies":{"prop-types":"^15.7.2","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.2.0","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","@testing-library/react":"^8.0.9","babel-preset-gatsby-package":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.11_1566433520215_0.9285977848268376","host":"s3://npm-registry-packages"}},"2.2.12":{"name":"gatsby-image","version":"2.2.12","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.12","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"davidbailey00","email":"davidbailey00@outlook.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"90acd2d6c4e1ae8ed070e7d78e25e9113c37f777","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.12.tgz","fileCount":10,"integrity":"sha512-XxpMcn58+ZH10LkNghalA5XeHyAAa8YkVA53rWbkezWKED3YauaQcnyNH3FC4HCACrqD7S+QJo5X2zPulGbFqg==","signatures":[{"sig":"MEQCICjev2MF3baItObGKr/fBZ0kdJVS9Ig1m12+Y7Hb2JEIAiAw/+CpvgHOfW3KPduWVIJA1IUj6sagwx4ONH8Lx/Is0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXkluCRA9TVsSAnZWagAACkcP/0eQX9Sq1GMBZZ+jRJoR\n+HF6HyEDuMVTkEA5A3oXVMUn0Loz5x+CHWWLICSzzq0bWofRP+NWlG1UZfBR\nLmNEtQS+3iY12J3scB2tTC9amvaDwyZ0OLbjMZ3cHQgAOM75hh1DgyUq/s8U\n1sCW0Vet3J+PUgAsgvAbOLCJW+KhLIjIJL0Ugub5KstkYR+7B6GkpZfP2fip\ndRiWcrB8CmnLQMEMpTSgC7gQW7+S6yiWL/wxSoRRkGd8Zgg/gnVl3ZBz5/fH\nqeMga90qn0T5vHIqaF1ymeJHu50Zf4BSz/GTmZZJA6o5cOwWIR3pjp1sg/Ga\nIwBVT8OCbemT5hP88QnciKtnjuuM5A6hxGBuF5GhLFOXj4arjlcTstaAf4fr\n4HVcDXJWOgzJLYv6n3vEIVxAI8ikSlS7juyQlKF+TPid/SVbrty5qPpWhbXU\nppjn0AbuF7HBnmaLp3js7E12mJHS+eGD4Q9RIpeCwY0G8HGXURadW3EOzJGu\nl2Zx+6ykN+ma73eHZpxl9QyvB4E0NbHe2ABOMsOk0cPy8kFCpo4l3TBIXFE0\n1YIpsgIbfhIqrlhSYX9MqN48ZgeHaJE/n5uoVRd1jdL2Z0SOccy6cbdOsIyS\nUfwd8XMNMqlqS8vCsAUo245eP4e1CcboF5tS9F+ULZhW4ggZZZPon4VYvWgp\nSG1u\r\n=ustG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e9c8e8a6628b1d325c5ae15ebbceec73cc1226e4","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"freiksenet","email":"freiksenet@gmail.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.16.4/node@v10.15.3+x64 (linux)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.7.2","@babel/runtime":"^7.0.0","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.2.0","@babel/cli":"^7.0.0","@babel/core":"^7.0.0","@testing-library/react":"^8.0.9","babel-preset-gatsby-package":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.12_1566460270057_0.626122219098113","host":"s3://npm-registry-packages"}},"2.2.13":{"name":"gatsby-image","version":"2.2.13","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.13","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"davidbailey00","email":"davidbailey00@outlook.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"36af497f55bc404a2e5c6971ef740d82467b1eed","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.13.tgz","fileCount":10,"integrity":"sha512-NHcmuabUh4sNdNSngX8hq0gkNgSyzULq3nrTObIDXd99DzNbr85tjY4rNRS17qPafnbpbL9kv919QzfMnRH9xw==","signatures":[{"sig":"MEUCIBlohNs/zWCnlErOiaQNtP45D9J+2g+WYX+npp2LnaEHAiEA3/l+XLhABqllQB02/A56MoQFMXKKK7BwvPzpkkRLIYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdX7DGCRA9TVsSAnZWagAARYkQAJ9ENIQ8LBdwCibefAO+\nilx967gf82CrPfqMtRB0S0rQGQVWRpfQwdooRRhn9UtLloS4tBNUblBbhI5C\n5mNNOIcZ3L4IHjofNl9A6N7SLIqp3KKQNnjaFOODAJMpGtudnOh68jaIQtTm\nYL2EzXXIIlG2VFazEAqq/ZfkOtYSQlI5EisuEya8kaQFOzzbIhoPUWe90BRH\nTB2qZt/ym/22oVyh1CTplQpl3VsEONjoIv0WzZ21MpLPVhb7H/DspMdG6YeY\nQLd1wmOxuyMGOR6HbqXgPeV2v/LQcBaL/DaXB41EUnLVrFw1/Uv3a/oT/uj3\n35HwPQfu0g6PYMpmDU5HR9L/rIV1aq8VFc4afB6/Nol1F1IRB7YJyMGFSRiC\n6sgpJsglpfSwyVOBgZeklEhzQv338NF9xfqg3TTyCJsyRnbIxbalK5gos9pO\nOIVrDlIA+wC59w1UL/nhN85qPJX3dAz0zbSbvxdD6ya0pRzerwnusu3/oGfw\nCxxBV9nYRsWumYaPEv43TRcDggCIdBVZNorp8AyamZQWIS8Je6gBDKr5Rn9U\nhTqXJ8hNLC9OyeCCXF5SUYg1UWPZELYjvcIxfIG2qygqU0WxX0qxiSVJDE3l\nA2zbLE/5lmo7eDFcn8CbUECzsA9qcZRW82j/tuB2K/p8RD8mRF4qMGZiATpz\nXeD1\r\n=gsQi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"90ac3a5c80dc552ca687988602311914d8d9b193","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.16.4/node@v10.16.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.16.0","dependencies":{"prop-types":"^15.7.2","@babel/runtime":"^7.5.5","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.2.0","@babel/cli":"^7.5.5","@babel/core":"^7.5.5","@testing-library/react":"^8.0.9","babel-preset-gatsby-package":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.13_1566552261170_0.92681483648269","host":"s3://npm-registry-packages"}},"2.2.14":{"name":"gatsby-image","version":"2.2.14","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.14","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"davidbailey00","email":"davidbailey00@outlook.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"f77c923e4cc06c4b855c20941eccbda89d2899cf","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.14.tgz","fileCount":10,"integrity":"sha512-oPaJ2MFokfZxdywn9vNFjcg77bSQtZNtRBl5lWCxny/MAICDAu4HC7kn0LlPL4rgsXGCX2dIs6VW3mCWmsxUig==","signatures":[{"sig":"MEYCIQD8BD+49TbJTaKKA6AjodMFef5ht5C3fy4d175SM2ESVQIhAOoY6LnCFFqugmkOK8P5KBtMQd6L3wEHZ5C4xVoUeiyY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdYK7XCRA9TVsSAnZWagAAdaMP+wWFD9Cd0IKBSn1Om05D\nY92JaB0JujGTqZ2dCQ24rfGUx7r4tnIHxdMiAwNMb4T7AD5iYkMh1381xDOZ\n67GW0uNjB16RNjieMVhhNyKjZmSIIsm9ircrKHQLjgB0sv+K31OMSWlLJnVu\nirwR5Wr/sqc0Ffl/oarjozXe+jT7jQyMa1f8nReB4R5Tx3xd1YUmQzfh2EJY\nbOq/ZA44unPqT5/zrh2QuakclpL0hqqBxSu9zGG0uxI4TWQhg5tMvEmis/S3\nNhndmidwTVjh1M3+5LECe+LxiPkZ08y0Vvj1cJvdtQRDOpxB9G2uw1VG+Qzg\n7BrH+t8zQEbhZ8OsZP+0rZLbX0LzaBSyci4ZyqlPltBstRgDkblEZdW2vFB+\n/UQWaAn6SIuEqzr2oM4dChX2xlhbQirDLg7IlI0ZtZyG7ttSbDuc+adadPlx\nI5xwCD9hhgA6gKN9vBLHPohKv6JIQ/I4rX8l5+uGv46KS7Jt4Vily/tmOKUc\nmAtBqLzuC2m00qXtlnqEOCCvx+rJ8ilCbRsGw2DmgTF4VgEP/M6i5IhSZ7wE\nXbrn/kBXN8Yg5PDv06gMYrsdYishSRiOSw31ragjGTkW/18nhntsx7+p5O3f\nZOshzV4u2Z8g6te8fPIYEtQ+SwXGRCjG8QFzfxwRPSkyMsCR9LKo+wedpTWQ\nRwS7\r\n=x/VY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"b2dcccc414483d084d64f5b96549ddc8c5fe5126","scripts":{"build":"babel src --out-dir . --ignore **/__tests__","watch":"babel -w src --out-dir . --ignore **/__tests__","prepare":"cross-env NODE_ENV=production npm run build"},"_npmUser":{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},"deprecated":"gatsby-image is now gatsby-plugin-image: https://npm.im/gatsby-plugin-image. This package will no longer receive updates.","repository":{"url":"git+https://github.com/gatsbyjs/gatsby.git","type":"git","directory":"packages/gatsby-image"},"_npmVersion":"lerna/3.16.4/node@v10.16.0+x64 (darwin)","description":"Lazy-loading React image component with optional support for the blur-up effect.","directories":{},"_nodeVersion":"10.16.0","dependencies":{"prop-types":"^15.7.2","@babel/runtime":"^7.5.5","object-fit-images":"^3.2.4"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^5.2.0","@babel/cli":"^7.5.5","@babel/core":"^7.5.5","@testing-library/react":"^9.1.3","babel-preset-gatsby-package":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-image_2.2.14_1566617295849_0.5473729880095051","host":"s3://npm-registry-packages"}},"2.2.15-otp-test.30":{"name":"gatsby-image","version":"2.2.15-otp-test.30","keywords":["gatsby","gatsby-component","react-component"],"author":{"name":"Kyle Mathews","email":"mathews.kyle@gmail.com"},"license":"MIT","_id":"gatsby-image@2.2.15-otp-test.30","maintainers":[{"name":"biscarch","email":"chris@christopherbiscardi.com"},{"name":"davidbailey00","email":"davidbailey00@outlook.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"freiksenet","email":"freiksenet@gmail.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"johno","email":"johnotander@gmail.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"m-allanson","email":"michael.allanson@gmail.com"},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"moocar","email":"anthony@moocar.me"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"wardpeet","email":"ward@coding-tech.com"}],"homepage":"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby/issues"},"dist":{"shasum":"64cc1be41040d06337c33a2ba265ddbeece03b5f","tarball":"https://registry.npmjs.org/gatsby-image/-/gatsby-image-2.2.15-otp-test.30.tgz","fileCount":10,"integrity":"sha512-BkH4qKy3qQEjiixOjLLdtHbO4BvJEVuDeHNfx+53yJCyi8YAZQLdFe0QZF8AoD19Ap8AyyM5ap5GpV2FF6UUBw==","signatures":[{"sig":"MEYCIQCKOSVASvBpeISvQAEf4V1SNey0FwJWvzafmppDt8Hx0QIhAOsDrzKXCAjApnxbOhbDUDilwixCtPhJ2RS3noOHoDvf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZAPzCRA9TVsSAnZWagAAAV8P/19YzlSwHxMcs9atQ+9+\n4+iL6XEtyqSetJpxIALZwufMuQkcvDivg+KM7B9xzbWQpPwqw6jB0B4KwmGv\noPKRdc1ozTLD2nPJWW8M1852vYA/LvMY3lfIHMhyye7IjpPk93LfwXQutFfO\nVlSdWYukhMVD9ud99JUG3v+Bn62mdiInXwL045mOT2EqallYr9kB+ioSEAfk\n+R0rBX+9g7Uezt3oADU0t3VwYNVSANTkthoO4j7pH02nrAUTrp53STJpLzAB\nNPbKTA6TsYMa5x4Tdm0RcZCbKPapxJBc33A4t1GjPn8AA3r4H48RKSqcIqzG\n3e9IbCJ+SPe6HRYi+lpOwQWNJWK9al8d+sWiHcT5lXrf0GF+uYdRFYGAh0Nu\naKmkrfpVxnIRLn57Na1n8zL89JRmVWBsdck8eUlIaFZsbjtdSaAzO2uWCS3h\nLTatRkOY+dOqqwkOej2VDgrbGDMdSASVfYUZMTmbsfuoDna1Wbaf+M9ieQax\nfuP60934eg/D9taruwrfr3wGTy9CQFvwhVCzvcUkYnvT5UEb9QqiK3HBKovA\n5CrGYhddEmUOG5/Pucp5Oj4EbGJGPiT3vbzDgwnByj5/SVR9Dj7Zv9fi91iH\nNx44rhDhj5JCrfXOqJuSkUjwmiyhoZbw5e6eeyz71y2M4MFj0X3NvfrUTEV2\n20OK\r\n=SZ5K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# gatsby-image\n\nSpeedy, optimized images without the work.\n\n`gatsby-image` is a React component specially designed to work seamlessly with\nGatsby's GraphQL queries. It combines\n[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)\ncapabilities with advanced image loading techniques to easily and completely\noptimize image loading for your sites. `gatsby-image` uses\n[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/)\nto power its image transformations.\n\n_Note: gatsby-image is **not** a drop-in replacement for `![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```bash\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:\n\n```jsx\nconst NonStretchedImage = props => {\n let normalizedProps = props\n if (props.fluid && props.fluid.presentationWidth) {\n normalizedProps = {\n ...props,\n style: {\n ...(props.style || {}),\n maxWidth: props.fluid.presentationWidth,\n margin: \"0 auto\", // Used to center the image\n },\n }\n }\n\n return ![]()
\n}\n```\n\n**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.\nYou will need to add it in your graphql query as is shown in the following snippet:\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n presentationWidth\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```bash\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:\n\n```jsx\nconst NonStretchedImage = props => {\n let normalizedProps = props\n if (props.fluid && props.fluid.presentationWidth) {\n normalizedProps = {\n ...props,\n style: {\n ...(props.style || {}),\n maxWidth: props.fluid.presentationWidth,\n margin: \"0 auto\", // Used to center the image\n },\n }\n }\n\n return ![]()
\n}\n```\n\n**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.\nYou will need to add it in your graphql query as is shown in the following snippet:\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n presentationWidth\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images\n- Strip all unnecessary metadata and optimize JPEG and PNG compression\n- Efficiently lazy load images to speed initial page load and save bandwidth\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads\n- Hold the image position so your page doesn't jump while images load\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```bash\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:\n\n```jsx\nconst NonStretchedImage = props => {\n let normalizedProps = props\n if (props.fluid && props.fluid.presentationWidth) {\n normalizedProps = {\n ...props,\n style: {\n ...(props.style || {}),\n maxWidth: props.fluid.presentationWidth,\n margin: \"0 auto\", // Used to center the image\n },\n }\n }\n\n return ![]()
\n}\n```\n\n**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.\nYou will need to add it in your graphql query as is shown in the following snippet:\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n presentationWidth\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like sisyphean labor. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```bash\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:\n\n```jsx\nconst NonStretchedImage = props => {\n let normalizedProps = props\n if (props.fluid && props.fluid.presentationWidth) {\n normalizedProps = {\n ...props,\n style: {\n ...(props.style || {}),\n maxWidth: props.fluid.presentationWidth,\n margin: \"0 auto\", // Used to center the image\n },\n }\n }\n\n return ![]()
\n}\n```\n\n**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.\nYou will need to add it in your graphql query as is shown in the following snippet:\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n presentationWidth\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install --save gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install --save gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n
![]()
`. It's\noptimized for fixed width/height images and images that stretch the full-width\nof a container. Some ways you can use `![]()
` won't work with gatsby-image._\n\n**[Demo](https://using-gatsby-image.gatsbyjs.org)**\n\n## Table of Contents\n\n- [Problem](#problem)\n- [Solution](#solution)\n- [Install](#install)\n- [How to use](#how-to-use)\n- [Polyfilling object-fit/object-position for IE](#polyfilling-object-fitobject-position-for-ie)\n- [Types of Responsive Images](#two-types-of-responsive-images)\n- [Fragments](#fragments)\n - [gatsby-transformer-sharp](#gatsby-transformer-sharp)\n - [gatsby-source-contentful](#gatsby-source-contentful)\n - [gatsby-source-datocms](#gatsby-source-datocms)\n - [gatsby-source-sanity](#gatsby-source-sanity)\n- [Fixed Queries](#fixed-queries)\n- [Fluid Queries](#fluid-queries)\n- [Art directing multiple images](#art-directing-multiple-images)\n- [Gatsby Image Props](#gatsby-image-props)\n- [Image Processing Arguments](#image-processing-arguments)\n- [Other Stuff](#some-other-stuff-to-be-aware-of)\n\n## Problem\n\nLarge, unoptimized images dramatically slow down your site.\n\nBut creating optimized images for websites has long been a thorny problem.\nIdeally you would:\n\n- Resize large images to the size needed by your design.\n- Generate multiple smaller images so smartphones and tablets don't download\n desktop-sized images.\n- Strip all unnecessary metadata and optimize JPEG and PNG compression.\n- Efficiently lazy load images to speed initial page load and save bandwidth.\n- Use the \"blur-up\" technique or a\n \"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)\" SVG to\n show a preview of the image while it loads.\n- Hold the image position so your page doesn't jump while images load.\n\nDoing this consistently across a site feels like a task that can never be completed. You manually\noptimize your images and then… several images are swapped in at the last minute\nor a design-tweak shaves 100px of width off your images.\n\nMost solutions involve a lot of manual labor and bookkeeping to ensure every\nimage is optimized.\n\nThis isn't ideal. Optimized images should be easy and the default.\n\n## Solution\n\nWith Gatsby, we can make images way _way_ better.\n\n`gatsby-image` is designed to work seamlessly with Gatsby's native image\nprocessing capabilities powered by GraphQL and Sharp. To produce perfect images,\nyou need only:\n\n1. Import `gatsby-image` and use it in place of the built-in `img`.\n2. Write a GraphQL query using one of the included GraphQL \"fragments\"\n which specify the fields needed by `gatsby-image`.\n\nThe GraphQL query creates multiple thumbnails with optimized JPEG and PNG\ncompression. The `gatsby-image` component automatically sets up the \"blur-up\"\neffect as well as lazy loading of images further down the screen.\n\n## Install\n\n`npm install gatsby-image`\n\nDepending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/plugins/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/plugins/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.\n\n```shell\nnpm install gatsby-transformer-sharp gatsby-plugin-sharp\n```\n\nThen in your `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]\n```\n\nAlso, make sure you have set up a source plugin, so your images are available in `graphql` queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so:\n\n```js\nconst path = require(`path`)\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `images`,\n path: path.join(__dirname, `src`, `images`),\n },\n },\n `gatsby-plugin-sharp`,\n `gatsby-transformer-sharp`,\n ],\n}\n```\n\n## How to use\n\nThis is what a component using `gatsby-image` looks like:\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => (\n \n
Hello gatsby-image
\n
![]()
\n
\n
Hello gatsby-image
\n
\n
![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # Other options include height (set both width and height to crop),\n # grayscale, duotone, rotate, etc.\n fixed(width: 400) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFixed\n }\n }\n}\n```\n\n## \"Fluid\" queries\n\n### Component\n\nPass in the data returned from the `fluid` object in your query via the `fluid`\nprop. e.g. `![]()
`\n\n### Query\n\n```graphql\n{\n imageSharp {\n # i.e. the max width of your container is 700 pixels.\n #\n # Other options include maxHeight (set both maxWidth and maxHeight to crop),\n # grayscale, duotone, rotate, etc.\n fluid(maxWidth: 700) {\n # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.\n ...GatsbyImageSharpFluid_noBase64\n }\n }\n}\n```\n\n### Avoiding stretched images using the fluid type\n\nAs mentioned previously, images using the _fluid_ type are stretched to\nmatch the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.\n\nTo counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.\n\n```graphql\n{\n childImageSharp {\n fluid(maxWidth: 500, quality: 100) {\n ...GatsbyImageSharpFluid\n ...GatsbyImageSharpFluidLimitPresentationSize\n }\n }\n}\n```\n\n## Art-directing multiple images\n\n`gatsby-image` supports showing different images at different breakpoints, which is known as [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). To do this, you can define your own array of `fixed` or `fluid` images, along with a `media` key per image, and pass it to `gatsby-image`'s `fixed` or `fluid` props. The `media` key that is set on an image can be any valid CSS media query.\n\n```jsx\nimport React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nexport default ({ data }) => {\n // Set up the array of image data and `media` keys.\n // You can have as many entries as you'd like.\n const sources = [\n data.mobileImage.childImageSharp.fluid,\n {\n ...data.desktopImage.childImageSharp.fluid,\n media: `(min-width: 768px)`,\n },\n ]\n\n return (\n \n
Hello art-directed gatsby-image
\n
![]()
\n