{"_id":"next-optimized-images","_rev":"57-e5bb76e9d3622b5e3e2e389632e54c0d","name":"next-optimized-images","dist-tags":{"latest":"2.6.2","canary":"3.0.0-canary.10"},"versions":{"1.0.0":{"name":"next-optimized-images","version":"1.0.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","url-loader":"^1.0.1"},"devDependencies":{"npm-autoinstaller":"^1.3.1"},"gitHead":"5b5d74cc94c2b17517a1413a54dfba644e3f62c8","_id":"next-optimized-images@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-5IK+cEhIPsAaK0tSIeYzJoHiOGaoP7jJXphT2z0pP51fTa+H58PtX3OOt4IKMCbhfVsr2fuEpE/qM7SLrBuK/w==","shasum":"f290763ca21bb8dd45c9f9dc3545a323edbf881e","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.0.0.tgz","fileCount":4,"unpackedSize":13203,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDW0NriEKjiLbvi75VWff1Tq+KE+kEtlI5Uk9KV4uDLYAiEAiwsfIgr3k70YR0Uqk5elEIO0Z85eArVkWgFJV503aew="}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.0.0_1520890382652_0.523079673732918"},"_hasShrinkwrap":false},"1.1.0":{"name":"next-optimized-images","version":"1.1.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","url-loader":"^1.0.1"},"devDependencies":{"npm-autoinstaller":"^1.3.1"},"gitHead":"dd65ef9d844ff2fa224ba39a27a2f8bee198b356","_id":"next-optimized-images@1.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-mjdi0GufiMIHk1fosjw2KXpvmcAoMa+umzSd/kjEgKRg/1fGGpjHyELmbcJz/oGv9CR/AdqWfKWuf8GQItzLzA==","shasum":"bccf4f922d93f787786a39df80f6f9e6a853909b","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.1.0.tgz","fileCount":4,"unpackedSize":18144,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlKzv15OwTaKPaiYleQnO1+yx10ehprSvRBtZnXdkISQIgPedyPgAdjE9H0HwSL6Khyakb/0ZCtRgi6r8VQq0hCZ8="}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.1.0_1521061677700_0.9811651799009937"},"_hasShrinkwrap":false},"1.1.1":{"name":"next-optimized-images","version":"1.1.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","url-loader":"^1.0.1"},"devDependencies":{"npm-autoinstaller":"^1.3.1"},"gitHead":"7ad2ca71d18dfca4ad823e807ba36799dc4d7f52","_id":"next-optimized-images@1.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-56P2nfXwY6/p8VcMc3xg6Ugb7rlXiXLXQNIWDUSb7VzPzGdSEYQeimSobufqt9B/ZXY+AJkh3gdM3nqg5lmq8g==","shasum":"15cba9573e5ab14b7f5efc4ecce67939d55d4d1d","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.1.1.tgz","fileCount":4,"unpackedSize":18328,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClPWgD32N5qga3XLkA/+qHKMgdLSHTmxecdb9PTai2egIgAKk2g0/4Q+eBEEZWTucamNxBnNLj6HcPjFOxpoG9LJ8="}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.1.1_1521062267742_0.6353742225267716"},"_hasShrinkwrap":false},"1.1.2":{"name":"next-optimized-images","version":"1.1.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","url-loader":"^1.0.1"},"devDependencies":{"npm-autoinstaller":"^1.3.1"},"gitHead":"542ec98ac064ca3652b75cbb929d63cd230f2db3","_id":"next-optimized-images@1.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-daqDEav66gw0bzMATK/nJisUzDj0oBoIec52HiC3l6vJvbk2qnSI8qywomTWbmmoo11XyP0wl3kmbch/zxJNig==","shasum":"fafc09781214b04df99f149061a7d2cbb0a08f3b","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.1.2.tgz","fileCount":4,"unpackedSize":18481,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDY+v9bgxixa8DJSZQql1IYDQmG+nLA5dQ2gyRancUsEAiBHs1pi21t47op+kzhTD5Epo7qDu1oktngnQ9mmNhXz7Q=="}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.1.2_1521130110575_0.5158059472008636"},"_hasShrinkwrap":false},"1.2.0":{"name":"next-optimized-images","version":"1.2.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"npm-autoinstaller":"^1.3.1"},"gitHead":"e5857b853c90da163a541824b1e9b7ac5ec0de01","_id":"next-optimized-images@1.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-6PaDraLdVhMZabTjBiSLdGAiU7bQBpm+a/PRNlcwoBCUwzPPEtlBCr1yOh0tTwKk04x5frXRjPO0D1ekyfsaag==","shasum":"ee906b3fa8cbcd7f3660ffa22cf3ba578e9bfa8b","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.2.0.tgz","fileCount":4,"unpackedSize":20492,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDchCeugjnhR7uhY6rhg3XosI7RJG9jROtLRk6AZ2GZ5wIhAOhck3iCpZ1+9RR7lbPNTx8hqitee1fCTjl6GmKnCiGj"}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.2.0_1521145645672_0.8400338875580631"},"_hasShrinkwrap":false},"1.2.1":{"name":"next-optimized-images","version":"1.2.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","files":["index.js"],"scripts":{"test":"jest --coverage"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"jest":"^22.4.2","npm-autoinstaller":"^1.3.1"},"gitHead":"aacb5f1529634c3abc8fded33698d11776f48d50","_id":"next-optimized-images@1.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-uJEpNkBAVGrOpiZV6YrsHmui/RJ0FfwEyGxItNUUJsntV/3QAC2tpyy7U6t7mgZsrLq464vXIFtIw5X8qbfu2w==","shasum":"58f4f5a416f81dd6d996191ff2c6c559be9b20e7","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.2.1.tgz","fileCount":4,"unpackedSize":22796,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvPsjgIpFf2pKUPapKREF561Bpwcf85IWaoAZNnRkUUQIhAMSFB6kNw+QVmjYLYwyk396cRewLjlZUQPYfph26QEyk"}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.2.1_1521484287031_0.5675921637967545"},"_hasShrinkwrap":false},"1.2.2":{"name":"next-optimized-images","version":"1.2.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","files":["index.js"],"scripts":{"test":"jest --coverage"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"jest":"^22.4.2","npm-autoinstaller":"^1.3.1"},"gitHead":"e4bcf30b3fede1ec428b530daa60b30806c4cb28","_id":"next-optimized-images@1.2.2","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-r0eFlQE1P+qM9yu8AN69gugDCgmlFvE3D1UHY1uDht84T4fnfp1K2vBsIu7N2M02wwkc2eMp0FXOsvLTr7boXw==","shasum":"580a86f911d72c616ff71fbadc50d09a4e6a6e14","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.2.2.tgz","fileCount":4,"unpackedSize":23068,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIjkU7hbVCrAjh3P1muH5iKJzUnNxwI3AfB70E9Rab0wIgDGY2Gpbg3BcFPJlwLPBjoD9viWN0f2BXJ8FasJcLbCw="}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.2.2_1522181654899_0.529174313972415"},"_hasShrinkwrap":false},"1.3.0":{"name":"next-optimized-images","version":"1.3.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","files":["index.js","svg-runtime-generator.js"],"scripts":{"test":"jest --coverage"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","svg-sprite-loader":"^3.7.3","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"jest":"^22.4.2","npm-autoinstaller":"^1.3.1","webpack":"^4.4.1"},"gitHead":"6561b0843ce805f80b62ce2796fe185a3180c5ba","_id":"next-optimized-images@1.3.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-M1HHZsqOl2WuKUF6POWcYyuEKDZS0vnbnPmbJFWVMWMiRjDXBbYVHApP8iRnOz/26ewDGEOFoO6ySXgtDsu2aQ==","shasum":"755a91ec7e68d4abb9e1d0ffffca53d3257e558d","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.3.0.tgz","fileCount":5,"unpackedSize":27671,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDE4Avr/bbCD0l7s3I/oF21UvF1YLDppQ/MxTtwhhk1NwIhAIfdBsP6sr3RoABsS05ZO66NUnTyvgjhtavbPS7AC4oW"}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.3.0_1522842748745_0.8985291432577454"},"_hasShrinkwrap":false},"1.3.1":{"name":"next-optimized-images","version":"1.3.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","files":["index.js","svg-runtime-generator.js"],"scripts":{"test":"jest --coverage"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","svg-sprite-loader":"^3.7.3","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"jest":"^22.4.2","npm-autoinstaller":"^1.3.1","webpack":"^4.4.1"},"gitHead":"abda474438ebd573643e288200c36694e0f653fa","_id":"next-optimized-images@1.3.1","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-LfI5xE11y6z+yaRjxLCFOIMrjbyl9DzQdXZOhzRWpaVlGfLzMm9nA1b1WBDqqAnklRASuF6Rk+3KN0tXWCKJWQ==","shasum":"514d1ee92f2ceadd55d2cec6f2a7170faa97cb14","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.3.1.tgz","fileCount":5,"unpackedSize":27718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1J4JCRA9TVsSAnZWagAAC/AP/3vWYpUB82flLeDMBPVX\nLvL5rl/M3kbOa6HRqy2HLGbQVwbOyDxxTZ3S4+rFswLWFGGuUYVsgkiLceBH\nYUWZPyGisYYci3tMKT/Gc5UYJQKsBu/wqPD7YCc0zp1kDDRyD3eHGFV4YFYE\nNLr07IUGCcm9Pwy3nw/xb0C4ywbLeY2caiuHvW8iODdR06SW7vrMn2kGeByh\n9pR6dPk4KMoOx0mmWtRVuapT5tlTsBDRBWGFz2NkHCMwHbxHzZlqnXzKTrpL\n2EzLPdFtkJARK+5Pb12S7lxpbrQ+WW+LbKu0T0djMXGE0l8Kff7/lOvN8MaF\nsMVFDMSyNl5VEWb5wVrDcwimMvTYB/WRH5MDqLhxLsIbnscOlO7ZY/7QMf3u\n0SFObIQDw47GpJQnPsIgl1v3AqvmuHaCDD7jxAQO50YtfKz8wLqgD9quYbm6\n6W+xtAvn5R8/ybqRsH9rSVvHpdJCiDP0lSpCqTXh1d2ZkO/GW+UPFfx7KQO2\nuLlRXaFyaNWzW8urjuWDILMhO68ZGEZflISLE403+dDNTTeyNB+LAeDw387S\nQYILILFAD6hYmtCptZXcFht0sJWWSIGkJq4LQTkQ5EWkR1qXyCeQM6NCBtgK\nCL8NDRZtJSMUCO5qZVMJaLV0ZbhIEF9gJR5l0t9r8hBM+fGXQ/n9PSaN45Ux\nnyhr\r\n=+h+3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0G/uSk4A7vPeRnSBvggjxRNdPgQFl5xpJgXmlIzyBmgIhANfnT31eUHE2SWuGOp65jhvhTDBGlThO1kM/uqLds2zH"}]},"maintainers":[{"name":"cwanner","email":"info@cyr.li"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.3.1_1523883528009_0.630876887031157"},"_hasShrinkwrap":false},"1.3.2":{"name":"next-optimized-images","version":"1.3.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","files":["index.js","svg-runtime-generator.js"],"scripts":{"test":"jest --coverage"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","svg-sprite-loader":"^3.7.3","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"jest":"^22.4.2","npm-autoinstaller":"^1.3.1","webpack":"^4.4.1"},"gitHead":"5c450a9c7719fc41770caff45dc04ca60788651b","_id":"next-optimized-images@1.3.2","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-kFTx6iObq8Au8fKj8eO7sXl3CXk+H9LB1Mmqqt9ViOcAex2NUuha+6PBqWl1j/gQSQgzVTVFufRNX2F2HcFuRg==","shasum":"9a29b576f696e0138fa75ad3c7fe9ac6c659895f","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.3.2.tgz","fileCount":5,"unpackedSize":27716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6GMLCRA9TVsSAnZWagAAbMoP/RweOCxQpkMaLblpDgf+\n9k1E07gdxio1V8Wm4AE7c56kxVUKcjtQVDm9ZIPip3e5R4ynjrQgbw8e5ckj\n/Ay3bqx7af2FKTIYweow2qgt2VvIpJw1dE81nShkCf3yQ+rc2BYBIt59cMjB\na+CHf+M4Yw5GYGcerzrO8xwr/uGiCZt7m//MgpO8/19mxKuSAio5BmAdheLb\nyxbkowUyM2lURd33N4Uyw6yc5rorE5IHSIRRpHpqszOrYkuKlw5K6J3fcdNG\n2QGQYVloE2y0NiN3FQlrNKUx12XbB/ndN742f7BMixOHFT8rFDT1SY8OhQVK\nHieNiyNPuzZY0XlnLZXUNTyD6XC/6uFg1NXu6EZKUUVFPiLpzSBU7Crrc99E\nDActAzHv4x1/HB01OHTp5ji+oJX3wPoCnIARdvnjtwpQIpmmA6frCZPkrMa+\n/r7JWF4fL/Vi4rOJ1j7hvWbnZuI/rDa81WJ4IJHTKsThIsHnAUeiEkA7iSGZ\n5e7/e/tS3PXua5gKFPhQSYoIl8hFxMfXai9e0+7CiYYiOdRd0cmQ+YLyH8I5\nGDvN2a9OkLRWWk/r7ywf3T6f1vTPIfIVE3xdYn54XWFN8Gjx6M7xJwrlnHMK\nFXYdNaBo8rmIZmvpzyRVJ6k6BXQkeSXPdAHwU0eBIUs3G0Dxc32rA0Q9ulmP\nxWCw\r\n=7V3J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmhSIj6rkkzldQB9V86TqqjAm71wnz7wV1xOowoVBxcwIhAMNoqGt0FMPIpc6SNRRvbNVTc/UNPiby5EK2mKVf1wwP"}]},"maintainers":[{"email":"info@cyr.li","name":"cwanner"},{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.3.2_1525179145161_0.6082642304238175"},"_hasShrinkwrap":false},"1.4.0":{"name":"next-optimized-images","version":"1.4.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","files":["index.js","svg-runtime-generator.js"],"scripts":{"test":"jest --coverage"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","svg-sprite-loader":"^3.7.3","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"jest":"^22.4.2","npm-autoinstaller":"^1.3.1","webpack":"^4.4.1"},"gitHead":"2517dc6be54743c846e2d29710394777016621d5","_id":"next-optimized-images@1.4.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-Z+oGWReBX0SZoIajnCqUMIpfb4bJxmcc2OlYWyV6X6OelLLajJIbMz1D25kHGmXawFcZunHc1FY4lFmFzCSk3w==","shasum":"b3bef459c42aaaf7d9dd241430e2870702cf1388","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.4.0.tgz","fileCount":5,"unpackedSize":30357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9IR3CRA9TVsSAnZWagAAXwgP/2v4wj5stTeB8919xqVG\n45T8YK/YcUYCbKlLOx36fheYnifVH6QDoR5WP8DXdNHfZqFWz6GS4RDjMtq0\nqeP6w45txRUcaxuC3tl6n67sDcdd4oGJa2yPGbNBjnNrbmZHHDNoVvgQQzXc\ntjouMEkSUI26Rvi88pYmzoshuwNh9+naNPcs9pHI1fdxM2uj7gzC/vKAAZqW\nMyFF0xQyl+6PYCQx0k8gSZDFNXtvP4d97Pf7HvJvxY4a3xXYgTJDXHS60xQo\nuTCzAUPdVG1hPn8aVvSFWBEmH8HVUSM25G/Ce8Knf7GFRzDyGp+UJaeOtgh5\nPl8mpVZF92PUwNjM0qe5iNSSWRAZIXRQoae8paKObLoyyqVPi+dBx4gC/dOA\njw8CoSAk4VaWzoi4i7Ho94maLWxEPyWX87FE49deYbyfRft1LTUqsIFiszM+\nEic7o9Y4Aaad+s5LS7QS7iBTm7GfSNCdDHjeJsSDa3Kl7giy/KqFky/mzxQu\nx5lDCNBWOaMCQhAl35BGSdetpwniqGVwcuV9PafGrGmY54XLZaQVu+WyTbbt\n2icGXPMANVdpzpeNS5OvGoOm/KH3xbZbibOT8HTan6KR/xnjKLfmwgnBZUGO\nzV6fE2WgQWE8PDtCV/pZf8T5vaY83LAnApQruIhsMkCAO7FSIZA4fRsNSbFr\nnn7Z\r\n=U9wB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1iDNwExNM5wxnP2/5qVCXedimOta8prAEOmrMvGS47AiEAyxgNt0TtxAx3bdAe1127HjHQjEwx+7aTxItXd3rAX/Q="}]},"maintainers":[{"email":"info@cyr.li","name":"cwanner"},{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.4.0_1525974133679_0.7181666990435076"},"_hasShrinkwrap":false},"1.4.1":{"name":"next-optimized-images","version":"1.4.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","files":["index.js","svg-runtime-generator.js"],"scripts":{"test":"jest --coverage"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","svg-sprite-loader":"^3.7.3","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"jest":"^22.4.2","npm-autoinstaller":"^1.3.1","webpack":"^4.4.1"},"gitHead":"6e3afc103202e7a63de8ee4e594d2705142c6d39","_id":"next-optimized-images@1.4.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-KMKluSlsqqM+j3xBKvXjp/ydKpKWTfFaEkC1TZOZwsLdz4ee2FPfn5zQnoIp04c4cDcd83E/NLQ4C+bHsQ1Ngw==","shasum":"026f2914d83641ecca3be7b537ea9973afb3243f","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.4.1.tgz","fileCount":5,"unpackedSize":30566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbCrEvCRA9TVsSAnZWagAAk50P/2VwWorgdqLrzST8I+vS\n/rBg7jYK96M+YXGmnS5401XgnnomM/1dbVBulm9iaKC5EYjx5vtCJ7mccLtc\nQ9Rf6NJYELkKE95iOVOO7OpuXeujc0p2How/R6XiJ05pcSbFhpX+iUd64EKX\nCjpZNdtIMou1MsFl5SpeXc9XSkEMEXE36EwiDOr+e7pBOE2gXfookULREM9s\nV82MvI64DGd57nkuaa94avnCR3pU9cJ2zm0Bc5X46JsyWYLwwd2UtNYqBY/1\nwyi8MKdJ+eTNxBxeNDOFUBQ6YbnfGsIkry0egaRUasffw3crb5HxeZBmMcDt\nE0qjLzeUx48Rrg+vtO9znWZuG2m4WssD1tLqSpxWLMnUAz/GXSFUT9tqHJoX\nRGm4xO+aBLK5hfW9qUHR2KFF8GrUnflXE7nyxrE9eRm1G+2W8bEtXagxzpco\nc8nqoyEXv2bZGQf6ZDhb01yQ8L2vuuwuTDG1SJOlW0rgJlEDVYiZHxcR4n96\nZpGvWSt9lq7UOBoRMz1LFsHa4uBRo76YJ2IZCrwsTUuAbPF+fXcq41u6Qsq2\nyoqaYGlG8L2TSSOkMHq8HPCjMBeiV+MIqc2qFiG3TgJwOGENbjpvqGdRrq6i\nfMCaBBGXVtTjfmAomlr4+Re2uPOVigI4C9on4aljnSitqFm9iQhveAlJRirF\nuZGL\r\n=gDnu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyZ1KdYvJfjlNa1PBpwjnOAKg9UWawiWEdTQ0odIYLUAiB6bzqAIxPu39sCZxLLandBniiz4tzMFW0SVZd4+4226Q=="}]},"maintainers":[{"email":"info@cyr.li","name":"cwanner"},{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.4.1_1527427374530_0.2634877425506903"},"_hasShrinkwrap":false},"2.0.0-canary.0":{"name":"next-optimized-images","version":"2.0.0-canary.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^2.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^0.5.1","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^21.26.0","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"3f1751a40445b621fa9e43cf65121d85e77d225d","_id":"next-optimized-images@2.0.0-canary.0","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-OEjMAsdiY+6tDLI7LBtjzs4A5SgN6WZ0Qport+nNv5fWrmdwHlRf6QTD13KSSMcIOv9ERqtgC8nAxkGCWmGLNQ==","shasum":"c1eccf290c944700044f385d7addd544ed3d5ef1","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.0.0-canary.0.tgz","fileCount":15,"unpackedSize":44926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+U50CRA9TVsSAnZWagAAajIP/izxwy6nNVmXYsF44bum\nkQaVZA6q+28sFGjQ8ujpcSIB3K/1EV/0VAKePZZR9U5Qd9Kdug+nYR6W3jma\n1ZGXJtlOMqSJT56yZ8YqmyR9mWPtBQF7pB4drrnHNwNBN3UG7m3GuhGXi6TV\nKe2fLGrzriRdXMiu8jzXRfmObmWvR8nOEVMz7R6g6rnJaEGIOsjmhSzv9r0F\npxDeOXrbb9LC8k2bIgWepMIyQOFE6YcG5F5GcU6X0KiF8pl64VyT9QqMqkaQ\nDcHTygGncZVd4lwAGd9tGalccQc+4c76DN8kJC1BPWgv7o2gwz5dMypcD/hy\nOGabab7M7OrJva1unoC67OxrVALbXVf9jROdc1MY18CgfTocLqRCpCAgin7c\n1+Wrs0lG3SmkVj49sDr1rm4uW0yHCmjNfpBmRz3CkP5ruh1E1G+8/J9QQVN5\nGS5PK0aQLZzKtxEa8KGn9bWMTwmO0mallX0oLFZCXkghkcLKMxbiiV1jFF+t\n4dLTKMNVQr+NIu+fBPPjS0Ot3DXLIWe8rFW5dt3NDVCB2bvweAorV4MCfyY1\nnzpIdXEssuVsJlP1jltvpKyz4rog9Q346JVAzt3V+EogCs6qkOUAZjYho47S\nPfa3DPvv+11t6UU3BDR2Kti+AKCuLj4eQ/6jxtjMYdfYWFu2NijEK4+lU+8a\ncGbb\r\n=G9VV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuRcKdvatOfMw8XZCpXg0no+hytR49WIgL7TKe8T69AAiBo0WioFPsGDQSiFPU9SGArdKl70SEgr/ltfQai/ARJMA=="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.0.0-canary.0_1543065203363_0.7007657214037051"},"_hasShrinkwrap":false},"2.0.1":{"name":"next-optimized-images","version":"2.0.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^2.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^0.5.1","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^21.26.0","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"1f620c4992c5d0ec11be452ea9c35210e4a6345d","_id":"next-optimized-images@2.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-QouIuA6Vl6/5EOaHIQWdUA7bkn6Gw3DBYXIDSArhS2/L2cBQv2mA0oyVtsOv/beFacDOXeyttzeP6vDks/5HuQ==","shasum":"18fced759e83cf69423e09dab25b6c72e0e38ff0","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.0.1.tgz","fileCount":15,"unpackedSize":45033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBEt8CRA9TVsSAnZWagAAZ2wP+gNAh+u+7Moezry0DedB\nm5B6aOQPaKEDZLkJr/EZpip4GnVdlai1Y/hAxWYc5MWAq+Qj3URD9c8oPpKK\nzObYzPVdKgfqqOb0dPbGpHnKyGEWHe1DQQzwpPZPCk4c5dF48NocrGu3hrT0\ndfXf8JJXSBPbs1CDhskN1I7T0io1WxgiqZeLWyDNMEhqQp5ubzPLMY230WK7\nuVUmENwWVTuRqMlB0BPoDbpEYEi1HnXR6iGY9cgJ/ljrxT9to+E/F+0ajmhD\n5zicyHGI0KDIuuFZffs6JigfbL4nd+gPdEwUHpKWpGUi8tErEvBy4PHq6E9a\ne1/3tEJ3aTKVkWCOksOz+GhLhoHaSkTZrkcst01+U5tAlKlPukDkDJDjv3y+\nq+xWp7K35quRAhoslwuzvKD9UTwdPdlUR0jxFIA72XrSJo6iTdmIG8qH4+vx\n2LlmxQG22Q3rp1ApLscacJhMMI7Hrg0GiYS7D5ce1IHbp/MfWTPTN2MI/arM\ndKJQOquWkMzaQJnczoNm0cJZPao9LdL2X8Lhmhp7BqmPDzLVlXgNPvmlNoZx\nfK5bojvhqYAZOE0VeFspe2pqjYb6r35FeJGOvpDXq9maRm8W8jFkK1rpvEiX\nVRY6ckm/VPRpsVRgcBifBT4771hJI6GAzXNlZ1sJUNIZltt3CO1wrDzNdieX\nS7ZN\r\n=hV7o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu17XGc/Wvt4yqEmJnKaeKoK07TOKwNmNlD0moOjp1iQIgDYM3cBreymqTnPC51S8gGJFgLI2EtyYYqEHOC60QFfg="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.0.1_1543785339536_0.48326150517676547"},"_hasShrinkwrap":false},"1.4.2":{"name":"next-optimized-images","version":"1.4.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"index.js","scripts":{"test":"jest --coverage"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"file-loader":"^1.1.11","img-loader":"^2.0.1","raw-loader":"^0.5.1","svg-sprite-loader":"^3.7.3","url-loader":"^1.0.1","webp-loader":"^0.4.0"},"devDependencies":{"jest":"^22.4.2","npm-autoinstaller":"^1.3.1","webpack":"^4.4.1"},"gitHead":"f99b22e9d9d9637300040e8c17f1192ca95b8198","_id":"next-optimized-images@1.4.2","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-XS0WlEFEYHjol5bLEvs2c4s0aEUajj9IXl6Jz4pfshDSqXPrhhKqFqaU9km5Ux8IwK1dKo+3iDrdzsl6U8xZnQ==","shasum":"4b8594dd9097552f7642eded48c8d594561c79bc","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-1.4.2.tgz","fileCount":5,"unpackedSize":30797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCM5CRA9TVsSAnZWagAAhesP/3LCNw+6fzRHg8KxevK5\nxUxrmsPX5LLdH+W6OHzvq30wB8ApVHHeHLb1AMVawhnhKL1JbF9GeleiVXxf\nRWszlqNvK8+AF0b84jV0a2PW+r1X/fN161ZE1Eo0TWTYbKqPbGBPimBOjCxY\nZmy+FbvRqM++UKzpH5M77bmr1JUAohEfi69xZTJ1Hv8F+GEQeYMHvBz0cPO6\n2e+4XrJppeE3IVEbfS7h7oiIFNWyHy2KsIyNeypaQk9ZKxFVG47YdjY7qgN4\nx18/72uXB+Ew3slwBfpmqOsgGrfQ4x7gXEsnQ4D0S5n35BulMZpdwihLDOov\n9xV43R+A1v2lKTPi29GPxVyfLINCZgy02DHJDbeTcMEFL+qr55hhf1+U4HBc\nu9eNz8AB1Qey0lAbIIK7b3dGZdgSfM67GKHSiKoTd07bvAYsiqFxBal2Gy1g\nGXHu6i+JXTpPFnvtuSoScS4TWCdXUnE7JBOL8J4EIG6eQkz3ZRTviitkRsH/\nxRMVM/dIuQ4CvjDxeBAscZ6awG8xt2EY2c0kWkQ13b0kN8hGQM8sOzMLclQw\n0uj5TYAlO7gIQC3+mBJXEGHi5FzrOA0AQ4ioSCGxPGTjliXA+PUwIjX+0vbo\nn52txuMH+Fp0ty53HV0HJ6P3oJISJUvCz6OmZeoPJKBqC1gW6wmnt2zZ4f9B\nQD2p\r\n=+CS0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpI+nf0ULf2rCUvZruo+DJyh31SLc2Icb3+bYbXO+kqAiEA9GcLfFs0GPsP7v+EQi8QsXb2ZfPCObdAJgV05ORVUBw="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_1.4.2_1544037176180_0.37044650930631406"},"_hasShrinkwrap":false},"2.0.2":{"name":"next-optimized-images","version":"2.0.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^2.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^0.5.1","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"8aeacd96f15b94b6e1b60a11716b9e1abed22119","_id":"next-optimized-images@2.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-V/ZfpGU4QZEwZBrClBQtjcplHM/buxPCo0VkUUg0gNHKYSTmSukp4eLxFx5pJRQRGV3ofzbOQ1AUUH2vgQEvzA==","shasum":"f501779129a7d2e92bda3344cefcd637736337c6","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.0.2.tgz","fileCount":15,"unpackedSize":45077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCNVCRA9TVsSAnZWagAAy8UP/2szNbWJll8NQTQ+DhBL\nhYJ79mfEq1mdGkZgJetgP1AlOfy5XziVUyXGu7RKYespq3oftBARz2zgPbjt\nC4iYoew8fAl2owZvxN6DnsLYOYhhC7Gx05mL8iqL1C9DFMBKdqbXpYeljrJH\nbTJM9FQoRYikc8WFr5zfHl80Roa9ftsoFysrvmO8n/7AHYWjK9h506soXix/\nckVXgfhWm5Owxe4qoBZ2UzoXB+qaCOMaOEeWfQuBpjGBBJoycEbpidGRvtPi\nPfUmFYQAi8Z/qXM4jKX/mIOkYdtcagwDvYouqB1yE2u3GmygZEkxCF6LdwH/\n3jrCdGg39fbkEgyDKZS72hgr0sinVc3ip2WfFHmA2PmyITMi+bzjip4H8jMN\njfTaw6ZJFaQWHSIvcUvEMLcl0dST0vHDXD8+0iO7CXXeIanqyGCE+1EvcrGR\nvzk4diLOgMrIhFcOIo0tSN7F/FErh8ux9NDm1TnCr0LCawQgAes7YF6HB3Dv\nGEoyjzuG1LlGySvyXcQePvHjjWKkc42NQGjZ7r0xEu//K1kT4FhU6f2K13B/\nTojuckoiBmFN04Lv0UPtshGiB9lozYgxNgYGm2F4UbP9WADXraiZrxw2HxDc\n+gxwVSWVHCIErlkWYddCwRNPuwCtot2QzfwKCXycv6Du8gR0MLnBt6tv/HUT\nqwkX\r\n=oT4r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCA3q/J/K0v38Gd04zYopWSW9VhfMBI4MxU0vJsL+VsXQIhAL2YIyjcZWjYTOWVfr5n73mzNErE8P2nRfS0SPL0lDhT"}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.0.2_1544037204973_0.11315670885473583"},"_hasShrinkwrap":false},"2.1.0":{"name":"next-optimized-images","version":"2.1.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^2.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"a33a5ab26d01c06c151e1d2e7fe208017ad6c262","_id":"next-optimized-images@2.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-oOTtVdHfe8nYR88Vt3hn36/IlUkj96wOwbI6+GDYKDQIdi3s/yW1DBpN54GkwTGnd3/+zYmJur0FNZ1GFKsocQ==","shasum":"6cfe7b8c0a31204c4f9bf196d586237c4b4ef68d","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.1.0.tgz","fileCount":18,"unpackedSize":48749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEVVPCRA9TVsSAnZWagAAqZ0P/24LvmrG8zRPHmpGuWWY\n4tnkBwVk5UA2Nt3p6TnonZbuiXsyqRe+FFRIaLgr0hvLJqWnbt0BO8Pu7GF4\nmuzNMFTxcroQlQVSG/gGfV5k99BwfrDrnySWmi8ovfxHvVC80vGDW7ZkzntN\nxZW0dii+0IzMqN4sJYIUcqC+EJ8oo3Wloyv1i2vIUCcJrpMGZV0FAn6mEURK\nop2Cq5rFpSKRKpOOEtsRs7b5z94ptJM+dMTSHZwKP40dar90fAgPi7nMFHep\ndJJadfilKgtDfX78YoXMpRPrdqlSZYODDdVIeCk5UV2726l2ptxw21ahx+Xm\n9ZaeEQMru+PYTmpnt4CYhqBIHT3/WjlcgymAqIERibShpeL2U+ybfGGwpJH7\noZ/ati/NhX92hFTU026vvNI1LKOElt4sXIQoJilVk46XSy97EydMduTVRkhq\n6n2fQfjqTXi7wT/dO/tNG4IVOnj0MX8Tt20sdh8CiT/usSQN1abSSvi527Zk\nacgW8kwjtBfvxWnyN+TrXwOX5Pcwl8Wr/yvPtOYWMOfkcvG9qiYSnaSU5nub\nL1c8Pu8qaDrZohuWvBNpIILkgED2v95H3kNNrOK32lULPqmsOMSPGPw0CQ9H\nGRYZYQ3Px1Yf9n3SjsxTVeLKNSU4muir6uwUwsUllwjP9ozk5LpOnA9d5gbQ\nXHnj\r\n=kCt/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUIVZAUJCB6QiqWGOj0hMOIsFkwGI9ja4qhva8EptDkgIgJKrF8blghOh7BZq25Ow3/sYZJyVdb4a2JYTtMxncdbk="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.1.0_1544639823010_0.11418238684866244"},"_hasShrinkwrap":false},"2.2.0":{"name":"next-optimized-images","version":"2.2.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^2.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"bf12a5be5f3777104877aa9065aaf671c5bc5841","_id":"next-optimized-images@2.2.0","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-DIbneCyjioPEh6ajJB3PzZp1gtWIqAFEtv0W5uEr94JJg56zstTbMq9k814YKLBEzgvYeWWUbDfoo4vgHqyDSg==","shasum":"c55faed060743790e982f2689159166b4716ac46","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.2.0.tgz","fileCount":19,"unpackedSize":52285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFjA4CRA9TVsSAnZWagAAQQUP/3+4Zs/1qRIbQ/5clPCW\njbvLsrtE1onbGXdwBurZXqH1V4/2o2czWl3eLsgEU9x6GzH4E13Xo9bAMOZa\nWVOsnpzGEiEXDN3nb49L1cf0bKJjjxOVk5YaGldPHVIuWWwgMogpGP9BKq9H\nIAoRMXngQCIGGlI2/kpzYRYn7KwLlharN6HWhRScIkVfBcIqjLkv0/XGs88r\n3/Ccr+DbIif2Y3C1RtPYFM5Lvb+IfBY1UIS8YmyU2iwIMABAEsqsZ3F3R3Gy\nvEIYYG7VnGuZ4CVTUoR6vr4WEY2g6BvEF97IA3b7LSVtQAHaLoA2sM6GccO6\n3ncZ7vylASCnqIauD8A45Ridg0r1mQFl07uB/wumIbE5JhPvlaO7JpNJR98w\nCuSVDgc1tYi3zUmuK/DhYx6UKRIakwDq1iuynaBbk8ifBYmFjd0PL9vur2ro\nPDnEB3WAihweob7qYJP+QXv0rCUAe7UybQMStrEn92A+In/qiJ2+hH1BJZnZ\nPNTlUB7AJ8fLtZwc0FLnbdbaaVmbl5tCr2XGhKptFm9Zw+bptXXi/1MWkSMp\nEQ5hayrPuRel+X52wK69bdtqr8286rONB88Krvf7RU0VshHxjPfIqEzfl1kc\nu/LPtHH2JJu2g3cN0GuAgl7aostwG9cCYCqXH+O/J67VkWhI07PyPEa+zb2i\nFQgC\r\n=Bc49\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZYvJ14SWEIWhCfC8fx46I+c6X+NZlFas/qOBX3yVEHAiEApzdF8dLm2Luss4hvoIwenZRinMg5sGmtkR40M2jMOS0="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.2.0_1544958007543_0.2616054034938655"},"_hasShrinkwrap":false},"2.2.1":{"name":"next-optimized-images","version":"2.2.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^2.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"64ed571c280c07df7f1c4d63985d33bbfad28ae0","_id":"next-optimized-images@2.2.1","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-cSCZ9i/wdI1ENmtKPga/dh0jAe+dpX2qoGQBs9pWe+Noa9aN0UNZU78xa3AJ7KT4vIF0RUAV2oO+Tmt3KWjRfw==","shasum":"775a2de7310baacc4e36b79859967d12e3e023ef","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.2.1.tgz","fileCount":19,"unpackedSize":52225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFjG/CRA9TVsSAnZWagAAyFoP/2L8yJ4RG/NQLhUtqx8c\niUcYd84x7MhDIqAw2stIKRaVNCoQHhUGMqvFx9RgK+hVZibVJ+Awb6XtLaas\nf/5xQAOWTY8peajaa0BKuPnGafjttnrCMLXw2BFQP7Uqy0yw9x5oSFgyvRJe\nRmzjIi07xSnyr0kzvRjegP1c6A2Ey7cc96hrGwtNDeahjcE2eReLZ5QzPxU9\ng82g7S/Mlllvzy/JAqxOj8TqigyzuuuRjCMiVY32TsQfiPL286KfvRV4bFWf\n8j/fsZ/ZdP5j7HcZ+tAzlIzJrSItlUT0S3BrNJRh2gx6uMFxPFRFU4y14oew\n/+SQxquaoKdd39Q9/hZc7lAwFScnsLVRdrOeUWveG0uTqs4Il5J9JHQ9l+Qy\n6HD7n/u9KA/V53/tP4LiqkI5TBcbcvboHCIodGkbfFgBrhy3t/LrYpZ57MW2\nM44Gi5DVTosU2fDrtq/Vmjcnzvc6blIzOm6kJguaqAt4/yQKRB518Dedzuf+\nRhved1CjhyPX6kZbiaGpWpPPUmUJh7xwGQvBKHNeGEjgGGYObULlIcAmnQiA\nXi5q5namdw6EQHjWyMkTBHTs0f16ymi00NYHRfpq9EWf1OR0ebfs9GOwFRVd\ngEmd8JS7qr0HgHf0v74HeQVIKA7dlQefOWCz06Vv6ZXwOebHfLxVaj+loZQH\nWOqF\r\n=7Z1v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1Ci73C5ZpLhja5KQEpr4KgHvp0S+1RpUn3yKiOZN/+AiAMfYEoWbb0YaYSuxzfVfnaaaBAWVgAwtQVl+kEfxBCeg=="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.2.1_1544958398942_0.1258824335917601"},"_hasShrinkwrap":false},"2.3.0":{"name":"next-optimized-images","version":"2.3.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^2.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"e3c70bb7ffcfc354c48d48826b3741352b58138d","_id":"next-optimized-images@2.3.0","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-8OMyNxMWAHP5azy/Gm92fSijdmFB4/jP48kUME/PwEujWYhkVOlQhxm86NrQfoujrFaJNdlUq5HUU18duzFLmg==","shasum":"ab7fc2480aa7e49c54b51736f4fd9343b673035b","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.3.0.tgz","fileCount":19,"unpackedSize":54538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGRqUCRA9TVsSAnZWagAA9eAP/2SeQti27qrCh4PGKfGR\nvRD2sFuNcI8K0Q+IfsaIDOjtfC2WFloWM1hqZKuf+ok4EmP5RP8c/CstRbzA\n2QYSHyvkhItm9BLikLZ1xgTGjnrYB45LEl4MD9HtBK9HdghWlfxoVqg0hvdp\nvOuy4xJDqDtlZA+p8M61/k+cxuLRJ3f+vAxLGATfChp8OKxhJ6qiW1VDv/j0\nq/IUs3wE9YHJ5FKGTpMFM6aLK60PHzjPqP3AU4Whh5cPn7553B8VZ2vnKIuV\nusIhwxN3PLI6vZrY5fLhPhyUwrM4DGFwzC6Dd+BWHFiGGHdTGT+2IQlRenGz\nIXYt+iXgpUmkuezfCY9OVk8Cx0rL1JuXCpk0F0UZKZVDIf/YNQCFipbwW6kO\nFJdEa4YIhfBlX18rJPL5dRaTX14HkOHRRTo7i4jQTGka+3dFl2NQWZP2U0Fx\nhBRH1x0/5y2w8B+ffdEKwNnxvafZ1PIVePaSGLRAU8KOeYxRChX2JSsE6axv\nTWR0mze7AFvQKUyxbDqUoCuKPpyTKmKRT2cun0ool7JOpiykjBkmWMerR2S8\nV7wFZKoJP5CbYh5iiBUDDFHTssSBJNH0FhJR4H7Id6zx2/W8eAn9RBl8X87R\nLqI69Q3SU8wqX6mLho9uVKYU6cI2i7Hn2e/04NQnBs9OdsRFc2+/NZ3L/tyE\n6qj7\r\n=CeXl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpPoBAj/0nLIa4mDicK07B6Hj92ofoYlTx1Exo/XS3ZAIhANMdNXNH8UvmaNvHsfSWwWjErozHNk1hA8rbaqoFcnYc"}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.3.0_1545149075161_0.35893384087806357"},"_hasShrinkwrap":false},"2.3.1":{"name":"next-optimized-images","version":"2.3.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^3.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"57cd1fa857e71b571be7e48822585dd023a7c349","_id":"next-optimized-images@2.3.1","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-b8WSZRBT9AWRpJClpcY2gyciddK5+7jTtOfkABfLIAjsidtmKwFtMPzBofhdtWrxA3r4pX738QokdyKtXXkyag==","shasum":"06e1312aeefc20b2a6d7416d90e38eb6d01f11a4","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.3.1.tgz","fileCount":19,"unpackedSize":54588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcG+0qCRA9TVsSAnZWagAAETgP/3PPpM8ilfhFaHrmP6Bc\ncJjUV94rE2UVNmVcwtNhKnxnrVjVZzckTltjvf5Wuh0ZHp94NO26vI4moMVX\nYEmjjupbRUbViknTgwPZhLkybp7+eP/jJjAt1GYJSzmVQtkk9mM93Agq4l0e\nIDIunoxeCYqgS31YB4ObHHRx1kzOOkXHagx8BLNczE4zxC1TO7lYt6uMqa6c\nRdKw5lGr5N/p18aE9fnw4snbJp2C78QV2tZe7gRg5JGIq8sSZtFsMSYm2qHE\nzx4oGnpjkryFMIQlz7Z5LmJjSZocfV+ck+ZiDRcTJ4WlnNCzO3/JRSs0+JoB\nkJNyuv/jeaNC2VCbl2wJMF5dQ9xp8NxyHL+W7jIn9j0jqD+quCd8nW9ZQXzH\nsow8MH5sDxox7WT8darhPM6eEvTjgni/5XAnckD/alfSMJHvJU8VQHhqS90I\nIB80slP+yOB1QBgHugrC0xQpzPlsdPlmE3yr0zAJPNKtm7fQBQc7gYYHbg3b\njEpiEvKgkPxYVDPmzFJVMNchcME9PlO82dzC/KG1qBuZhGwkCOOgc/jdQxnM\nFrx1SnoyftYtHd693YuknZbhDKPhU7qK0+7ZMFtK4W8S4QdjCELXhvhlnJGW\n4qSI3BCZTNQvBftpm33ENpkdLAyVDc9DRAZNj6P7QqdFEESqHJXa3RpRqqu9\nQZ08\r\n=NVj1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIg8DSuFyvjJZ677lJ2+sUw/saIlRTTTQK+5FaxMs0SwIhAIPdPPfTqYo7ro941Q7FVXCQA+gXVFMTyP0FnlIfgN5d"}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.3.1_1545334058000_0.06285723530706178"},"_hasShrinkwrap":false},"2.3.2":{"name":"next-optimized-images","version":"2.3.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^3.0.0","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"c6a607d7b817bd67793c5df91b58bd98b9292de9","_id":"next-optimized-images@2.3.2","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-C+T7i50GBBO2pj5m6IAETn1U7zfhCjeWqrVE44OiDq0H9KRAPr+KtztFgKDqcJjGmE7zWf2yooe7yimX9Qge3A==","shasum":"54d3ba8bf3a671814f75839b13cdf46b466ba6b7","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.3.2.tgz","fileCount":19,"unpackedSize":54723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN5h1CRA9TVsSAnZWagAAPCkP/2vThrDnkpshOckHrs3Y\ngfzemtsnFGrGeaBmH2Neobo7l3vLkvZYRgv4/Z43q3PcwGDqe4KO3xxQnSF+\nxQYHXpCayDWUe1T/SdKIdjYuFi3a9oFadqWKBwEzNV0Lz+soDCfAvL9mDABo\nuAo9PF50DL4zimVWQU53ir92x3Sd7AGTX+mmv3AfMXbWtaZslqeh7jejhvpU\nLCF9UHg1/cZfJZqmkG9UpT4VP8kGMBS5Bm91V3NQ6aFH0pp+hq5jrVitFeEH\niodn8UYYpRtRNF/eZY9XONe1eSEiM80/owMuzY1LtubeWAiVDwrWDPU1WedP\ncYaVZr91mENEuhOMB8w5aMkGCWuCcg6+p11UDvlVo0xXbQq+7EauAiLV3XxO\ny5z0xXw59uOAkThHa4qV1i90RcQ0zIVZFdmQFsLznTdH2lDzJOMpp8ca5X5g\nIk2HGNpy1dvrv8vKZ3Wcagc6q+xIhlCLoxplxm0lDi11RKJerYonuB+NS96D\nq+QTRlOyR40xCuiik+T3eBNj9RtM9eEUsJRzkd2nWKBfRxa4h5nsUml70Tmj\nl2WsGpB8FCo8RWJOK07Z88D86O4SGjc8Sf86MdFRbxAfdEkon+Bu8xu3vbb5\nlCyrhs0c4tOgPxdyoPCy/3ahuCWIrhZbfVNGDo5ivx4rDA5XHwSSSt2Q5tD9\n2xS7\r\n=ILQh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRlSDcesiUWE0ZCgm4pVBvEEZE6Kjhf+lreJfI2l5nSAiEA93JAKHutzKmfT8VjSjLPRguu5ZhkoAAFDpZEamF84fc="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.3.2_1547147380441_0.6116459186849594"},"_hasShrinkwrap":false},"2.3.3":{"name":"next-optimized-images","version":"2.3.3","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^3.0.1","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"22b74f4262f457b533b745afacef55e1fd5622fe","_id":"next-optimized-images@2.3.3","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-R9ROUUg0a8o5bTRJ1ti2Y/OzV+7BTG7uAtmY7934RrdF+gM2zxjvBpPpDPT6OU2DIs5/mykMa03/94y2O9LLHA==","shasum":"0eafc503450f103c72c4923d53f9c239fd0be6cb","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.3.3.tgz","fileCount":19,"unpackedSize":54723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN5yUCRA9TVsSAnZWagAA0pcQAI+7Kr22e8l/zNoKcUCc\n1qmz1VmIPY7/RD/zcnm2pL/BzdxmLpWOKuEw70O7/7Yhc4Y4myAGhIlSzU2z\n7W5GnfFvp2lhwkjVLMaUCsHLB0x0mV6/ZgEV9F3IRz6tyd5+mmzrz3IM+AkQ\nebY/tXtP9lqwRg3ujmoNODBzm9DTrosmjsyY1zX/uRYVQbeurS/eMJbSdse1\ndgFbAgWagkpu1xVqWQBLmGboNM76cI/d9QraaAKqqeIYThum3L+8+ryAZOAo\nCxfNWdEz4HBgprn1vmhpundDYzvbtgnnPGVsvN04UzAOXJCFE2VO6Kv8tii4\nNl55p/5uciEZ4wUgGbSuGby3jyb67dZEx6h49zeIoHSrcW/iYgz9Y5iRKIY0\ncoAl9u7u5gnzXzYpWzjUJL+9+IYsn5obEnd9nF5Hn84+syUfC8BMnXpXYwL7\nKKXBwaqz05qXA+ffYigq0DLDoMBD6J4IBxdufZL/ALe0+b3ADAnLRny+0voi\nBpZJYqFgqbv8kNFDkBa3wNWH38YGTyESh/NfvB0MgtJePXoap5yUhya1gZIV\nUb3nTpEo5enIJuEdJSIMDItsz/lNGg8SKxFf+4drDofCmXmWcmZLNGfY30s7\nPngqU539EUkfahdj3oZyNqxRMGVglLD7wg4laflxEkChm3LzMbrC6ZQ+NLFF\nWmVV\r\n=pkBQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGK2W8o/B46A2wmFTWh3khFmfB0bKRbS9ajp07qQKfI3AiB7XnRMz12aXrY9G3glIg+glmZUDU5BRJdvwxBMPX01xg=="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.3.3_1547148435535_0.8086198510143598"},"_hasShrinkwrap":false},"2.4.0":{"name":"next-optimized-images","version":"2.4.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^3.0.1","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"81792d6cff0894ae74f36b3a7b5a25778a875f5d","_id":"next-optimized-images@2.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-5y5FFcpwHcBkrBF1l90wTjs80UGalIYH6BBq6I54zAFtFaJB4btCuTrgVXfmm+OI5ayXLI7mqmPWbXz9oxlKTA==","shasum":"b485297e9d6e0836a102a7d22c3d3c9fb135a683","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.4.0.tgz","fileCount":20,"unpackedSize":56952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchWm0CRA9TVsSAnZWagAADhkP/1xOn6syteCuJi6wSvPH\n9KqGj/Ztnd0+M0fYmX99JI3MmHCSY+riJu/ganJK68DjSBRfC5N6yCGNdRdh\nNPrHD6NFFPOWZBRYoZdhLBcZxGBJ2GlSspILXrU4L+qn+FNa1EAtgs0aslwF\nnx8XcbG+2+slphq682M6k4BSRplb1DkaNw8eZaLl9aJqrz+uZb7lPjjksClo\nei4OIsimLGNXhTVUxtK0tAvYEDnhksGmD9/jUIRwVLl3wuKew4d8X5XwoGC0\nNoxo0hfOK5qyQNLrWc1IJELRonbLp7EgS8hKqvzWBclZm4AMWQPsGb3nUZOk\nbBZKiHlNTqiRLZfwyKAE2mjwVGplJ35NJdMIEA00YF2JMmstp7hXH7BCp5GX\nbO4eM6YS+u6en4Lsk2Y5R1DXZOWc625Kq1kvf52h7FH/Ux239Z03q/Ihaql4\nsMre5R8BlFlmgFluz90dMFtloA1YIIIuRi1Ec4xcWN94HHclNxZsmvGAfLXh\nzvvFtljCaL72sW2ybgrumiVvtmzyROWecZJXnby+qFrvHz80soWCStAxhFwe\nO9n/u6rT/6IkgVnKXZgvuIMZ41hFuEfD/q9oM4A+NzFwkIgax8h81mO5ziLR\ni2hvN8Eshxwtp6P4sWzQQAmhE6sPg78V87OkOzlzc0kTZhcd89OfzjlxsF8S\nurRu\r\n=HV/P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXgjhOpDAJSUmSJoiedNOill+gZEpGjqDovphlGNipRAiEA/soMZdJyjO+ANwUWaiPuh6BsskPTKW9GjUvs7n15jEI="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.4.0_1552247219240_0.8487562539995279"},"_hasShrinkwrap":false},"2.4.1":{"name":"next-optimized-images","version":"2.4.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.1","figures":"^2.0.0","file-loader":"^3.0.1","imagemin":"^6.0.0","img-loader":"^3.0.1","raw-loader":"^1.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.1","jest":"^23.6.0","loader-utils":"^1.1.0","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.25.1"},"gitHead":"8b3ebd884ca64bf1c5766af87663383e1025d9e1","_id":"next-optimized-images@2.4.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-Y4VszkBYj4WKyc/ARe4RhinRC2IJfQ2FG5uifi21+ULj1s/7scp06wd2+Ul8HLWUj/GAdkeM7gmMdBtgXXG1IA==","shasum":"0e9e170e293730f88674e8f934a60fbb440889e0","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.4.1.tgz","fileCount":20,"unpackedSize":57274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvd/eCRA9TVsSAnZWagAAEzsP/3YJCpLX/SCaFkqHJwux\nKRpV8bz4QtOyOIzPSLyf5YNHl4al39YxqCdcGIqjlG1IEzLrFSHjVNNujfkB\n9jC4phkz1PMjuztJlb9ZlboNqzRTqs+jsFhc6Zu/bEABXduXhOu/1OWpzr49\nFTeUAz9RHln6njQAJtFUse4lIFz3YTSm8DbQzYWT3b4B1m4be2j8J6mlHdZR\ncb80xp3fX/n1xm8PhhE2MlydHEAx4EzW1Ig6+VI3P3OHbgx/jF7V8i80oZQo\nhUATjIiKSMXaS+6EZE0Ipfq709fv3mIRx9fu6mJMkvJ7qHqgqaqfqHNebl1r\nbhP2WHZZa9T5rbmrAG47O/QPC2h1X9Njs2lwSBKtOGKUDnxlJdq1XJ1Xfdry\nVeknlBVfI7wQ6tuZdr2EiwGzv/0ao4a4oGgWMPQhy7oClZpD9lVzNxFd/BY6\n1C/0YsOmFnCcqIjXYoXaCtfoCRucH+9T5O53Fw9m2gdkDJSqLP/jIW38ItkL\noMOImjaPfDcVOrALCE2XQL0OzPF8IFtwbcKH5TwKJD8k4juFAB+9BO0NgZv0\n4na+qZLuEfDUS2fq9WHz/G/HyrrVunYXCKz3xBqNy2WkQR+KNf84Bo7ksZhc\n/rnrfIf3Eea3p3mnWuqYT0qT8OXteoHXYQwf2zOEGESpBYB46y/hDRZOac7A\nKO9q\r\n=Rrhm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnuCf1v5bCnDD6zS1JMwa7f7ndoXqh2Nl9pVE7WaztVAIhAJnCsCxrF//ChO8GnIPQP5L1q0OMnyPkiId4o4LQe2pe"}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.4.1_1555947485448_0.16144550432871219"},"_hasShrinkwrap":false},"2.5.0":{"name":"next-optimized-images","version":"2.5.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"a767aec1d2468232917cca38232c53115668c2ec","_id":"next-optimized-images@2.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-iWU2RqmXGB7AJxnM1kQiNhnfqlyqaEAdRozxbRbPf7qWigqv7ABtx6LGppy5mQ8EAfKjeyF6nul7DQ4UDDctWA==","shasum":"515f1fa564f4318fb2c4093ef54a5aacc472ed07","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.0.tgz","fileCount":21,"unpackedSize":58865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxFDWCRA9TVsSAnZWagAApGcP+gLQ+2sOMleVPdVa61wj\nn0IqbU7lnZPKa5y9ftZ0plOrs5XkAF2zKEZD0/rISbNf6+KxvqGlsIdNAlPr\nMZJhGrsIhNHlnACD+LOiuEaKPW3sznA1n1u118d9fZ8Ln6iHyspLAGp9KDzi\n5ILbmI00Kvr/tHPLdovqvXuYuAQ9aljjObpKG1JtF2Ok9AjjnDLFq9xz2swn\ncsOkBwYgW6w+AouAAyuJxfFBnGX2nVeWWhOlSL7JB7pJvMmrYmyjBB0CFHp8\n/dM5G4HcCbRmsKtZgl2+WzRZ+YNPEFRUwE5rDYt54KjObi/aDHDcP6g8kJfH\nHn45eIeT7PmWTD9lBkHqBXDRhfCpHsu5IYCn+BmaTk2MhrqB34g3ogSEtfEF\ncWCO+KRhlLUGmNoNv1Y06ISLZD5NNr05uAhLMieoKjT6zs0w5kW2WEefertC\ntORTFi/M3qBDR3ZowXGlXotpVbV7h0lXAeBCQuLHkbwxlIyAfXy6sUrdF20A\nyGx1GjrRhERWORb5tDo8siqJfcJXtLKmFQ+OJFWABGbrV/Lgzh2w8W3mnUe+\nnGHYHD2RSfwbr72SQ5wAz66/kYNJxPcWyCK1g0t9T/p/s2oKz5kGQnpt2LWk\nNgD9wyT5EfXAj8eOxtk7OdsSuVP10VJuRfp+37FgttdzO3p3DXFPKy6k5HOA\nWb5O\r\n=2Q4p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaOgrQ5pDrw6uSw7e7wJFJyi3fXFNqwbeGBD1hH7oTnQIhAIwbpL3JPzw/QqUULrrJfyPlJ4401xrg7XSIzx9hGka8"}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.0_1556369621489_0.9430325998636615"},"_hasShrinkwrap":false},"2.5.1":{"name":"next-optimized-images","version":"2.5.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"5fb5429e314cb5b9937d5017a01d5cc5f03244fd","_id":"next-optimized-images@2.5.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-5/qcxsneO0phfWJ0LXOTEwE7Xs5pZ2dg18abfK0vVvG8kegXge8aX3gu3fHLobRZA24HYwDDLo2ody7ekStSsQ==","shasum":"074b79b8280bd38fadeda5acbc4fc58295670708","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.1.tgz","fileCount":21,"unpackedSize":58911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7AbhCRA9TVsSAnZWagAAASQQAJrk/ZzjKhHtYxw4EM52\nsZbqCKOtkgvgB4/ip0Qfloto4c5R/8USEAmaeQABv4GdUkIpJvsrK5R+f0iO\np1bffkVXMFhRkhvIi+2YHKxjsiFxYHy0Io54UhCOCfjrwn1xMTwpg3WScqWP\n1QpvRitP2qg6w9Tqud5tlJ7OidW/wIYRkssxowfzO09Z3Q8vUUPEvNvat3td\n2GOHbsj+GN4o7JZWBjoiC2KDP5AgHCno9aBIt+eTZXEP6nFVaso3RB9IUpxN\nGaoRCKuQhtgwr/Ofj5IUnElRHz2R9JUpwxeFXcnFvL3YMMGhkhVw9nTSZVBp\nVMZwg07WjwMWZYWylxL5PnsFlNQxJEOlmaCB7FM9RAFZQcRK1Q7bAohwrhM4\neulEWwznwXCg+7oq/N+s86u8xXNNOiDalePzIEJ10xmEL1HpTYAKeeNLGmKD\nbsDVidmaA6QcwwDrp23AyFzSxrI/CdXzVtpiqZfsE9fz3FnKesc6NhuRtqHJ\nPB+WD5vpn4vB0T3/VBwcfvX7XYiwBkiDNPuu84AKKOB/SvrOep/Y/vdTRsk7\nQwh8pl9+FI7PkWYx05c7pEaUGDOJR/gB7B/UV3W/9GX17VwqFbo+9DRikybH\nOOypToektAeSjzvOPN/U3bzG34ailLTDzkdfBQiUvIy6S1bpoH9Rl5lvt4Sl\njro1\r\n=yYNk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9NGv/In06OJfIvzI4N/46+tyOWuralvjni15F7lAgqAiA2KQ9rxYKj2j1Ojci2Un0kAjS8gquChLiTjgKhc4mMUw=="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.1_1558972128408_0.9645890508960495"},"_hasShrinkwrap":false},"2.5.2":{"name":"next-optimized-images","version":"2.5.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"37e378421570a15730a63f522eadffa21624ac0a","_id":"next-optimized-images@2.5.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"dist":{"integrity":"sha512-XY0A6wClHRF0nuoBxcc5PqImLALjpCfWQJdpYs/ObbPJz6oLupOCRIh6gIXmSiAN9dB6pDG3dDxCBeLwwNUC8w==","shasum":"c13c972abd09b917ef45e88a32203cca866d19eb","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.2.tgz","fileCount":21,"unpackedSize":58918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdD7bUCRA9TVsSAnZWagAAstwP/3RSNL9XInIGDIMKI2AY\n7PVn3pfrJXJd2tQbWGsz8to9TUpBNsRvo6JNz5JKzCFCjxOQJGUtLNEnNYYL\nSoPvsoqW+dNiAi8zlmCJDbSDvvAluRNcs8+8aIyPueUnKz25U4c4M67qE6qG\npK8mQ3fU6Mso9BRKQkaMvtKr5vbIO7QgCOlJq7L/paTqr6+Xzge+ce+nXeUI\n+kqbmbbg7k3heTA3Nn3WA6TISvXxgLoNRJU2g2fRA1H0a9t2c69uYuRQmE4z\n2IWqvSu2z3ZmcSdRKeMsc1rYXcrxPr/i54/DiwC+bdg9gjproInhOYsJ0cYA\nxU7Dj9Mz/PwbQWNUaweTQF2sdH0JpHu4ECKcgx3H6KAn3XwQdgENh1euciFM\nEYnQVjPCTFOzMjIoCOxlf/47bHsh5TkBlXwMmrAstw4WPCkgKgtx/WdiRFvI\nYxAjoOMkRlajgmIjaHs8cit71x3vY9+i0HQkxj5nU13qseEzEd6SIb4wRWaJ\n3jpbg46Mgy0Sgafk+mXo69pENLwqeC0xwtiqhK5x1iOZiLblekGCi9i5Hb5G\nq+CWTpjrvSt/ySxsCR5aykZtUM1d4K6gVnKjvurwcpAizabgALgB5mP6wPm0\nm5WaIiz+sepiewk7Quycm+2zug7FZUSbRtZ6MZi0jo2bXxE6kXVeLbg66+67\nYtQv\r\n=lGoE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBb6OGtptsYOZx6vQHLDPujtaJh/b0SWUzdgFu2/QMBAiEA9JxsVcIGjOO9olzJ2QBm7iyFVXnOIlWCpq9tjj6EQzk="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.2_1561310931278_0.4710257907053488"},"_hasShrinkwrap":false},"2.5.3":{"name":"next-optimized-images","version":"2.5.3","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"d53ff168aefb0cc4eefa1730896f1937410e6d7a","_id":"next-optimized-images@2.5.3","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-eyTGBluzqZVZCqq5/+B+CoKWZJ8+ooIj7b4Z7jvQ38vVBOfZy4MeIh4oHrnk3KD4HM9qU/xDKBZuV6sgXSusdw==","shasum":"40b8f0f98917742e3262d5b4ffac68ee09cfee30","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.3.tgz","fileCount":21,"unpackedSize":58925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEPjyCRA9TVsSAnZWagAA7jYP/3mnMYku4vpxMTwQFUGP\nR3jEJOXyMw1Yiy987DUBXs7gceakqBZBwmQSd+4TQ/atwkK4aWQn6XuyFLvb\nNEfy9mccsM1IYP47QpLsc64rS6xcAOWfQBupwXENEa2lg5ysBcdzMds7n6Af\ni5Y1ZGEJZbt+KL3aBhCidexA5ENiJ+lZ6mQdGCc49QmoJcVk4dpX/rVB/JRk\nRTwMXP4DpmmF5L0cAhuqIOFpAZSQttPm31z6kS5ZAqHZQfkcjTvAI4C1oAxO\ncVTiXXcwPMTqN9rDaqrWqxDRbyu4clw/ZzKvjPKM3ii/Hfg/ZTvkWhs24AJC\nozzuUvsY1p5hmn15ouz5spKrQ04FYPMgYaOqSDiinhLJDqqq2Lv3nmvHcOJK\nXkhB24uOiFp0jemT9qegf+GF15oe9HBZ5ydyujjZibYEEQSA6JJ67m2ThF38\nIUEjEq18HKFqjc8Htm3cVT135eyrO9iEFeTmxWCnwgSjnLCG3z7B+hm/Srud\ndaPvmoB/RiLrGKHd8LPc3Gr4PS+jRvvyrJdQ86BBS3uxnRXdZwV0d7m/htFK\nu+wr9XzKsdD3m9GQYkxMchfNwc9iACkPQti1WLoMzKxW+on+u9pnpEqssJ8R\n7HVhI/6CoX50UCxLv6G6Oz+Ou6fm9f3UCGpdzY2zadd9AuBOq5c2BfEe99Uw\n5UQx\r\n=wPdV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxaiA7nq4peChYLT2bWD9R/gU9H06PcV04mp+BV8obSwIgJReLCxeBqJz8exG/nkoKOEWiVoRpsVUCxCJMIWnYUeg="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.3_1561393393044_0.7872108785681791"},"_hasShrinkwrap":false},"2.5.4":{"name":"next-optimized-images","version":"2.5.4","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"756bb958e91a0fdb4e51c8185733df224cda0678","_id":"next-optimized-images@2.5.4","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Vv/1NM1oeBm7ry2bfUzhqDtd5kHEuluEX0E6pdguVqrWIxa5WJzX4JwWlUR7OxD3BECa5uA13C0XkCtjG1Sdtg==","shasum":"afc2812efd34901ebb0a8b18e21a5989b385cfe5","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.4.tgz","fileCount":21,"unpackedSize":59001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvDu1CRA9TVsSAnZWagAAyj8P/2RIWwiWmtoqwG7n+0T8\n1pViRDcNEAy8GK6hjEFRpSW84y18ZfIZ0/eHv2TlT7Gz+HYIMAHHeDrx/N+0\nTa0p0M7sbWoS4gcCySTZEnuFnUJimltb0ZXbsthSbcS8i5whG/1+uR9gXaw5\nm2jHxWHMS2dZ4FmTcheLDqbTj+POr7Sne41y/GmcWCi1jaJ9lUVExS25Vm38\n42HsqTspv4SEGRfFvmwE0Sgc66o1QDQXVF+jknfpl56OvZLx7wXbM+0o8R0W\n/vKpdHTQW3iWqIycK/0AIjOQZCZ5OwOjEAxbgnlwbCSnTM5k5kb7YtbSVN4R\nfV01ufTQhYaRY67uQF+3Z9N+Q0GCcSo2lV7aml/jjmbxWu07CEYYi5rXa17D\nvga12OJK/JD98hyLIbTaltN1FYWr9sVeDNbmzsgE60lsPPHVfkfPGbTE6oo6\nnldgnhOiSezvCI4ernKbJzoCS3RoHbR9h/UNAdN9U4/9SfP+w0Qnj8V4UbvN\nAjTf26IFSXpwlvv++IMlBsrlfun+RhKe/bUZJCwEDgQz4d63fyxYSfjmEyI/\n1O2SnFWwenK1TsC1xWgUobzZYftxBot9OKSjCi43t7xqf5GH81McJvznE5RL\n1NUa4kWikT9YyzYcT4Es/Y/GOxXzSIofz+Uq3jIwYitLXowoN/Zdcv449DLD\nBFoD\r\n=DOfd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/nEq5CpXkumn4O8VhvtKEk36U2JqYvmKkH6dnWxBuUAIgPbOdzukgmmyG73bYWIW15iRQD/ZOZm33RmXH629X514="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.4_1572617141442_0.6809361141953432"},"_hasShrinkwrap":false},"2.5.5":{"name":"next-optimized-images","version":"2.5.5","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"7fb69c03bb06f831d225af19142785134db1d8a0","_id":"next-optimized-images@2.5.5","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-bmSBsAcc0E+TuYF/72tO7pT0zHbMMPHt/OcmoOWa7vPNZv/rwj5YZeUlok+Ux1BnGINRWPgZKHxNiix+ZSKg7A==","shasum":"b37d35b4f4fdd211192c9ca8d71480ee72909d7d","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.5.tgz","fileCount":21,"unpackedSize":59030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUR7dCRA9TVsSAnZWagAARNAP/3faiTtugiB2BqH/3CHp\nSp6t8bkAv1JgxARHQsrQbyEY06ipdTTbyOaHbGGHUQpFWdMRS3XEu1fEkQcz\nDiAxQanlC88cq7JLukmCmqr8OjDjTWDbjdpd0UyFDd06IbRlhtxd5KtBvN7g\niW7JyIGuQpn93AY3rn2FOBVsMjtxv68Xz0t/tJgXTltvoC1XYbl6iBCFdGBt\n4UhHmWB1gVkTXHlcyuafm108EJVm6pfJfXNXP4iaFNrHltvj37YPhyPWbM8d\nf5SyYJq4CKBgpDvtiZreTVADdI/B+Tgs6bw6Pk+nk8r6JBfB2q3k6Bu80EFU\nCeF2PX0420FzhLfvW43hMVyc2rZLaPjMgVEL+OD6BhTPmw+yCPMyPCl/oCGw\naZWRGohk5LkurOPpEdskR6mzj7PRNNJr2K3uhNa+DsODV2u+IZ04hbKwbEZi\nD/F9ukWIOKWFmQtPSkESFZT5m2hH0+4AwczPQ9QoONkhRwEyQYweM2Ny51mu\nwuDdxr+vuj6JCkww1wu4dLFRdts2zYMuP2J3RKYreSl/agkyWXDABeU7Aca3\n33wdktBBHny6J6W3ghQXi5WxGgFOWirNQDy7gm5tnf04Dmdxr+CfFQPt0I3e\noqE+oG4Z/Z9+XxCMlgxIr8pj0cgRNxBZrhgjmeXaJHWLb33hN2iXq2IQhdHb\nuMHk\r\n=rJkt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxGghVMqNjloo7omDLN7yWXjSjY2Kvw1z3urdm1ZEiBAIhAKuXOoC+FQltyPlwki34+ofOKlGW4MLHSmJEeCj+fEdY"}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.5_1582374620559_0.9497685389563661"},"_hasShrinkwrap":false},"2.5.6":{"name":"next-optimized-images","version":"2.5.6","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","compare-versions":"^3.6.0","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"c8a8715d5d6c115cfdb7089a595425c9113299de","_id":"next-optimized-images@2.5.6","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-uSTH7+ViDpalXep1eXUT1rU68dZYLbyAfveK74Ouu6KxyzjWkyyfp5D0o/oO+uI0pxa9DiYRQ409EEYXRmkA5g==","shasum":"825d655b46e7dca8e45c16bc26a2642552eb1da9","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.6.tgz","fileCount":21,"unpackedSize":59869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehHBZCRA9TVsSAnZWagAAM6EP/0JFQwigt8loU26/5Vrc\n7R2pWgEkTp7ZyShc6xObGplj8i27b3NifNZbOwd+G/mksP1ZqXelXqgQgGjZ\nrYVKlXYPU6RpQiUzNdMDOPSKI1Zfs8UpSq0klj1SHHziNVR9aJ8AjOv7xDDa\nbwIMSeu4J9eI9rIH9dx/UZka7z1IsEst40mQ/2KDJVaKHhSsxfMX7jTl7d3Q\nCVHYVZlBkCHqUkpBfr6tL7A23kT6k3a2lXHpUJcFCFPRsRFwJEEpW1ozUO+S\nltoC7q6P8HBNtX3lNwl9BrR3oD/bfufHD0MpZ9FP+d7bYgaCgBEpKkR5Bq/i\nMVbV6wYjIYNREZGH9cfpv2jcHkHduj1JI/noQoM2KBQwqdgrm1cFubb+W5TI\nMkRtnwycl0acay0bxUjWQaD+K/yrDF91tn2EPaXV+6nhJUvtn4BzBwFy4vRV\nFdNSgQIzSv80TBPr0X3c0mRcz8w3CoZPwkAKjicbEdBdCNdOiNaWatwa6ML9\nZhae92AYVOr6cKDuN23uYibePvPhWzWVYjcdhDBVerOxAW0tftTefOu+cwGg\nSVsVUnYjzmoXX4r6ilBi3E4Bc6EmZaWuDvg0FwqnwMSAJxZJ5b9sne2889pA\nSNx51DYZbSnLdf+Sm7GDIIGMtqu6jcmtLD029bcrZ+63SN3j/LNDDRsqoRD0\nrm8j\r\n=Pvai\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZu9sBIAut1UwJgf+oSJ8GVJ3IFVADd8ufX0ee49728wIgJD39LGOhoLMLgepW7OEm2RoiMZ/6UN22+In3f+vp+NI="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.6_1585737816411_0.6983480292976469"},"_hasShrinkwrap":false},"2.5.7":{"name":"next-optimized-images","version":"2.5.7","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","compare-versions":"^3.6.0","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"b70508c9a644ad99fbcaa978faf19344fc917f57","_id":"next-optimized-images@2.5.7","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-VJEtwkYY6afep7fh85/dcH/1hHJ0rAUTYwVYeH+Gm796vR4Tan6r8owWhpNl4TAtDSc+WDNH+ycvnY4+WElLnA==","shasum":"fca34ae981d7e84617db3396e6eec9fae3e58ab8","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.7.tgz","fileCount":21,"unpackedSize":60244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehbCwCRA9TVsSAnZWagAAG2sP/33aXuUE4kHS2HBrrb9g\nSHoRp0K+Kwji6tZ52wAIPlMEDO0IoxTCiwrzdTZXNBqNF5GycgqW5Iyut4Fx\npVZgn74LEA5YqlpbpnB/6U0e++2yVsD7KpZ43sx28UVIVt+roqcx3FSXmBnT\nA5Kck8SaRkMqsKGIBPmXN6WzU4z9F/SqF6N71wgjATi35zZYXfYaowGE/cGm\nyxPPHBrTJCWJe2e0L2XHsc1A+82z9oX2NMGO8cefOP6RSvIIG6Kx7+SZVGze\nhSS3Jy+c027woeAWfxZuVmoHxf0HiUhS1E5rYMhhj2LuRFt9e42hiSLXQzov\nQty4ttIKhAORQPHLM46FrHVLgZy0cJ/fNzPLSS2OdQq2U7Lf+TUwcl+8sFY+\ntEK5ERS6dVdmAzfLT7leUUSXbLrgFkjFLphrlCiCTiDMEyfmhwe3n9rr24YA\nQoR3sk2OjV3XOFK8kq19gJ0J/EZN0tXnUbY7GE0zogpoXfhfoPFDKpMOKPj2\nd9IBiDHuewrm8hg8szxTKLwyBeHztZvMxXfoLDg8OC8bkIwaBsoBbJRcZzHn\nPSkHxMzTcsh4d4oHVlf7ThNbOHZ0tNrbDSF6hOiCFIareRZlytTwm1Nza5d2\nsyt2mgcCCqKMnZL8KKEKUGk2yz8uX4mpPNU6Wi6cWKgcA63hXtpVWkhoq20w\nzk8r\r\n=p77J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE01H9RMSJHins8esydTmxIadj6TpyuYMFVziEfC81bhAiEA8+IKvFceLqKL7WaUWI5anR/+CIcr/h444Lf6BT3Kae0="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.7_1585819823517_0.5679112802362272"},"_hasShrinkwrap":false},"2.5.8-canary.0":{"name":"next-optimized-images","version":"2.5.8-canary.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n**Upgrading from v1 to v2? Please read the [UPGRADING.md](https://github.com/cyrilwanner/next-optimized-images/blob/master/UPGRADING.md).**\n\n---\n\nAutomatically optimize images used in [next.js](https://github.com/zeit/next.js) projects (`jpeg`, `png`, `svg`, `webp` and `gif`).\n\nImage sizes can often get reduced between 20-60%, but this is not the only thing `next-optimized-images` does:\n\n* **Reduces image size** by optimizing images during build\n* Improves loading speed by providing **progressive images** (for formats that support it)\n* **Inlines small images** to save HTTP requests and additional roundtrips\n* Adds a content hash to the file name so images can get cached on CDN level and in the browser for a long time\n* Same image URLs over multiple builds for long time caching\n* Provides **[query params](#query-params)** for file-specific handling/settings\n* jpeg/png images can be **converted to [`webp` on the fly](#webp)** for an even smaller size\n* Provides the possibility to use **[`SVG sprites`](#sprite)** for a better performance when using the same icons multiple times (e.g. in a list)\n* Can **[resize](#resize)** images or generate different **placeholders while lazy loading** images: [low quality images](#lqip), [dominant colors](#lqip-colors) or [image outlines](#trace)\n\n## Table of contents\n\n- [Installation](#installation)\n- [Optimization Packages](#optimization-packages)\n- [Usage](#usage)\n  - [Query Params](#query-params)\n- [Configuration](#configuration)\n- [Example](#example)\n- [See also](#see-also)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images\n```\n\n*Node >= 8 is required for version 2. If you need to support older node versions, you can still use [version 1](https://github.com/cyrilwanner/next-optimized-images/tree/v1#readme) of next-optimized-images.*\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nSee the [configuration](#configuration) section for all available options.\n\n:warning: **From version 2 on, images won't get optimized out of the box anymore. You have to install the optimization packages you really need in addition to this plugin.**\nThis doesn't force you to download big optimization libraries you don't even use.\nPlease check out the table of all [optional optimization packages](#optimization-packages).\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Optimization Packages\n\nStarting from version 2, you have to install the optimization packages you need in your project in addition to this plugin. `next-optimized-images` then detects all the supported packages and uses them.\n\n**So you only have to install these packages with npm, there is no additional step needed after that.**\n\nThe following optimization packages are available and supported:\n\n| Optimization Package | Description | Project Link |\n| -------------------- | ----------- | ------------ |\n| `imagemin-mozjpeg`   | Optimizes JPEG images. | [Link](https://www.npmjs.com/package/imagemin-mozjpeg)\n| `imagemin-optipng`   | Optimizes PNG images. | [Link](https://www.npmjs.com/package/imagemin-optipng)\n| `imagemin-pngquant`  | Alternative for optimizing PNG images. | [Link](https://www.npmjs.com/package/imagemin-pngquant)\n| `imagemin-gifsicle`  | Optimizes GIF images. | [Link](https://www.npmjs.com/package/imagemin-gifsicle)\n| `imagemin-svgo`      | Optimizes SVG images and icons. | [Link](https://www.npmjs.com/package/imagemin-svgo)\n| `svg-sprite-loader`  | Adds the possibility to use svg sprites for a better performance. Read the [sprite](#sprite) section for more information. | [Link](https://www.npmjs.com/package/svg-sprite-loader)\n| `webp-loader`        | Optimizes WebP images and can convert JPEG/PNG images to WebP on the fly ([webp resource query](#webp)). | [Link](https://www.npmjs.com/package/webp-loader)\n| `lqip-loader`        | Generates low quality image placeholders and can extract the dominant colors of an image ([lqip resource query](#lqip)) | [Link](https://www.npmjs.com/package/lqip-loader)\n| `responsive-loader`  | Can resize images on the fly and create multiple versions of it for a `srcset`.<br>**Important**: You need to additionally install either `jimp` (node implementation, slower) or `sharp` (binary, faster) | [Link](https://www.npmjs.com/package/responsive-loader)\n| `image-trace-loader` | Generates SVG image [outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image ([trace resource query](#trace)). | [Link](https://www.npmjs.com/package/image-trace-loader)\n\n> Example: If you have JPG, PNG, and SVG images in your project, you would then need to run\n> ```bash\n> npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo\n> ```\n\nTo install *all* optional packages, run:\n```bash\nnpm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loader\n```\n\n:warning: Please note that by default, images are only optimized for **production builds, not development builds**. However, this can get changed with the [`optimizeImagesInDev` config](#optimizeimagesindev).\n\n:bulb: Depending on your build/deployment setup, it is also possibile to install these as devDependencies. Just make sure that the packages are available when you build your project.\n\n:information_source: Since version 2.5, `ico` files are also optionally supported but need to be enabled in the [`handleImages` config](#handleimages).\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div>\n    <img src={require('./images/my-image.jpg')} />\n    <img src={require('./images/my-small-image.png')} />\n    <img src={require('./images/my-icon.svg')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n *   <img src=\"/_next/static/images/my-icon-572812a2b04ed76f93f05bf57563c35d.svg\" />\n * </div>\n */\n```\n\nPlease be aware that images only get optimized [in production by default](#optimizeimagesindev) to reduce the build time in your development environment.\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n\n/**\n * Results in:\n *\n * .Header {\n *   background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');\n * }\n */\n```\n\nIf the file is below the [limit for inlining images](#inlineimagelimit), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\nYou can use both variants directly on an image in the `src` attribute or in your CSS file inside an `url()` value.\n\n### Query params\n\n> *If you are using flow or eslint-plugin-import and are experiencing some issues with query params, check out the [solution posted by @eleith](https://github.com/cyrilwanner/next-optimized-images/issues/23).*\n\nThere are some cases where you don't want to reference a file or get a base64 data-uri but you actually want to include the raw file directly into your HTML.\nEspecially for SVGs because you can't style them with CSS if they are in an `src` attribute on an image.\n\nSo there are additional options you can specify as query params when you import the images.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert a JPEG/PNG image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?lqip-colors`](#lqip-colors): Extract the dominant colors of an image\n* [`?trace`](#trace): Use traced outlines as loading placeholder\n* [`?resize`](#resize): Resize an image\n* [`?sprite`](#sprite): Use SVG sprites\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\nAs described above, this is useful for SVGs so you can style them with CSS.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div dangerouslySetInnerHTML={{__html: require('./images/my-icon.svg?include')}} />\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n *     <path d=\"M8 0C3.589 0 0 3.589 0 8s3.589 ...\" style=\"filled-opacity:1\" fill-rule=\"evenodd\">\n *     </path>\n *   </svg>\n * </div>\n */\n```\n\nThe image will still get optimized, even if it is directly included in your content (but by [default only in production](#optimizeimagesindev)).\n\n#### ?webp\n\n> Requires the optional optimization package `webp-loader` (`npm install webp-loader`)\n\nWebP is an even better and smaller image format but it is still not that common yet and developers often only receive jpeg/png images.\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts a JPEG/PNG image to the new WebP format.\n\nFor browsers that don't yet support WebP, you can also provide a fallback using the `<picture>` tag:\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <picture>\n    <source srcSet={require('./images/my-image.jpg?webp')} type=\"image/webp\" />\n    <source srcSet={require('./images/my-image.jpg')} type=\"image/jpeg\" />\n    <img src={require('./images/my-image.jpg')} />\n  </picture>\n);\n\n/**\n * Results in:\n * <picture>\n *   <source srcset=\"/_next/static/images/my-image-d6816ecc28862cf6f725b29b1d6aab5e.jpg.webp\" type=\"image/webp\" />\n *   <source srcset=\"/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" type=\"image/jpeg\" />\n *   <img src=\"/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n * </picture>\n */\n```\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <img src={require('./images/my-image.jpg?inline')} />\n);\n\n/**\n * Results in:\n *\n * <img src=\"data:image/png;base64,...\" />\n *\n * Even if the image size is above the defined limit.\n */\n```\n\nThe inlining will only get applied to exactly this import, so if you import the image a second time without the `?inline` option, it will then get normally referenced as a file if it is above your limit.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\nIf you are using this option a lot, it could also make sense to [disable the inlining](#inlineimagelimit) completely and use the [`?inline`](#inline) param for single files.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <img src={require('./images/my-image.jpg?url')} />\n);\n\n/**\n * Results in:\n *\n * <img src=\"/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * Even if the image size is below the defined inlining limit.\n */\n```\n\nThe inlining will only get disabled for exactly this import, so if you import the image a second time without the `?url` option, it will then get inlined again if it is below your limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <img src={require('./images/my-image.jpg?original')} />\n);\n```\n\nThis can also be combined with the `?url` or `?inline` resource query (e.g. `?original&inline`).\n\n#### ?lqip\n\n> Requires the optional package `lqip-loader` (`npm install lqip-loader`)\n\nWhen using this resource query, a very small (about 10x7 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\nYou will normally stretch this tiny image to the same size as the real image is, like *medium.com* does.\nTo make the stretched image look better in chrome, check out [this solution](https://github.com/zouhir/lqip-loader/issues/5) and add a blur filter to your image.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <img src={require('./images/my-image.jpg?lqip')} />\n);\n\n/**\n * Replaces the src with a tiny image in base64.\n */\n```\n\n#### ?lqip-colors\n\n> Requires the optional package `lqip-loader` (`npm install lqip-loader`)\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?lqip-colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?lqip-colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Requires the optional package `image-trace-loader` (`npm install image-trace-loader`)\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n```javascript\nimport React from 'react';\nimport MyImage from './images/my-image.jpg?trace';\n\nexport default () => (\n  <div>\n    <img src={MyImage.trace} />   {/* <-- SVG trace */}\n    <img src={MyImage.src} />     {/* <-- Normal image which you want to lazy load */}\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *  <img src=\"data:image/svg+xml,...\">\n *  <img src=\"/_next/static/images/image-trace-85bf5c58ce3d91fbbf54aa03c44ab747.jpg\">\n * </div>\n */\n```\n\n`require('./images/my-image.jpg?trace')` returns an object containing the trace (`trace`) as an inlined SVG and the normal image (`src`) which also gets optimized.\n\nThe trace will have exactly the same width and height as your normal image.\n\nOptions for the loader can be set in the [plugin configuration](#imagetrace).\n\n#### ?resize\n\n> Requires the optional package `responsive-loader` (`npm install responsive-loader`)\n> and either `jimp` (node implementation, slower) or `sharp` (binary, faster)\n\nAfter the `?resize` resource query, you can add any other query of the [`responsive-loader`](https://www.npmjs.com/package/responsive-loader) which allows you to resize images and create whole source sets.\n\n```javascript\nimport React from 'react';\n\nconst oneSize = require('./images/my-image.jpg?resize&size=300');\nconst multipleSizes = require('./images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000');\n\nexport default () => (\n  <div>\n    {/* Single image: */}\n    <img src={oneSize.src} />\n\n    {/* Source set with multiple sizes: */}\n    <img srcSet={multipleSizes.srcSet} src={multipleSizes.src} />\n  </div>\n);\n```\n\nIf only the `size` or `sizes` param is used, the `?resize` param can also be omitted (e.g. `my-image.jpg?size=300`). But it is required for all other parameters of `responsive-loader`.\n\nYou can also set global configs in the [`responsive`](#responsive) property (in the `next.config.js` file) and define, for example, default sizes which will get generated when you don't specify one for an image (e.g. only `my-image.jpg?resize`).\n\n#### ?sprite\n\n> Requires the optional optimization packages `imagemin-svgo` and `svg-sprite-loader` (`npm install imagemin-svgo svg-sprite-loader`)\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\nIn that case, you can use `?sprite` which uses [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) to render and inject an SVG sprite in the page automatically.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nAll props passed to the imported sprite will get applied to the `<svg>` element, so you can add a class normally with `<MyIcon className=\"icon-class\" />`.\n\nThe `svg-sprite-loader` object also gets exposed if you want to build your own component:\n\n```javascript\nimport React from 'react';\nimport icon from './icons/icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <svg viewBox={icon.viewBox}>\n      <use xlinkHref={`#${icon.id}`} />\n    </svg>\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [img-loader](https://www.npmjs.com/package/img-loader) under the hood which is based on [mozjpeg](https://github.com/imagemin/imagemin-mozjpeg), [optipng](https://github.com/imagemin/imagemin-optipng), [gifsicle](https://github.com/imagemin/imagemin-gifsicle) and [svgo](https://github.com/imagemin/imagemin-svgo).\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n#### handleImages\n\nType: `string[]`<br>\nDefault: `['jpeg', 'png', 'svg', 'webp', 'gif']`\n\n`next-optimized-images` registers the webpack loader for all these file types.\nIf you don't want one of these handled by next-optimized-images because you, for example, have another plugin or custom loader rule, simply remove it from the array.\n\nPlease note that an image being handled does not mean it also gets automatically optimized. The required optimization package for that image also has to be installed. Please read the [optimization packages](#optimization-packages) section for more information.\n\nIf an image gets handled but not optimized, it means that the original image will get used and copied for the build.\n\n:information_source: Since version 2.5, `ico` files are also supported but for backwards compatibility, they need to be manually enabled.\nBy adding `'ico'` to the `handleImages` array, the plugin will also handle `ico` files.\n\n#### inlineImageLimit\n\nType: `number`<br>\nDefault: `8192`\n\nSmaller files will get inlined with a data-uri by [url-loader](https://www.npmjs.com/package/url-loader).\nThis number defines the maximum file size (in bytes) for images to get inlined.\nIf an image is bigger, it will get copied to the static folder of next.\n\nImages will get optimized in both cases.\n\nTo completely disable image inlining, set this value to `-1`. You will then always get back an image URL.\n\n#### imagesFolder\n\nType: `string`<br>\nDefault: `'images'`\n\nFolder name inside `/static/` in which the images will get copied to during build.\n\n#### imagesPublicPath\n\nType: `string`<br>\nDefault: ``` `/_next/static/${imagesFolder}/` ```\n\nThe public path that should be used for image URLs. This can be used to serve\nthe optimized image from a cloud storage service like S3.\n\nFrom version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `imagesPublicPath` specially for images.\n\n#### imagesOutputPath\n\nType: `string`<br>\nDefault: ``` `static/${imagesFolder}/` ```\n\nThe output path that should be used for images. This can be used to have a custom output folder.\n\n#### imagesName\n\nType: `string`<br>\nDefault: `'[name]-[hash].[ext]'`\n\nThe filename of the optimized images.\nMake sure you keep the `[hash]` part so they receive a new filename if the content changes.\n\n#### optimizeImagesInDev\n\nType: `boolean`<br>\nDefault: `false`\n\nFor faster development builds and HMR, images will not get optimized by default when running in development mode.\nIn production, images will always get optimized, regardless of this setting.\n\n#### mozjpeg\n\n> Requires the optional optimization package `imagemin-mozjpeg` (`npm install imagemin-mozjpeg`)\n\nType: `object`<br>\nDefault: `{}`\n\n[mozjpeg](https://github.com/imagemin/imagemin-mozjpeg) is used for optimizing jpeg images.\nYou can specify the options for it here.\nThe default options of `mozjpeg` are used if you omit this option.\n\n#### optipng\n\n> Requires the optional optimization package `imagemin-optipng` (`npm install imagemin-optipng`)\n\nType: `object`<br>\nDefault: `{}`\n\n[optipng](https://github.com/imagemin/imagemin-optipng) is used for optimizing png images by default.\nYou can specify the options for it here.\nThe default options of `optipng` are used if you omit this option.\n\n#### pngquant\n\n> Requires the optional optimization package `imagemin-pngquant` (`npm install imagemin-pngquant`)\n\nType: `object`<br>\nDefault: `{}`\n\n[pngquant](https://github.com/imagemin/imagemin-pngquant) is an alternative way for optimizing png images.\nThe default options of `pngquant` are used if you omit this option.\n\n#### gifsicle\n\n> Requires the optional optimization package `imagemin-gifsicle` (`npm install imagemin-gifsicle`)\n\nType: `object`<br>\nDefault:\n```javascript\n{\n    interlaced: true,\n    optimizationLevel: 3,\n}\n```\n\n[gifsicle](https://github.com/imagemin/imagemin-gifsicle) is used for optimizing gif images.\nYou can specify the options for it here.\nThe default options of `gifsicle` are used if you omit this option.\n\n#### svgo\n\n> Requires the optional optimization package `imagemin-svgo` (`npm install imagemin-svgo`)\n\nType: `object`<br>\nDefault: `{}`\n\n[svgo](https://github.com/imagemin/imagemin-svgo) is used for optimizing svg images and icons.\nYou can specify the options for it here.\nThe default options of `svgo` are used if you omit this option.\n\nSingle svgo plugins can get disabled/enabled in the plugins array:\n```javascript\n{\n  svgo: {\n    plugins: [\n      { removeComments: false }\n    ]\n  }\n}\n```\n\n#### svgSpriteLoader\n\n> Requires the optional optimization packages `imagemin-svgo` and `svg-sprite-loader` (`npm install imagemin-svgo svg-sprite-loader`)\n\nType: `object`<br>\nDefault:\n```javascript\n{\n  runtimeGenerator: require.resolve(path.resolve('node_modules', 'next-optimized-images', 'svg-runtime-generator.js')),\n}\n```\n\nWhen using the [svg sprite option](#sprite), [`svg-sprite-loader`](https://github.com/kisenka/svg-sprite-loader) gets used internally.\nYou can overwrite the configuration passed to this loader here.\n\n#### webp\n\n> Requires the optional optimization package `webp-loader` (`npm install webp-loader`)\n\nType: `object`<br>\nDefault: `{}`\n\n[imagemin-webp](https://github.com/imagemin/imagemin-webp) is used for optimizing webp images and converting other formats to webp.\nYou can specify the options for it here.\nThe default options of `imagemin-webp` are used if you omit this option.\n\n#### imageTrace\n\n> Requires the optional package `image-trace-loader` (`npm install image-trace-loader`)\n\nType: `object`<br>\nDefault: `{}`\n\nWhen using [`image-trace-loader`](https://github.com/EmilTholin/image-trace-loader) for the `?trace` resource query, you can define all options for the image trace loader in this object.\nThe default options of `image-trace-loader` are used if you omit this option.\n\n#### responsive\n\n> Requires the optional optimization package `responsive-loader` (`npm install responsive-loader`)\n\nType: `object`<br>\nDefault: `{}`\n\nThe configuration for the [`responsive-loader`](https://github.com/herrstucki/responsive-loader) can be defined here.\n\n#### defaultImageLoader\n\n> Requires the optional optimization package `responsive-loader` (`npm install responsive-loader`)\n\nType: `string`<br>\nDefault: `'img-loader'`\n\nBy default, img-loader handles most of the requests.\nHowever, if you use the `responsive-loader` a lot and don't want to add the [`?resize`](#resize) query param to every require, you can set this value to `'responsive-loader'`.\n\nAfter that, `responsive-loader` will handle *all* JPEG and PNG images per default, even without an additional query param.\nJust be aware that you can't use any of the query params `next-optimized-images` provides anymore on these images because the request just gets forwarded and not modified anymore.\nAll other formats (SVG, WEBP and GIF) still work as before with the `img-loader` and so have all query params available.\n\n#### optimizeImages\n\nType: `boolean`<br>\nDefault: `true`\n\nIf you don't have any optimization package installed, no image will get optimized.\nIn this case, a warning gets written to the console during build to inform you about a possible misconfiguration.\nIf this config is intended and you indeed don't want the images to be optimized, you can set this value to `false` and you won't get the warning anymore.\n\n## Example\n\nThe options specified here are the **default** values.\n\nSo if they are good enough for your use-case, you don't have to specify them to have a shorter and cleaner `next.config.js` file.\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    // these are the default values so you don't have to provide them if they are good enough for your use-case.\n    // but you can overwrite them here with any valid value you want.\n    inlineImageLimit: 8192,\n    imagesFolder: 'images',\n    imagesName: '[name]-[hash].[ext]',\n    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],\n    optimizeImages: true,\n    optimizeImagesInDev: false,\n    mozjpeg: {\n      quality: 80,\n    },\n    optipng: {\n      optimizationLevel: 3,\n    },\n    pngquant: false,\n    gifsicle: {\n      interlaced: true,\n      optimizationLevel: 3,\n    },\n    svgo: {\n      // enable/disable svgo plugins here\n    },\n    webp: {\n      preset: 'default',\n      quality: 75,\n    },\n  }],\n]);\n```\n\n## See also\n\n* [next-images](https://github.com/arefaslani/next-images) if you just want images and not optimize them\n* [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner plugins API when you have many plugins in your `next.config.js` file\n* [next-plugins](https://github.com/zeit/next-plugins) for a list of official and community made plugins\n\n## License\n\n[MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) © Cyril Wanner\n","readmeFilename":"README.md","gitHead":"c39c44dad97f92c0fef96cfab96101b966f46b3f","_id":"next-optimized-images@2.5.8-canary.0","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-qAORj+b7uyytjbOdWfFpf94KWUe8dV4tFokJ+qFsya/Aw+6ymkpRFs75PRw+91TVLyFxQDRg14uJ2O05GoLxIA==","shasum":"4f3dd496010bd0fe34a9f1475fa8772332e63b2b","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.8-canary.0.tgz","fileCount":21,"unpackedSize":59868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekZNwCRA9TVsSAnZWagAAFswP/igSpb+U7AsxmsDNe+10\nyuF4FjfVapobzDdWR0BwBjMu0ocnTh0ioRYk/f7FvONO325N0VxiFQ6Sg1ND\nKgd5JdszeJoorU6PnVBulcTr93NVJVAuhiS9ppvxmCElaKTYdUltyzWYyK/1\nqYC/u/F9cbgmHw8EgUtri4qCeW/wIjacqZ1+c4ClpZ4X+FIZfTSAh+Dc9iNt\n2SWSU/k8HUyF7v4Jb0wwShj/fEXBp8RMQtsq/Xs277U0x5NTYPY7a+zysiV0\nvT6CtgHyMJB/yl23GYnVfAVHr+Lw4D59x1LMQ+8+0hgnW3xjqgRlspg0rtJX\nJuA3KcOsYx4mkFiSjNZAsXugf8jOVmw6O1ghYKY7pI3bstm6JuCiUAyVAM1n\nlm2k5P4tK+OcPxDrBmWQITjN/U4MMylV+tk1Z8BtvG5xHk3dYL7sHPxEKIM8\nSw5sXeD1ZsnJbkIWfbTr4NDuGIzH7a4nwjjdkBbPXcaKkmO5eeKlGJHq9HF3\no0ROrv5866D6D1PKqsqhL7iCjsr9tlIeZJgGRHFJ2W7G/kyxNIgZjAZT+Jpv\n/5K5BOCowaFGL04H4ZHlmZPtsTa5777Ao2VlGejwuYUqtYvNegUG4FNab/fu\n4ke1NopnfvQLDNNpSNNDox/NpihIahjn7IEFmZkNmuXVL735jwBXGKjg7IEI\nwX3J\r\n=7M6y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFUIIPxtd89kO247P6UWMXSkXPmcgxAg1tn5RBFAY6VQIhAOe6oY+3bzajY/3gOEOq7PYptnC3S3XFUwJ1VxoqYjxN"}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.8-canary.0_1586598767938_0.8761984868322881"},"_hasShrinkwrap":false},"2.5.8-canary.1":{"name":"next-optimized-images","version":"2.5.8-canary.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n**Upgrading from v1 to v2? Please read the [UPGRADING.md](https://github.com/cyrilwanner/next-optimized-images/blob/master/UPGRADING.md).**\n\n---\n\nAutomatically optimize images used in [next.js](https://github.com/zeit/next.js) projects (`jpeg`, `png`, `svg`, `webp` and `gif`).\n\nImage sizes can often get reduced between 20-60%, but this is not the only thing `next-optimized-images` does:\n\n* **Reduces image size** by optimizing images during build\n* Improves loading speed by providing **progressive images** (for formats that support it)\n* **Inlines small images** to save HTTP requests and additional roundtrips\n* Adds a content hash to the file name so images can get cached on CDN level and in the browser for a long time\n* Same image URLs over multiple builds for long time caching\n* Provides **[query params](#query-params)** for file-specific handling/settings\n* jpeg/png images can be **converted to [`webp` on the fly](#webp)** for an even smaller size\n* Provides the possibility to use **[`SVG sprites`](#sprite)** for a better performance when using the same icons multiple times (e.g. in a list)\n* Can **[resize](#resize)** images or generate different **placeholders while lazy loading** images: [low quality images](#lqip), [dominant colors](#lqip-colors) or [image outlines](#trace)\n\n## Table of contents\n\n- [Installation](#installation)\n- [Optimization Packages](#optimization-packages)\n- [Usage](#usage)\n  - [Query Params](#query-params)\n- [Configuration](#configuration)\n- [Example](#example)\n- [See also](#see-also)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images\n```\n\n*Node >= 8 is required for version 2. If you need to support older node versions, you can still use [version 1](https://github.com/cyrilwanner/next-optimized-images/tree/v1#readme) of next-optimized-images.*\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nSee the [configuration](#configuration) section for all available options.\n\n:warning: **From version 2 on, images won't get optimized out of the box anymore. You have to install the optimization packages you really need in addition to this plugin.**\nThis doesn't force you to download big optimization libraries you don't even use.\nPlease check out the table of all [optional optimization packages](#optimization-packages).\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Optimization Packages\n\nStarting from version 2, you have to install the optimization packages you need in your project in addition to this plugin. `next-optimized-images` then detects all the supported packages and uses them.\n\n**So you only have to install these packages with npm, there is no additional step needed after that.**\n\nThe following optimization packages are available and supported:\n\n| Optimization Package | Description | Project Link |\n| -------------------- | ----------- | ------------ |\n| `imagemin-mozjpeg`   | Optimizes JPEG images. | [Link](https://www.npmjs.com/package/imagemin-mozjpeg)\n| `imagemin-optipng`   | Optimizes PNG images. | [Link](https://www.npmjs.com/package/imagemin-optipng)\n| `imagemin-pngquant`  | Alternative for optimizing PNG images. | [Link](https://www.npmjs.com/package/imagemin-pngquant)\n| `imagemin-gifsicle`  | Optimizes GIF images. | [Link](https://www.npmjs.com/package/imagemin-gifsicle)\n| `imagemin-svgo`      | Optimizes SVG images and icons. | [Link](https://www.npmjs.com/package/imagemin-svgo)\n| `svg-sprite-loader`  | Adds the possibility to use svg sprites for a better performance. Read the [sprite](#sprite) section for more information. | [Link](https://www.npmjs.com/package/svg-sprite-loader)\n| `webp-loader`        | Optimizes WebP images and can convert JPEG/PNG images to WebP on the fly ([webp resource query](#webp)). | [Link](https://www.npmjs.com/package/webp-loader)\n| `lqip-loader`        | Generates low quality image placeholders and can extract the dominant colors of an image ([lqip resource query](#lqip)) | [Link](https://www.npmjs.com/package/lqip-loader)\n| `responsive-loader`  | Can resize images on the fly and create multiple versions of it for a `srcset`.<br>**Important**: You need to additionally install either `jimp` (node implementation, slower) or `sharp` (binary, faster) | [Link](https://www.npmjs.com/package/responsive-loader)\n| `image-trace-loader` | Generates SVG image [outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image ([trace resource query](#trace)). | [Link](https://www.npmjs.com/package/image-trace-loader)\n\n> Example: If you have JPG, PNG, and SVG images in your project, you would then need to run\n> ```bash\n> npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo\n> ```\n\nTo install *all* optional packages, run:\n```bash\nnpm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loader\n```\n\n:warning: Please note that by default, images are only optimized for **production builds, not development builds**. However, this can get changed with the [`optimizeImagesInDev` config](#optimizeimagesindev).\n\n:bulb: Depending on your build/deployment setup, it is also possibile to install these as devDependencies. Just make sure that the packages are available when you build your project.\n\n:information_source: Since version 2.5, `ico` files are also optionally supported but need to be enabled in the [`handleImages` config](#handleimages).\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div>\n    <img src={require('./images/my-image.jpg')} />\n    <img src={require('./images/my-small-image.png')} />\n    <img src={require('./images/my-icon.svg')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n *   <img src=\"/_next/static/images/my-icon-572812a2b04ed76f93f05bf57563c35d.svg\" />\n * </div>\n */\n```\n\nPlease be aware that images only get optimized [in production by default](#optimizeimagesindev) to reduce the build time in your development environment.\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n\n/**\n * Results in:\n *\n * .Header {\n *   background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');\n * }\n */\n```\n\nIf the file is below the [limit for inlining images](#inlineimagelimit), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\nYou can use both variants directly on an image in the `src` attribute or in your CSS file inside an `url()` value.\n\n### Query params\n\n> *If you are using flow or eslint-plugin-import and are experiencing some issues with query params, check out the [solution posted by @eleith](https://github.com/cyrilwanner/next-optimized-images/issues/23).*\n\nThere are some cases where you don't want to reference a file or get a base64 data-uri but you actually want to include the raw file directly into your HTML.\nEspecially for SVGs because you can't style them with CSS if they are in an `src` attribute on an image.\n\nSo there are additional options you can specify as query params when you import the images.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert a JPEG/PNG image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?lqip-colors`](#lqip-colors): Extract the dominant colors of an image\n* [`?trace`](#trace): Use traced outlines as loading placeholder\n* [`?resize`](#resize): Resize an image\n* [`?sprite`](#sprite): Use SVG sprites\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\nAs described above, this is useful for SVGs so you can style them with CSS.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div dangerouslySetInnerHTML={{__html: require('./images/my-icon.svg?include')}} />\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n *     <path d=\"M8 0C3.589 0 0 3.589 0 8s3.589 ...\" style=\"filled-opacity:1\" fill-rule=\"evenodd\">\n *     </path>\n *   </svg>\n * </div>\n */\n```\n\nThe image will still get optimized, even if it is directly included in your content (but by [default only in production](#optimizeimagesindev)).\n\n#### ?webp\n\n> Requires the optional optimization package `webp-loader` (`npm install webp-loader`)\n\nWebP is an even better and smaller image format but it is still not that common yet and developers often only receive jpeg/png images.\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts a JPEG/PNG image to the new WebP format.\n\nFor browsers that don't yet support WebP, you can also provide a fallback using the `<picture>` tag:\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <picture>\n    <source srcSet={require('./images/my-image.jpg?webp')} type=\"image/webp\" />\n    <source srcSet={require('./images/my-image.jpg')} type=\"image/jpeg\" />\n    <img src={require('./images/my-image.jpg')} />\n  </picture>\n);\n\n/**\n * Results in:\n * <picture>\n *   <source srcset=\"/_next/static/images/my-image-d6816ecc28862cf6f725b29b1d6aab5e.jpg.webp\" type=\"image/webp\" />\n *   <source srcset=\"/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" type=\"image/jpeg\" />\n *   <img src=\"/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n * </picture>\n */\n```\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <img src={require('./images/my-image.jpg?inline')} />\n);\n\n/**\n * Results in:\n *\n * <img src=\"data:image/png;base64,...\" />\n *\n * Even if the image size is above the defined limit.\n */\n```\n\nThe inlining will only get applied to exactly this import, so if you import the image a second time without the `?inline` option, it will then get normally referenced as a file if it is above your limit.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\nIf you are using this option a lot, it could also make sense to [disable the inlining](#inlineimagelimit) completely and use the [`?inline`](#inline) param for single files.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <img src={require('./images/my-image.jpg?url')} />\n);\n\n/**\n * Results in:\n *\n * <img src=\"/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * Even if the image size is below the defined inlining limit.\n */\n```\n\nThe inlining will only get disabled for exactly this import, so if you import the image a second time without the `?url` option, it will then get inlined again if it is below your limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <img src={require('./images/my-image.jpg?original')} />\n);\n```\n\nThis can also be combined with the `?url` or `?inline` resource query (e.g. `?original&inline`).\n\n#### ?lqip\n\n> Requires the optional package `lqip-loader` (`npm install lqip-loader`)\n\nWhen using this resource query, a very small (about 10x7 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\nYou will normally stretch this tiny image to the same size as the real image is, like *medium.com* does.\nTo make the stretched image look better in chrome, check out [this solution](https://github.com/zouhir/lqip-loader/issues/5) and add a blur filter to your image.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <img src={require('./images/my-image.jpg?lqip')} />\n);\n\n/**\n * Replaces the src with a tiny image in base64.\n */\n```\n\n#### ?lqip-colors\n\n> Requires the optional package `lqip-loader` (`npm install lqip-loader`)\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?lqip-colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?lqip-colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Requires the optional package `image-trace-loader` (`npm install image-trace-loader`)\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n```javascript\nimport React from 'react';\nimport MyImage from './images/my-image.jpg?trace';\n\nexport default () => (\n  <div>\n    <img src={MyImage.trace} />   {/* <-- SVG trace */}\n    <img src={MyImage.src} />     {/* <-- Normal image which you want to lazy load */}\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *  <img src=\"data:image/svg+xml,...\">\n *  <img src=\"/_next/static/images/image-trace-85bf5c58ce3d91fbbf54aa03c44ab747.jpg\">\n * </div>\n */\n```\n\n`require('./images/my-image.jpg?trace')` returns an object containing the trace (`trace`) as an inlined SVG and the normal image (`src`) which also gets optimized.\n\nThe trace will have exactly the same width and height as your normal image.\n\nOptions for the loader can be set in the [plugin configuration](#imagetrace).\n\n#### ?resize\n\n> Requires the optional package `responsive-loader` (`npm install responsive-loader`)\n> and either `jimp` (node implementation, slower) or `sharp` (binary, faster)\n\nAfter the `?resize` resource query, you can add any other query of the [`responsive-loader`](https://www.npmjs.com/package/responsive-loader) which allows you to resize images and create whole source sets.\n\n```javascript\nimport React from 'react';\n\nconst oneSize = require('./images/my-image.jpg?resize&size=300');\nconst multipleSizes = require('./images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000');\n\nexport default () => (\n  <div>\n    {/* Single image: */}\n    <img src={oneSize.src} />\n\n    {/* Source set with multiple sizes: */}\n    <img srcSet={multipleSizes.srcSet} src={multipleSizes.src} />\n  </div>\n);\n```\n\nIf only the `size` or `sizes` param is used, the `?resize` param can also be omitted (e.g. `my-image.jpg?size=300`). But it is required for all other parameters of `responsive-loader`.\n\nYou can also set global configs in the [`responsive`](#responsive) property (in the `next.config.js` file) and define, for example, default sizes which will get generated when you don't specify one for an image (e.g. only `my-image.jpg?resize`).\n\n#### ?sprite\n\n> Requires the optional optimization packages `imagemin-svgo` and `svg-sprite-loader` (`npm install imagemin-svgo svg-sprite-loader`)\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\nIn that case, you can use `?sprite` which uses [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) to render and inject an SVG sprite in the page automatically.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nAll props passed to the imported sprite will get applied to the `<svg>` element, so you can add a class normally with `<MyIcon className=\"icon-class\" />`.\n\nThe `svg-sprite-loader` object also gets exposed if you want to build your own component:\n\n```javascript\nimport React from 'react';\nimport icon from './icons/icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <svg viewBox={icon.viewBox}>\n      <use xlinkHref={`#${icon.id}`} />\n    </svg>\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [img-loader](https://www.npmjs.com/package/img-loader) under the hood which is based on [mozjpeg](https://github.com/imagemin/imagemin-mozjpeg), [optipng](https://github.com/imagemin/imagemin-optipng), [gifsicle](https://github.com/imagemin/imagemin-gifsicle) and [svgo](https://github.com/imagemin/imagemin-svgo).\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n#### handleImages\n\nType: `string[]`<br>\nDefault: `['jpeg', 'png', 'svg', 'webp', 'gif']`\n\n`next-optimized-images` registers the webpack loader for all these file types.\nIf you don't want one of these handled by next-optimized-images because you, for example, have another plugin or custom loader rule, simply remove it from the array.\n\nPlease note that an image being handled does not mean it also gets automatically optimized. The required optimization package for that image also has to be installed. Please read the [optimization packages](#optimization-packages) section for more information.\n\nIf an image gets handled but not optimized, it means that the original image will get used and copied for the build.\n\n:information_source: Since version 2.5, `ico` files are also supported but for backwards compatibility, they need to be manually enabled.\nBy adding `'ico'` to the `handleImages` array, the plugin will also handle `ico` files.\n\n#### inlineImageLimit\n\nType: `number`<br>\nDefault: `8192`\n\nSmaller files will get inlined with a data-uri by [url-loader](https://www.npmjs.com/package/url-loader).\nThis number defines the maximum file size (in bytes) for images to get inlined.\nIf an image is bigger, it will get copied to the static folder of next.\n\nImages will get optimized in both cases.\n\nTo completely disable image inlining, set this value to `-1`. You will then always get back an image URL.\n\n#### imagesFolder\n\nType: `string`<br>\nDefault: `'images'`\n\nFolder name inside `/static/` in which the images will get copied to during build.\n\n#### imagesPublicPath\n\nType: `string`<br>\nDefault: ``` `/_next/static/${imagesFolder}/` ```\n\nThe public path that should be used for image URLs. This can be used to serve\nthe optimized image from a cloud storage service like S3.\n\nFrom version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `imagesPublicPath` specially for images.\n\n#### imagesOutputPath\n\nType: `string`<br>\nDefault: ``` `static/${imagesFolder}/` ```\n\nThe output path that should be used for images. This can be used to have a custom output folder.\n\n#### imagesName\n\nType: `string`<br>\nDefault: `'[name]-[hash].[ext]'`\n\nThe filename of the optimized images.\nMake sure you keep the `[hash]` part so they receive a new filename if the content changes.\n\n#### optimizeImagesInDev\n\nType: `boolean`<br>\nDefault: `false`\n\nFor faster development builds and HMR, images will not get optimized by default when running in development mode.\nIn production, images will always get optimized, regardless of this setting.\n\n#### mozjpeg\n\n> Requires the optional optimization package `imagemin-mozjpeg` (`npm install imagemin-mozjpeg`)\n\nType: `object`<br>\nDefault: `{}`\n\n[mozjpeg](https://github.com/imagemin/imagemin-mozjpeg) is used for optimizing jpeg images.\nYou can specify the options for it here.\nThe default options of `mozjpeg` are used if you omit this option.\n\n#### optipng\n\n> Requires the optional optimization package `imagemin-optipng` (`npm install imagemin-optipng`)\n\nType: `object`<br>\nDefault: `{}`\n\n[optipng](https://github.com/imagemin/imagemin-optipng) is used for optimizing png images by default.\nYou can specify the options for it here.\nThe default options of `optipng` are used if you omit this option.\n\n#### pngquant\n\n> Requires the optional optimization package `imagemin-pngquant` (`npm install imagemin-pngquant`)\n\nType: `object`<br>\nDefault: `{}`\n\n[pngquant](https://github.com/imagemin/imagemin-pngquant) is an alternative way for optimizing png images.\nThe default options of `pngquant` are used if you omit this option.\n\n#### gifsicle\n\n> Requires the optional optimization package `imagemin-gifsicle` (`npm install imagemin-gifsicle`)\n\nType: `object`<br>\nDefault:\n```javascript\n{\n    interlaced: true,\n    optimizationLevel: 3,\n}\n```\n\n[gifsicle](https://github.com/imagemin/imagemin-gifsicle) is used for optimizing gif images.\nYou can specify the options for it here.\nThe default options of `gifsicle` are used if you omit this option.\n\n#### svgo\n\n> Requires the optional optimization package `imagemin-svgo` (`npm install imagemin-svgo`)\n\nType: `object`<br>\nDefault: `{}`\n\n[svgo](https://github.com/imagemin/imagemin-svgo) is used for optimizing svg images and icons.\nYou can specify the options for it here.\nThe default options of `svgo` are used if you omit this option.\n\nSingle svgo plugins can get disabled/enabled in the plugins array:\n```javascript\n{\n  svgo: {\n    plugins: [\n      { removeComments: false }\n    ]\n  }\n}\n```\n\n#### svgSpriteLoader\n\n> Requires the optional optimization packages `imagemin-svgo` and `svg-sprite-loader` (`npm install imagemin-svgo svg-sprite-loader`)\n\nType: `object`<br>\nDefault:\n```javascript\n{\n  runtimeGenerator: require.resolve(path.resolve('node_modules', 'next-optimized-images', 'svg-runtime-generator.js')),\n}\n```\n\nWhen using the [svg sprite option](#sprite), [`svg-sprite-loader`](https://github.com/kisenka/svg-sprite-loader) gets used internally.\nYou can overwrite the configuration passed to this loader here.\n\n#### webp\n\n> Requires the optional optimization package `webp-loader` (`npm install webp-loader`)\n\nType: `object`<br>\nDefault: `{}`\n\n[imagemin-webp](https://github.com/imagemin/imagemin-webp) is used for optimizing webp images and converting other formats to webp.\nYou can specify the options for it here.\nThe default options of `imagemin-webp` are used if you omit this option.\n\n#### imageTrace\n\n> Requires the optional package `image-trace-loader` (`npm install image-trace-loader`)\n\nType: `object`<br>\nDefault: `{}`\n\nWhen using [`image-trace-loader`](https://github.com/EmilTholin/image-trace-loader) for the `?trace` resource query, you can define all options for the image trace loader in this object.\nThe default options of `image-trace-loader` are used if you omit this option.\n\n#### responsive\n\n> Requires the optional optimization package `responsive-loader` (`npm install responsive-loader`)\n\nType: `object`<br>\nDefault: `{}`\n\nThe configuration for the [`responsive-loader`](https://github.com/herrstucki/responsive-loader) can be defined here.\n\n#### defaultImageLoader\n\n> Requires the optional optimization package `responsive-loader` (`npm install responsive-loader`)\n\nType: `string`<br>\nDefault: `'img-loader'`\n\nBy default, img-loader handles most of the requests.\nHowever, if you use the `responsive-loader` a lot and don't want to add the [`?resize`](#resize) query param to every require, you can set this value to `'responsive-loader'`.\n\nAfter that, `responsive-loader` will handle *all* JPEG and PNG images per default, even without an additional query param.\nJust be aware that you can't use any of the query params `next-optimized-images` provides anymore on these images because the request just gets forwarded and not modified anymore.\nAll other formats (SVG, WEBP and GIF) still work as before with the `img-loader` and so have all query params available.\n\n#### optimizeImages\n\nType: `boolean`<br>\nDefault: `true`\n\nIf you don't have any optimization package installed, no image will get optimized.\nIn this case, a warning gets written to the console during build to inform you about a possible misconfiguration.\nIf this config is intended and you indeed don't want the images to be optimized, you can set this value to `false` and you won't get the warning anymore.\n\n## Example\n\nThe options specified here are the **default** values.\n\nSo if they are good enough for your use-case, you don't have to specify them to have a shorter and cleaner `next.config.js` file.\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    // these are the default values so you don't have to provide them if they are good enough for your use-case.\n    // but you can overwrite them here with any valid value you want.\n    inlineImageLimit: 8192,\n    imagesFolder: 'images',\n    imagesName: '[name]-[hash].[ext]',\n    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],\n    optimizeImages: true,\n    optimizeImagesInDev: false,\n    mozjpeg: {\n      quality: 80,\n    },\n    optipng: {\n      optimizationLevel: 3,\n    },\n    pngquant: false,\n    gifsicle: {\n      interlaced: true,\n      optimizationLevel: 3,\n    },\n    svgo: {\n      // enable/disable svgo plugins here\n    },\n    webp: {\n      preset: 'default',\n      quality: 75,\n    },\n  }],\n]);\n```\n\n## See also\n\n* [next-images](https://github.com/arefaslani/next-images) if you just want images and not optimize them\n* [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner plugins API when you have many plugins in your `next.config.js` file\n* [next-plugins](https://github.com/zeit/next-plugins) for a list of official and community made plugins\n\n## License\n\n[MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) © Cyril Wanner\n","readmeFilename":"README.md","gitHead":"f89b042c61622879bb525c6db2715c0991b71418","_id":"next-optimized-images@2.5.8-canary.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-+uvRhg+fBrxkhPRsuwVGYv5ttuHHhie5O5L5uApKrDEi1jCThQ1l9O2FF8+ZfUudGHPhzxWITLcN2CkC0+c2Sg==","shasum":"103206edbde67c5e19fd5e70df9427aa7f4e29ab","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.8-canary.1.tgz","fileCount":21,"unpackedSize":59801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekdf5CRA9TVsSAnZWagAAOnsP/iAP0npj9zNxbveAWUXf\nVavRPvp/57l0oaTsfbQgJNsrbZaxGkBRq7bnsObDnCyxKfiqx/SRD5/+yveH\nmdBo2ChcU8vCr7FbhV48AU1x7F9BPcEnfG2SOMqbb3E9POv61Y1r8S6K/UD9\nPMJCZ3xv/HAwZak/LaXFvg/O4ZxefMipU00CRvI5C6HsBKUo3DSSRgZYwRdd\nWsam0HJjquZkG6T4R/OFdguzNoq7P/lH2qWx4PIwQqE+Ma9CxEBsX12dulIP\nOaQc3Vr99OvkBpHagDcryn46MJqtRLbWYiUdyKKY+QLUujPZ13EYJnIOfi7A\npsiI6yRuOeD0EVnbiKTvar1bcqzBtt+UkjQVd3AxQHMjPAGTiwe/c1C6EBqZ\nHNi9rkTzM+R/i6XarWt92u05dON8Wi3fZY8iBB6qmOKIse0Yt23mBsM8niET\npCM5q2HSLoerHf4zBpU2171+u1sFCmatowtmn1qYTIMBRhNjjnFnEcMki9TG\nqmCVAs8OfADkJGk15n/6z1wDPIAlOrqpvIjn3jhSV12OC4tReu4H/1n52uGk\nx5A77NYDojox0e2+Z8N3HOIxo7NpIP7AJNbvduEn9R7r2RNdUFCTw78s7jeY\n7mXmnmCyQ4zRQLoL22yy/1wi9sozVraO0xlFC9WH9Tli6tlZcooMqcwkdL1y\ntZuS\r\n=Gfhk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBYhu3gD+EBrjow+4TVxd6e8jnhdCTzbmSVtDSRycLAAiEAmTB+Da3Nw9PewjvdE2a+BUITQK3a26vqwaI71BwvD5I="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.8-canary.1_1586616312786_0.36225689079438017"},"_hasShrinkwrap":false},"2.5.8":{"name":"next-optimized-images","version":"2.5.8","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"b862a6a6f60e0897770bd2e9060a63e0bd6d21c3","_id":"next-optimized-images@2.5.8","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-VYWdOuOpN5QamFS0Vfa6pKKzE4D9YRTzdS07r3aj4WQiRw5VU9UhN8ZK5MA345eIuolba6o4c13wTCP9tNn2AA==","shasum":"d6539d46b64f34bcfeba119cd1f7f8565ecfc4ce","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.8.tgz","fileCount":21,"unpackedSize":59792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelaPICRA9TVsSAnZWagAAxSUP/22/VYjti7ODlvUtcBDn\n7X15op8VQ2qo/4/IitY6vcwvdA8CDaWXG/FaPim8tausPey6cRaFvuSalbXR\nb1BgrPTZ39tSBeZbgHQlD4FSuakeK9KBqL4iueU5LqRrH368oJWLCxzD5FqZ\n4Adh3fsOG4QjjYyMhdZ/U+AyuXivc8htdcMng2dTtdwiinuF+tqg4oVaiBXZ\nowrLHo8JkIfb7WPgrnYhTbksPcHF0N/giqMT2tzE7d8xdaikfZiv9dzMINzu\nTEVDqUAO69Q/6QAzBd7UPtxthbYYTghJUkk5T7z3PIySt9Kl2emS7FMjivcM\ntgahJ/8awDUfqUUDg3tIwRCLz8jukGOvK4sHkjva0dh8mwh+Q+cCE8kJs6ga\nqJFM7UGY2oqj/2T+bfCCrhM3Fn4NDGUXgilIMI1EQ/Fkly8LG5CMO/oipK0j\nXhXcDhLMHUMpXnkSZtIS91xYnHt6wffAItcvUTrCvuh5I/F9oxspseB2gGYD\n3xUK8IMT8aAe+ZzxRqKE70vhR3ZLjYiNUxkvL2VMZtf+C4ZW6NLgH0sSz9By\nusjMtSZumInAK2Zl7KyWu8r/5Q7ulTrgFFFEVh7zebHfDAUBRpSLhgVBx20m\n79LI6Hvx6lZVolHfyd0ssm4ldqHADyn5zueRcaTuAoYadAygbjYluXRC0H8j\n/P1P\r\n=y9P5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGH3MS1RlbrdRlNF+sYHrL/Uy/08SOlU14ZDDqV1cihvAiATU8TGuh7yPYtM/pLLr9/389q9TlEmMCQikYXns/WEkA=="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.5.8_1586865095686_0.9669794752184315"},"_hasShrinkwrap":false},"2.6.0":{"name":"next-optimized-images","version":"2.6.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"d570274adfa2b7b76c2db7e4568d705bf6602ae1","_id":"next-optimized-images@2.6.0","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-z+dASQLXIJPrc1iBt+jm5bravXud3nZ3de3Y3HgUNpJNUdkweym91dvKVgmvpXkEaNzExArybuSVNhOB2vR5qA==","shasum":"10ae5feca4148d3abe4a6781e304bcb1d5c3c557","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.6.0.tgz","fileCount":21,"unpackedSize":60296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeow4QCRA9TVsSAnZWagAAwNwP/3EAHPYqHizHIPBi9z06\noazdSBgA9oawX6a2JsG6A4T3uPx61fECpa6i69m/oI/ZHHyAfQAGTBxIPRve\ntxNF0GnGuzBk90vQtz4biIkLW7iD18ulrAvRrOFERysTupIeLwE8QH+qjKqO\nM4Za1OFjlMJRwhy3gxMLgkd00Sjwcsdk2tbux/IZ5aUMeWdTvlHwdlNHD2Gu\ny0u5x8hi9E8TKaizGcHruojzuUrYjOOzXVFiieDsmyravifg+He2YI2Xalx4\n5x9QdzdxghMR2vtCarf136UdT8KO+x7715c1H/xhCqG2vXZ6gGY2/+DfV16H\nsEX0fhGbJS3+R9/pRedMMDcAse8n7Gdd/2u+wpX+M9fR4RURqdsICdr1GSO3\n2DpC80VlgSDGaHv3DaGiiJbleVbv1BZ+1bIlpfForiknE6KeVsf2pVIvhrjm\n/ImjRUVYgQqDJcCzq4SgqAFHFGDLZdZAN28c1wmhqOEG466x0LEa2C5Gp62I\n30N9bdMrcyTrCkhvEtBaxPCjwnoFn6nt9ePvMDUZKWq1f96s9wW/1RcgDo3t\nj6GV/IqHuhBw1fBCdXKNtEaPtGQd6EW34nyNfItWaR4PQCSEOuDUkM28Gmb3\nogtfudxgUB538qO0PqclQmuSNeyYbdk0xKTyayorMRFZGpey5fuvZZ+4iMbU\nGrZ3\r\n=r+E6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4c2bNMksJbQFqhNO9f9XlBlHnFrEcSx++X/csm+9JdAiEAo94Hvqn47D0JmZWF5ephZJ6PkAJz0ozcnv5c/3PJGuo="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.6.0_1587744272119_0.7652380930281952"},"_hasShrinkwrap":false},"2.6.1":{"name":"next-optimized-images","version":"2.6.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"88eb8522c0e617880d57ea755e8ad9e7597b3c09","_id":"next-optimized-images@2.6.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-P+vDuXUv9yasf8vVXoJthmSRsV1jhTxZ5mlm9Ga+iVLuM7TwwwttIGbvFBYTm7H9AulukqyI5yuA9wOFytapgw==","shasum":"a9cd1be937ccc2ddd69c9415f37021205f7caa20","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.6.1.tgz","fileCount":21,"unpackedSize":60708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe083PCRA9TVsSAnZWagAAAtEQAII5rEO9UklBttFrVk3r\nY3k40WxBSweLj+qQ4Yeaz0JrX2Z0CdmtuCPN9hCQzGEf71XOKb0XAn4wcrQa\ntoL8JxenF56jBBfJPR80zIkoQMxntewYjFT2Rp+Jm53Bd3iERZCgFwVo4AL9\n8zXMXdlyH6UKamsB6fqEu+Ww9E23KOcHJhZxGzxJEilSrvopmO9MK5kpQ+A4\nD68d/E45hMt8SWTRBWEgULMi3BdSbjmOo43qNddNZskyqkxGAHbwoFXOyC2+\nNgdaweoARz6iHVd7fdqDThs+RQ80hu1Fn7Nrwme5wj5rRQskKURCkiFwcDI1\nVkq+nDDteHpyf6rv+HJhBP0w6mFpiG2ZUs8B93COsdcuPtX5LLZM9Y5UP0TP\nao2KwiqUmmVRz8gnt93dGpSVL8UZIZE4HE+th8JbwNDAnwRqlUiefZGyksJr\ntHe62fM/1NogMWk71UOxdtXg1XGH9zAkVT1VbmvBDHLxULYmAB0oGBEbM9CL\nhKDQVig06P1I2l6lhNZznUfU0rxFUyXtM5I/GWzrwD02Y6v1LQBRPOHYz9v3\n3r110VCdHlGzpolb9jz5AMKnYKJE8WUT2RUCv0LZ3nKdEL06TpDUHkw7PPbA\nDBNNpP1mZksFzxj4rYHzkjnbTcCAwh2F/u5IyMlotFYUNGjYeZPX++ZIdT80\ncZJX\r\n=XJL4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrG81Gf2JzgpPjxIqkGnVyZzFeN4yR6/C5EDast14KwQIgLtXA/VLV+C/8RF6RN0Go8KuMMsIxHWF021Dj3aLLLkE="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.6.1_1590939086304_0.9518705210341274"},"_hasShrinkwrap":false},"3.0.0-canary.0":{"name":"next-optimized-images","version":"3.0.0-canary.0","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.2.1","react-optimized-image":"^0.2.0"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- Gif optimization (gif images can normally be used, they just don't get optimized)\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture></picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"344e05c7953bde11e46d1e82b0b06e1448dbc492","_id":"next-optimized-images@3.0.0-canary.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+aXAXsobpBXxqydRC8udtAlbH+5fbzZd1sefkPVbwtRYYMbvXrZZg4nwV6fnzK6qN9xXM7C40yT/vieaC1SLMA==","shasum":"777e4e69591b8540a5dacdf253de53b84fc65763","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.0.tgz","fileCount":5,"unpackedSize":28725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5p6ICRA9TVsSAnZWagAADhIP/3/pfhpaDQbzIhT2kQWD\ntdj9yzDmlGZ51wlWhZv3NGgd0Nhws8G2NGTrrd3/W187ruARKr0QYzNnESiP\ngZIn+CdgU/tgUzML9y36Ss9x/ClCKJEyPi4jGHFm01hWCapHY2LymWVNpERc\nf+0C7uJH7rwNC061NBeKyjSFPCbDqQ+2/oBSDsc8jIMMb/T8plQoEfD4ZFb8\nwZbI1xyegINThndKka0nQD3ULD2PGZ5/iPFv2MXEDw/pZEJRMn73C99KLJpL\nSiW3lm3j3mz56lFRauasw+6rsQFdZBZDbBNqiam5DxH79ekYV6jYvdOY6Fs6\nUdHzOO0CkbGfUhhxLEog9zc6zoEj3HizzYGKXjUsNAiCRYCnO6hYLqML7YlO\nWnouzwJXwcF3WABOuEEzNnTdwWEiDclt5AQX3pCEGDjNHA6UHRt3H5PTsITi\nHkzj3ZtRq9RQU0ZdtVVI6oAWSCNeH1shZ9zLn+62g/ZzE5hoX82ZKUxUk0Oc\n7eQp4RyJpK+hnceXSunkvd6xl9MxCqdSuaSmUVrHcg9Qg4NVwzH+fskrDzSw\nhPJJ9cZDUugjPYzkNZF3u3sGr4sHybC9YzCFjTWxk7xrfXbW7I0wNSrXczOD\nNYgPKKAd5qkJdHELlYHv5zQbVdPX5R1TzfVhBMmwII9gujV67bfPgYBtw2SL\n+hH6\r\n=ZIR7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo0xNgi8HXNShyws4mePap57mcoGXDrsk9S/LsSiKqVwIgdLvTzYQjCmFIbflPMSb8pyfObBmUbgO0hElGwUa1Sgc="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.0_1592172167961_0.7737844367236457"},"_hasShrinkwrap":false},"3.0.0-canary.1":{"name":"next-optimized-images","version":"3.0.0-canary.1","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.2.1","react-optimized-image":"^0.3.0"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- Gif optimization (gif images can normally be used, they just don't get optimized)\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture></picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"d27c5a5eecbff0cce48245f2be7650acf9a58a71","_id":"next-optimized-images@3.0.0-canary.1","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-6eZfYVkYf61tkqp0GFnrKAZHagZw2XYeOHDCNCTZN3GfJtdfBPPyxZTMy7oC3JrfD5UFz0npxU2kHV3iW7dOxQ==","shasum":"d9500f721ee2be9b56bf8d902b027095adc8a466","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.1.tgz","fileCount":5,"unpackedSize":28732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGBoJCRA9TVsSAnZWagAAAjgP/ispNvKUEaZx5HvHM5ch\n2IQdu45ICyWZnhqDGW6gRWYfaIp6Zu8buo1mNTWGU8kw03yhZXALQ0eDVZXl\nyqT6OwzVVli/XYuctlVwzOZsfetAAeZ4xSwe24kWnEeLKBY9OnqdhVl/AHoR\n0otej2vPtoof/fHBWkUuSn44Al0JXGSs+kBsmEUF4bvir3WLzRa18D0Erc3t\nE5sgJOOgaCqVSw9cDOP+j8orT6iPCt/AWZWsy6EKv2ABub6WYSuaX4oiWfu+\n5MYRJTWYY2Pg+rA4NkXHTUh7bac7Pw/obx8aXcqtZxgw0SzsG7dkXd/VZ9RQ\nFeu7euoO4wcgwebke0N/QGype6VqgG2v6sYBxFH3kLwTF5KG/Fg4PBpICDUC\nBrx64ge/baJ1LyjP8UMYyh5N+PVeM2DheVMD/pSnfpm8zPirsIYVsYncWWaY\n6A8vrc5ygBiVS2FLDMp8Bog9XZu9iQYz3QQLjt52CSCcmaPIeCy/Km7+1BfH\nl4eL54/i+bBRa/uyeyIfweBKPajgnpAxlppIqqlDdcTaOu6atWHmDSEZ7Bon\nOA1nSyGa6jkekp0d18h4tEb9nLYTUWEItybroGqQBd4vGJCpUhIn/LPmSraI\n06urYbe2CtiqmIblj1XblkKWIXaX93Jf7+pIyvRXLRIsJ9uguRPk7IyFIbiX\nQd1L\r\n=81E3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0a6uX80Dfz0J7rCZN8BZJWKiC0eNU9Ynnu9StzGhAZAiEAzcfsKtAkDV26WAliYjf32sUFMTUhYjICEVzzacZmFk0="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.1_1595415048683_0.702870214917021"},"_hasShrinkwrap":false},"3.0.0-canary.2":{"name":"next-optimized-images","version":"3.0.0-canary.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.2.4","react-optimized-image":"^0.3.0"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- Gif optimization (gif images can normally be used, they just don't get optimized)\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"578ea2c738079920c35171e9d3166b51e3bc392e","_id":"next-optimized-images@3.0.0-canary.2","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-zOGf5emEWC28REI0TukSOU3WRKiATP9+I1KVTdFOzXHqV7z1xeyuv2u/gqc7CASlJ2yW5G9ZmCZHmen363FLLA==","shasum":"c0db09024253c5eb8d563da0447cdccaa3434b4c","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.2.tgz","fileCount":5,"unpackedSize":28722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGba/CRA9TVsSAnZWagAAGQwP/06SuFgzsOL2uEliegYw\nPor6Jhrxs2ZEJ6aPUKlYzaeYNWqIwHrfWo7NanGVmEkucGzospnl5ddtTOYH\nrVyTehqBArgJZWvc8Z6nGAw5o40Of0eKsE0AkSplpBuuZARyY+6morKOnURw\nE6wGI7+URG+/E6/qYS43lo5TSLOosoBcmmqFhj89utR607NfB1xnb+C7Q0Xd\nPRbzMJLaXtI6f0yylDDFwv5STkcuH1krX7H1GX5j0fVMgszIhjwCcL+u2Als\nStC6urBd5o/k6iiUBF7z0LItCE0DMHz/bFmgApEWJJbKofctRWlx2QusMvwC\n30XbGvy3BhQe1h23pAD4JToHIHdvpTiAPwyW4QIZjtdUe5H8wDOD/YAJraa9\nyF6kurOrb8Jwcd+o3mU14vmuAy7HKh+nvPRxhn0XerfIxkxP7h/ebYqCvMHR\nyXeC+bLmh+/rdjyRmlb/gT2ZJ2oU9PvRccMzXtrMXp5Zc27vf+XesLzkHo8U\n6J+ZEbanWuQl+xVCICsDDYXkOf1f9WGy9Sb8su34bV7xZArpEt5fivMxZ/Oj\nMBgaJsHW3tmoqrgP1kbfUT/7pu6u6uRmloUtxmdy0t1Y8H/16Ma85E8WUD7B\nu5WJYzDJwA5nlH+U6pBzSKE4avCk9Ji7HJJmIo1QozAUUQlDXQDDnXhaIlly\nQSC+\r\n=2C4K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDomjspHg1CLfINs+j5OQdcu0SodFGR75TaSvY8j4EPOAIgcYj/9NhDM7ZtnwxyF0qa7c9jRMJTi2sTuvLchPuyUug="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.2_1595520703248_0.0935373706000564"},"_hasShrinkwrap":false},"3.0.0-canary.3":{"name":"next-optimized-images","version":"3.0.0-canary.3","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.2.4","react-optimized-image":"^0.3.2"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- Gif optimization (gif images can normally be used, they just don't get optimized)\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"f0de449aafe508a0abb54e493d07a905dabfb033","_id":"next-optimized-images@3.0.0-canary.3","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-/TM5kISUNSOSvA8EECpG8xuxgT2BTqcv7IquWrqECSiiW8LaVdIvjfK+RDdU6dDtGdq46R1T3Tw0LOGJcDsS2Q==","shasum":"cab53826f83aaa9b8cd16a2821159a838ba106d9","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.3.tgz","fileCount":5,"unpackedSize":28722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH08wCRA9TVsSAnZWagAAyZ0P/12smeMNjkyC+f7JRH6n\nhg0eP5s2TCVXKBkksjyTuAlpoSMv+gh+2XqDuapKlMrU9ILEc3YQ1h5/3YMv\nQSpJlIt9K13vMwdBEMX8ejx+RW3olNxMyDcv+M+F9hgnVO3IUD3np6LAy3e/\nwtwk4vflefh82RS+gGxdrzp6bMw+AE4FroOMiS2xAfIE9+Y120sesl56YWJA\nrKhZq+NnBokVbn29OljIr63c+7geVL2fCnXPr6tLw9LbugCpSr1xaVjQBL7V\n/wwybU1qzQhZYwZf6rnUir/ed+DCBmW5SW47wG9FmtuX9OKdvWAo1KCW8htE\nJsBeDH7Ll5KegZ1vSCOBdszsZG18PlmOliqLFUkFr3I9NGVIGJPzuiY1tVLl\n4Z12HR4WZ40EzYgoIhiCJYrYcj2OXaoBvkZYd1SSfHri+yQzt0vzacGpfQED\nvO9kA9JWbQRKC/farpv9l1kKf6t7UblGACMSOY66Awco+IXd8f2iPaKumJXk\nrEuJzvtnoPpncBHbSNynIs2Fmh0siqD3tiy+mTgrCZ+XnGt+ESDG+1rukgYq\nWeOjTb6BTIakoxQCNZq+uiR0sbVxxtEaVO/dQa9BmNPSaENznKlc5jskV4MZ\nc9LDSPq9kdTN3UjtGAjNgaYmJPciJKVKXo3omq9hF6phVbCOjwC44PweNVt6\ne06D\r\n=WHJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3H9cxWTXcnfm4rZSG20pN+HZfy5FzCMQKGrdBFGT2+AiAq1+7F7hSXUG2mdC3CHtlQsn5ldq4EtzpvB0SvT549Kg=="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.3_1595887408380_0.10971277401238932"},"_hasShrinkwrap":false},"3.0.0-canary.4":{"name":"next-optimized-images","version":"3.0.0-canary.4","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.2.4","react-optimized-image":"^0.3.3"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- Gif optimization (gif images can normally be used, they just don't get optimized)\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"a3abb17c4bcd81f03fe9876ce89a71f937652485","_id":"next-optimized-images@3.0.0-canary.4","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-uM5ZjNNwnRpDspa4++270PQD+SUvCGNLWmcqUhQt1tXnxFMWrwVESrVbCz231N/yeeMeLHm1swFFLDQZGYkkLw==","shasum":"d8ee5f9ed49115d09d5b20b13d8ed9da3448cd40","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.4.tgz","fileCount":5,"unpackedSize":28722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH1CNCRA9TVsSAnZWagAAk54P/2bP9+fqnDV7b6BmNh2K\njgd0oxeXXUynnG+jFpBGd4PunWKaKxfjuMqfQqE8RoEjsDMAiVXXhfr2Nrkv\nOu/7sFNL5RPQn3GIjVsweXpO+Of1CPwPhXFUxW6ikeEeTSKUEf7Gfi69O5jN\ngMnMk9NWFsA3l37teXLzFpDuPGVHgfBJY0UC3SdOtlTvEEBvqKLH8tkpC7G9\nQQS9PHQmoUAnZqdhulHpQRZ4jNCH49U3RUX7kF+MPdwiVGJsYS3BBb18I//g\nLwvynWMr3U2/EcWMUfXqyAtcNxdA2C4QiGOBUyh5aaBMKOcHjREUYuwz/Qe1\nzCRoM1jgpQKhmoh+6ndIP8Z9En7HsepLEyYJot6ct515w2g3rgtNrZQySn1G\nHMdcVICSKnXIkELSb/qt6fwaegJu+jgv056dDzU6Dpq4HIDVNy30CiDDf2Ph\n9uMoVbvLCgYEUaJTiUF1aEqi8CGqcpl+QbTZV6fOwX+yt4YDHaFKENmCbBGC\n0ets5ENWJ9ZgHNsmvvIkvSlHFf3MHQfAH1c5OLLt3YVBdS3wAP+9GqLpi3Tf\nbAyo2KldJzOuVoZGIXYHcRtoH6Tm5hDudA25wUKzj8OnNnlQqYli7yq4h0VA\nixI3KF3vNvwzI7qpjtc7YipQlv7xSDB31TVWhKxy48s4ldCQOa/GcP51whgs\nQsGw\r\n=jWOK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhkf7sX9D7Qw4W9BrhzmvML59oLDVc69W6iFz16lXMnAIgcHQdjpCpUGTPJAcblSS2xjQvXHzLEJg5G+jpWm95U/0="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.4_1595887757259_0.17120168964694238"},"_hasShrinkwrap":false},"2.6.2":{"name":"next-optimized-images","version":"2.6.2","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","main":"lib/index.js","scripts":{"lint":"eslint lib","lint:fix":"eslint --fix lib","test":"jest --coverage","test:watch":"jest --watch"},"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"license":"MIT","bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","dependencies":{"chalk":"^2.4.2","figures":"^3.0.0","file-loader":"^3.0.1","imagemin":"^6.1.0","img-loader":"^3.0.1","raw-loader":"^2.0.0","url-loader":"^1.1.2"},"devDependencies":{"eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jest":"^22.5.1","jest":"^24.7.1","loader-utils":"^1.2.3","npm-autoinstaller":"^1.3.1","svg-sprite-loader":"^4.1.3","webpack":"^4.30.0"},"gitHead":"fe31e5c77008a88ce9ffe76d504229562ad8a549","_id":"next-optimized-images@2.6.2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-yH/f3eLmoQ/TxvWRiSuM6AuF3tR1s4nePdHPTm9gl4lAaGEKxTGaSuUL+ZxE5j/c/ITrnHVHibQzOz1Jl8euQw==","shasum":"8974a2186758c50e1a263c6866dbec5c25280db5","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.6.2.tgz","fileCount":21,"unpackedSize":61054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIEBuCRA9TVsSAnZWagAA68AP/1h4eKwSt29zeUNHd1QO\nmBhIsPwlTeq+szmmILWSsJ3EfYex3O6PjDkY4BbEjCqBPtBd3j6a/8E3fAts\n+M4KdqDE/tUOO4sjneJeVYOa0nRh48OhsnCNGqzsUpQEhAGTyi1ib7aiZUq/\nAYLwmf8uiIg6aPHxuclrwbyuWLb59valw2hxm0ht0QMzvPjnFsMRY/XaaNpc\nhxt6xn2w/RoCUb/J/jKWhADWzPmnP/LJS8gpxtknCoUEAouzmgEy7jH1btLK\n4awoHlivTCKSC6zKxGco4cD+jR3fOIctdjnqTPcHyR7+GFEMvG92fi2/hcCF\n1tm8PLBj5f4iOk02TyDCdwigyAd26k9Hp53CdkQpjrB+Js1yRtECfcIhyByV\nHpoyHDYYRvARqH8tCLcbmNuU+XMcnGnrNriJAZkeQcWLSaeaoLwgyfcs4Czv\nxSlr88C/TMY5bTBe4AclOAYkprJAzEgEtGbq/mRuFeTZqPXUdZHl+qRO5uij\nlDTvD4oRWvgKGgN+Ko9nZtLe3HfmvxufPeFhxoAQrJvBJxCzblqgZHTU5hD0\nCl21vKdcU5ew08gf02ffsZ9F+7w7ss2/yTs0a7hBpZoC3mZsoFnIohy3kVie\nDUcYNohobuD+1qL3Y0crxzKq4t9CgePpFfExpwWFrR8yhjNG+y/pRA0N+cfl\nYWiT\r\n=04X1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDicX9MshnQvf1LN7fNCdBwQFn4+5JlxCGgupbeMUYs6gIgUEIIF8aJC0HZB2F+U8Qs5Go8MhMxwkgkMYSPXMBwSuU="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_2.6.2_1595949165557_0.1912264543359974"},"_hasShrinkwrap":false},"3.0.0-canary.5":{"name":"next-optimized-images","version":"3.0.0-canary.5","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.2.4","react-optimized-image":"^0.3.3"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- Gif optimization (gif images can normally be used, they just don't get optimized)\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"0a5d3100ec04f3b2654eabc0da755febfda5928b","_id":"next-optimized-images@3.0.0-canary.5","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-z9rtEVtdLtNTsdVayhKp2QhKWTzKgdXygps2KiHQUexY+Zj4pRVHa/QOUR0Tm4523EJn2QjeR5AdmNGSdFL9Dg==","shasum":"46c6375dfdd612707a6b55c848e440dc42d23c28","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.5.tgz","fileCount":5,"unpackedSize":28778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIEM2CRA9TVsSAnZWagAAJt0QAIBYMz8iys946xOQ2xO5\nuUoNsd/OUf9djgOqDTFe3FOkQs55+QD8Mm6ma5YLqfpBD7izzFWXx0/1O34F\nEQNA2u1ra1uMv66Xvj/dZKbIl8BkoVH/gbDwRMuGv5knvlEAhyyDEh9dHwbk\n/XPIT5IrjV0LqtKk4Wx8PQhWkJYBjPBQhQxMMGbDypHHOHPvL5CjWu6XFVyU\n1fOHrBaTU8w0ZNPfNRYwuhzsbtLpxzIQW7bcgNr9pEHWFKEUSlcD/zynUc8t\nWyESYiMNBsD2IT0DLmCT9MtrTTKdAelYVF7M2zeiuKLZTxNw4ZR28uO5Kop+\nOt7iw2uRYTs1p0NW9DYjLEyaw9juVZ9TNzn50MyX/AbNk7RPcCMustfTbZI4\n43Qmhx8I6OA6iOyz8eUPecodxHb/Dw9GEMZl19anTb9T2nf+djui4n7eTbPR\nbk3HwhvcrDvPwCt09rKNTz/8DqvBAUGLenp6MMh6fUfNLrcu4oX8Q24rdu+K\nCCQRu1F15NecMrU30FXlfmL2SgZo6RztE0eiZFRpqBfp3Tiobl4g+tMzoESn\nYiB/xdKmLFlp2NNhdzn/eV+RPJ/7KDWJ8JK0Qxc3wQ3JLBXyNFD5Y6mgDGcL\n227ZqxXS3uNZowomZV+xxAGDKOvWSpw5brPmxqTP6DlvPHJnqadluhQOZ21V\ny+yh\r\n=8NFL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1glLtExR7AYRb6aEoX6MZelrl41ve0L5E5A/g/wiO2AIgZX0Bvmc0XykxGz1B1N4+dF+wfAzt9x2+XkybR3PIDKI="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.5_1595949878155_0.020189106273219126"},"_hasShrinkwrap":false},"3.0.0-canary.6":{"name":"next-optimized-images","version":"3.0.0-canary.6","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.2.6","react-optimized-image":"^0.3.4"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- Gif optimization (gif images can normally be used, they just don't get optimized)\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. Additionally to the [default placeholders](https://github.com/webpack-contrib/file-loader#placeholders), `[width]` and `[height]` are also available. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"bc1268a7f14e29dd02c12ab8c34500d21ddc05e6","_id":"next-optimized-images@3.0.0-canary.6","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-7ydmfIdAndGjd/1X69rG1ItFK3jxyK2jTMvhCqETuo3xnpwcEdy7su+7XxNa+VSvPCAsCy4Mf7SNqHxxhG6j2g==","shasum":"d374cf0a5fe978a92685ca4c1e334793e3e0c5cb","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.6.tgz","fileCount":5,"unpackedSize":28928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIqGvCRA9TVsSAnZWagAAYBAP/RzxEbDeqQnrEmYKcoWY\nKFzDzMqI6UYQfvgzVgWzdgqYa4JoUla+LIA6jJhc2WK+AR3CnonmT3nwj8Fh\nrn1WPiEmn3UDYB1sYj+1tCXrKYAOUjLmP9S2SmuhGu6A4KQp8fEyO4vwXrzs\nt56djohH+cc/pl4qSMoRYfs/YiJEIwRvqELoB2nh/37dG/KXf6Qd0Z6crYlf\njo/zuuf6Afml5w0OZmynKtjbQI+2SRMXDinwcR68vjReeHE7Z0rXCs9ySF1Q\nSsbVZPUFov8s59Xe+76AOFZW0Pbhs9JGXwClMM2ipjKiZPCwtpWWUQi2aTx4\n7OyZSLBOY0I4x21v7DGEWZrBSEbKk8VSUEHPurcjyZuiG77VnKpTlWWh8a0v\n/gd4YEg5n9eqs4sQrMZcnlRxASv/T+46cteqkwGuK6PtnglcCVtmaM08CQrQ\nGYFikDEXKmE1RvsOPz75C9HLIJrB5XJZKTSBqvGHTtcCO9k7u6w43QpklUyg\ncOFaA6TmWZKt4gvTO02+uVBuh8k40XUuXUxeXIjWpweFYBZEB4Sr70rCJhpw\nA3eFbQXMzU61EsBJKmHgTBE10kqu3MIp099ca4T1zhEPW+QqB/efNFoONeOz\ndJaL2/Mh8Sml/f/urQdIc9vmNoyLI7iWT4tRDss/fpAcgd93/QgXU/5nirtg\nCqhS\r\n=pP+W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANRle1f9VAxtkrmFr1QgKMOcuyUpZ/E4CZJD8826ulCAiEAnHudfZLXTVCqIDjq/RjZBz3hdSAzXuzUuU86jhCQKyo="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.6_1596105135171_0.5238051632248986"},"_hasShrinkwrap":false},"3.0.0-canary.7":{"name":"next-optimized-images","version":"3.0.0-canary.7","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.3.0","react-optimized-image":"^0.3.4"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. Additionally to the [default placeholders](https://github.com/webpack-contrib/file-loader#placeholders), `[width]` and `[height]` are also available. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| gifsicle | | `GifsicleOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/gifsicle#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"7d317a601aa04c370d932bbd069e97e291ee8bcf","_id":"next-optimized-images@3.0.0-canary.7","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-j8Q988uRlfvlir6W7BOx9UyGWZLrJBuyZxuStkhLrTULEuMstNApij2imDFSLXlhi4FrRN50wETaXacVaeMvEA==","shasum":"63008ead8cf2f8729b2d02d02720782298eeed29","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.7.tgz","fileCount":5,"unpackedSize":29055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLpU3CRA9TVsSAnZWagAAVaIP/jqxO9rOzFNCPzuIEt5+\nq4xku+VaWxN9IWLMHW8cC++V9jrfqGmv1jaQlLeaF9ecXF/BadwrYkxQ186z\nEOmXHrrfpuLmrchRp1vvuspjYenJbEaxuuE66tnF6uOEC31WhQTWKLBM/6vS\nCkwttTDoXUAIBNb1d3RYbaVR/thNYQB2ZVoWqLDl29CetfM3PitSWEogm5yH\nCbZ2hkTVq5wOMSZYRQqjZ66nLyLX9tkijil7Q25Z5DLi0devlkJcOEhLAYFN\nljslpWkZCByY1/BjU7k/1kQYKVWdQihOcovM5KYnU/4QqByl8f0eEEAQQbce\n+zGpBOYBWBjfvb0NhPJcxTlM5nGEnY9aAnFFRAes96RZxb8IsGliVk/2pnFt\nug9epW2QAfGB7eSRZypxQSAZcclrFqxtrXNBz7wVFHqoFSi4ZmzwCQ8c6M5y\n6Gr1UFXTQI+i3I5h8Qc9UMPcM/meIRY8mrUTSoxvP7Edi+OBxWQXwRhJJPqJ\n89p/MsWIAEIwNEVJBwm0KAV9j9+9XgnhXHWwNOywz4yVTaKDD05kLaHO4bWR\nnZpqkGYlCA+uUvrHcCZ+AvvJyVpL2KcoMUxtv2tG+lUyt5BndgjBXXQe++VE\nqfulHf0KS2GmzKeoQjwBLVub+ExOHpcl04qfDH7IdZUU5JOGwXgCx5fhqbCz\n4RHN\r\n=3e8V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/QyxqFgBzWfVew9C8VHaH3bu1FM3CgoWuxJFA4FTG/AiEAwJLFAoCSVVL3a3Hsf0kvexY5039TSLKD0MQjkj76+Bk="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.7_1596888374617_0.10772670647437588"},"_hasShrinkwrap":false},"3.0.0-canary.8":{"name":"next-optimized-images","version":"3.0.0-canary.8","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"file-loader":"^6.0.0","optimized-images-loader":"^0.3.0","react-optimized-image":"^0.3.5"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. Additionally to the [default placeholders](https://github.com/webpack-contrib/file-loader#placeholders), `[width]` and `[height]` are also available. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| gifsicle | | `GifsicleOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/gifsicle#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"0bf799f50f12da497962f8f5a88d25604ab73ea5","_id":"next-optimized-images@3.0.0-canary.8","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-9iEgt7Q+F059lKxcHX0+4T20TyJtje8vixpWp0za9ToE1ZntH35zKs7+I1U+TTX5syD2bE9ZpH+5W1czYr2H2A==","shasum":"c0b3d86262891e47f345f010b292fed488860b0c","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.8.tgz","fileCount":5,"unpackedSize":29055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLppvCRA9TVsSAnZWagAAhnsP/ieMEl0VGS1Ze9k4M7Lv\n3ncE76/U4CZbnahyeNB55FXmGd9yK+pQBMB8KlslI1vT3TXGn95815+1jn2Z\nYF7Tpqpz5UmuCHKXFKj2SManVrwkN+jvUFYHnebw+j+WlnMv7SI544sblVg/\nUZSeYcCzsz2D08Hspf22mIVqvAxRLKvli+6JcNn6o+dOkc9A245IczStx7oz\n7vOWmQIwG/0x+8BlwX9SUJ6FR5/L/1y2jS5f0Tp1AoryOQ6EyWiDdiAroCy0\nLEaeTeeUGiXh00+DHgqXnkS38LbXja+zibucR7r9Vx2QVLhJ+VJPAfLloDzv\ndFsCztUjhMbAi8e4aqi2NnMyoO3j19BDw/31PSechoxVo0Pt/UfZ5x3+XYWe\njmUA55XnjSzq0apJ3AS9lvsW2rQhbaNRxUzAx9p8R1Gzjy0X2DD2xdhL+p/q\nwUoZTFFrky7/HXrp2GvFCG/szmmzzQVq2J3Lnqs2KNEahmHQVKbh/wiUsH2K\nuXYs4UU/j6mtpqOZ7gcRl6uAKGKCVmDOF7WJHDjJfrnf1whloHpz2K7WKLws\n9eu6HYajlCRllxYQK6oWb1UFm6CphwkN6fJ5Z3DJQVt0IhDVeK31YwOOi39S\njXqdUna+ZrSxIHsM0N+ww64rw+BPh8+JBuUglqdZ1wsTAXe4yPAP+iA466Aa\nicGt\r\n=/pdH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbvFhGz0E5nsGXkmzFA8ShW8I+sqcDav6fItBdzkesRAiAQLHdm5h3tx0yP7Hj/Q7lV2HXZpGt7tF8JC5ZDP/EukA=="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.8_1596889711508_0.2558127421625507"},"_hasShrinkwrap":false},"3.0.0-canary.9":{"name":"next-optimized-images","version":"3.0.0-canary.9","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"@svgr/core":"^5.4.0","file-loader":"^6.0.0","optimized-images-loader":"^0.4.0","react-optimized-image":"^0.4.0"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. Additionally to the [default placeholders](https://github.com/webpack-contrib/file-loader#placeholders), `[width]` and `[height]` are also available. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| gifsicle | | `GifsicleOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/gifsicle#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"f9f9e03e8a3410b9e1611e4f2f32f2feccb44ef8","_id":"next-optimized-images@3.0.0-canary.9","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-yj8XnH2qnctM65JllxdYeZ7To+3f+KefF6wnDjLYEpJQi48dNEKorr3We0ozvJ2VDpFPknrqb21WwJN162vknQ==","shasum":"74568777e4503e6ec29c190ddafed8b0c4decdb4","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.9.tgz","fileCount":5,"unpackedSize":29121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfL+F1CRA9TVsSAnZWagAAzPYP/29lYFnhlbS16bxfzxli\n3ZBjFep7F/mxsd7YqrhqauhRZdZnMW2YN+XFCd1VrDJinceXXIbHVJk4poxY\nCUBmGy+xVLInB8tCilQuVGX/6WgxIB0ofTuDxT2+T9ZNOwDUmLDeB64uti4Q\nUOdQRXzJ7L/biaxWoHKspMYt6Y7YtLW0ofZv0MYOnRTYsh2r1WCViAeed7Ee\nhK1XcLmUop6iP6YM8DnKNApf+LMvrSwcVTv9oWVTDttOcKJr6sI/ipK8iLUv\nX5uYXe8GbX4X8pHPmt479dOStD0qq6oHBm6a9S7yLnCrc1izx1Q0thjx6axS\njsU3Zw1RuHzZmTt6f1FGaKtZ/bSi9hlxPBUdNlW5jLzOoF5qwAN8Dywh+7sC\nC4ocsxoyqsKBNAneHQCTbkuXh9htn/1IzcRWSsCDkQO6h4jqzxhF5S2oFcEb\ndbOd1gG9UQXdQOwE6wMW4RGDamL3XNVYCqftJc+GBCnmJIVEUYFUBM5OfUCA\nFdHje4p4iyPrUBuq6rZpaNv/DSgdG+CA1CAHbpjod1iM+09zTljaFfllmKRa\nuGDTvcGmmYbD866dlYGcMM3sjO8/ZIIhMcC/gdUC3qVS+Bw9tls8u/HVxWH3\nWaiMDoSF0W7gFYqBk7L6n8Ik5yxnhVkIHvJFI1za3SaTQ9NcYScjhKikwSDb\nLLcJ\r\n=sxtf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPZXI8tB23dUmV7YU9Di5OU/G+Q0YGqnc95P/qlhI6NAIgN+kcyjAvVeRIo7shPN/94f3m/E+bUGU7IDqTacIciHU="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.9_1596973428777_0.8840345243961676"},"_hasShrinkwrap":false},"3.0.0-canary.10":{"name":"next-optimized-images","version":"3.0.0-canary.10","description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","license":"MIT","scripts":{"build":"npm run build:js && npm run build:types","build:js":"babel src --out-dir lib --delete-dir-on-start --extensions \".ts\"","build:types":"tsc --emitDeclarationOnly","lint":"tsc --noEmit && eslint . --ext .ts --ext .js","lint:fix":"npm run lint -- --fix","test":"jest","test:watch":"npm test -- --watch"},"dependencies":{"@svgr/core":"^5.4.0","file-loader":"^6.0.0","optimized-images-loader":"^0.4.0","react-optimized-image":"^0.4.1"},"devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-typescript":"^7.10.1","@types/jest":"^26.0.0","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","eslint":"^6.8.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","prettier":"^2.0.5","typescript":"^3.9.5"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"readme":"# :sunrise: next-optimized-images [![npm version](https://badgen.net/npm/v/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images) [![license](https://badgen.net/github/license/cyrilwanner/next-optimized-images)](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/next-optimized-images)](https://www.npmjs.com/package/next-optimized-images)\n\n:heavy_exclamation_mark: **Canary disclaimer** :heavy_exclamation_mark:\n\n> Any **feedback, ideas, bugs**, or anything else about this new version is very much appreciated, either in the [RFC issue](https://github.com/cyrilwanner/next-optimized-images/issues/120) or in a separate issue.\n\nThis is a canary version of `next-optimized-images`. If you want to use a non-canary version, please switch to the [master branch](https://github.com/cyrilwanner/next-optimized-images/tree/master).\n\nThis version is a complete rewrite and so has introduced breaking changes. If you want to update `next-optimized-images` in an existing project from version 2 to this canary version, please read the [upgrading guide](https://github.com/cyrilwanner/next-optimized-images/blob/canary/UPGRADING.md).\n\nCompared to version 2, the following features are *currently missing* in the canary version:\n\n- `?trace` query param\n- `?sprite` query param\n\nIf your project depends on them, you have to wait a little more, but those features will get added again soon.\n\nNew features compared to the current version which are already in the canary version:\n\n- **Image optimization is performed either in node or WebAssembly** - there is no need for imagemin plugins anymore and so no native binaries are required\n- **Build cache for images** - results in way faster builds and images are also optimized in the dev environment by default\n- **Image components** are provided for even easier use - there shouldn't be a need to use query params anymore normally (a babel plugin does that now for you)\n- [**images.config.js**](#imagesconfigjs) for global configuration and definition and re-use of image types and their options\n- **Full typescript support** thanks to the provided image components\n- Query params can be **chained** now - for example `?webp&width=400`\n- ...and more. Read this readme file for an overview of all features.\n\n---\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n  - [Query params](#query-params)\n- [Configuration](#configuration)\n  - [next.config.js](#nextconfigjs)\n  - [images.config.js](#imagesconfigjs)\n- [License](#license)\n\n## Installation\n\n```\nnpm install next-optimized-images@canary\n```\n\nRequirements:\n\n- Node >= 10\n- Next.js >= 9\n\nEnable the plugin in your Next.js configuration file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    /* config for next-optimized-images */\n  }],\n\n  // your other plugins here\n\n]);\n```\n\nAnd add the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\nIf you are using typescript, add the following line to your `next-env.d.ts` file:\n\n```typescript\n/// <reference types=\"optimized-images-loader\" />\n```\n\nSee the [configuration](#configuration) section for all available options.\n\nThe example above uses [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) for a cleaner API when using many plugins, see its readme for a more detailed example. `next-optimized-images` also works with the standard plugin api:\n\n```javascript\n// next.config.js\nconst withOptimizedImages = require('next-optimized-images');\n\nmodule.exports = withOptimizedImages({\n  /* config for next-optimized-images */\n\n  // your config for other plugins or the general next.js here...\n});\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* with import statement ..*/}\n    <Img src={MyImage} />\n\n    {/* ..or an inline require */}\n    <Img src={require('./images/my-small-image.png')} />\n  </div>\n);\n\n/**\n * Results in:\n *\n * <div>\n *   <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *   <img src=\"data:image/png;base64,...\" />\n * </div>\n */\n```\n\nIf you are using CSS modules, this package also detects images and optimized them in `url()` values in your css/sass/less files:\n\n```scss\n.Header {\n  background-image: url('./images/my-image.jpg');\n}\n```\n\nIf the file is below the [limit for inlining images](#nextconfigjs), the `require(...)` will return a base64 data-uri (`data:image/jpeg;base64,...`).\n\nOtherwise, `next-optimized-images` will copy your image into the static folder of next.js and the `require(...)` returns the path to your image in this case (`/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg`).\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n*Please note that all components need to be imported from the `react-optimized-image` package instead of `next-optimized-images`.*\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <>\n    <h1>Normal optimized image</h1>\n    <Img src={MyImage} />\n\n    <h1>Image will be resized to 400px width</h1>\n    <Img src={MyImage} sizes={[400]} />\n\n    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n    <Img src={MyImage} webp sizes={[400, 800]} />\n  </>\n);\n\n/**\n * Results in:\n *\n * <h1>Normal optimized image</h1>\n * <img src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" />\n *\n * <h1>Image will be resized to 400px width</h1>\n * <img src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" />\n *\n * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>\n * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>\n * <picture>\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\">\n *  <source type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\">\n *  <source type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\">\n *  <img src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"></picture>\n * </picture>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `<img>` tag will get generated, otherwise a `<picture>` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`<br>Specifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.<br>The breakpoints should have the same order as the image sizes.<br>Example for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```<br>For widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#imagesconfigjs). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `<img>` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `Svg` includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the [`Img`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () => (\n  <>\n    <h1>SVG will be directly included in the HTML</h1>\n    <Svg src={Icon} className=\"fill-red\" />\n  </>\n);\n\n/**\n * Results in:\n *\n * <span><svg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"><g><path>...</path></g></svg></span>\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `<svg>` tag. |\n\n### Query params\n\nAlthough it is suggested to use [image components](#image-components), query params directly within the import or require statement are also possible.\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `next-optimized-images` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `<picture>` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () => (\n  <div style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}>...</div>\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n> Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300&height=300';\n\nexport default () => (\n  <div>\n    <img src={Image} />\n    <img src={Thumbnail} />\n  </div>\n);\n```\n\n#### ?sprite\n\n> Currently not supported\n\nIf you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.\n\n```javascript\nimport React from 'react';\nimport MyIcon from './icons/my-icon.svg?sprite';\n\nexport default () => (\n  <div>\n    my page..\n    <MyIcon />\n  </div>\n);\n```\n\nTo also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://nextjs.org/docs/#custom-document) if you don't have this file yet):\n\n```javascript\n// ./pages/_document.js\nimport Document, { Head, Main, NextScript } from 'next/document';\nimport sprite from 'svg-sprite-loader/runtime/sprite.build';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    const spriteContent = sprite.stringify();\n\n    return {\n      spriteContent,\n      ...initialProps,\n    };\n  }\n\n  render() {\n    return (\n      <html>\n        <Head>{/* your head if needed */}</Head>\n        <body>\n          <div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    );\n  }\n}\n```\n\n## Configuration\n\nThis plugin uses [optimized-images-loader](https://www.npmjs.com/package/optimized-images-loader) under the hood which is based on mozjpeg, oxipng, svgo, gifsicle and sharp.\n\nThe default options for these optimizers should be enough in most cases, but you can overwrite every available option if you want to.\n\n### `next.config.js`\n\nAll options listed above must be provided within the `images` object in your config file:\n\n```javascript\n// next.config.js\nconst withPlugins = require('next-compose-plugins');\nconst optimizedImages = require('next-optimized-images');\n\nmodule.exports = withPlugins([\n  [optimizedImages, {\n    images: {\n      // for example\n      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif', 'ico']\n    }\n  }],\n]);\n```\n\nAvailable options:\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| handleImages | `['jpeg', 'png', 'svg', 'webp', 'gif']` | `string[]` | `next-optimized-images` registers the webpack loader for all these file types. If you don't want one of these handled by next-optimized-images simply remove it from the array. |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. Additionally to the [default placeholders](https://github.com/webpack-contrib/file-loader#placeholders), `[width]` and `[height]` are also available. |\n| outputPath | `'static/chunks/images/'` | `string` | Images will be saved in this directory within the `.next` folder. |\n| publicPath | `'/_next/static/chunks/images/'` | `string` | The public path that should be used for image URLs. This can be used to serve the optimized image from a cloud storage service like S3. From version 2 on, next-optimized-images uses the [`assetPrefx` config of next.js](https://nextjs.org/docs/#cdn-support-with-asset-prefix) by default, but you can overwrite it with `publicPath` specially for images. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| gifsicle | | `GifsicleOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/gifsicle#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n### `images.config.js`\n\nThis file contains default image optimization options and is located in the **root** of your project, next to the `next.config.js` file.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.<br>All properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record<string, ImgProps>` | Instead of specifying options for **all** images with the `default` key, you can create as many image `types` as you want. Those can also contain all properties of the [`Img`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\n> **Important**: When you make changes on this config file, you have to manually remove the `.next/cache` folder and restart next in order to see the changes. This issue will get resolved in the next canary version.\n\nThis will convert **all images** to WebP. The images with the `thumbnail` type will be generated in two sizes (200, 400) but not converted to WebP. If `webp: false` would not be present, it would get inherited from the `default` key.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () => (\n  <div>\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    <Img src={MyImage} />\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    <Img src={MyImage} type=\"thumbnail\" />\n  </div>\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/next-optimized-images/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","readmeFilename":"README.md","gitHead":"80c1c4d6b797c9646e2040545cf3cd44e495431d","_id":"next-optimized-images@3.0.0-canary.10","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Uca+ppFju1hz58s5ekFDgkNLLztRp6sTeUlNbIJKaz1TlPN8pzwcLcHDUiIkXcgxbjjfg185M9w5QXBoyk/FXA==","shasum":"5f1a38667974c867c9aa6c0f97a5cf0d831c5e46","tarball":"https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-3.0.0-canary.10.tgz","fileCount":5,"unpackedSize":29122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfL+LwCRA9TVsSAnZWagAAwc0P/0xwpz0VB590hFbhXXX1\nfX6zC+iReyFrgcL92O1PQ4ItrqnEwzM+LXMP9byLF4ZesAuZZfQzx329eMpE\nAUP7hkxxnUJk+ObDVhUyGaRjCNOvJnArV5nX+elvAVK2XO+PwTwuJtsYYhY4\n6ui6qm8Eh45eC9lhU4Uo0LpN45tojEPbOXXBQ10E3Vulmc1CRENTtrne1yOV\nyOQRRmfBt5OAqQyoqls0k72F1YbXr7Hzhv5rkdCjodZ3+iPuQWNCj9UKMffY\nyrFdpn/i2asICnOQs++eSRp7ig/tMgiYrDwCcpO4vHoCxAD/7XixY109Jkxa\nOLWr9u6sdqAgNYp4mkUwB2LpCfm2XASR1rnPLxamyfuZue+rZx3xPoY4n3qO\nw/NJecoyowlVwjUIn3W58ZgShTEA/HM8JNwnHH+8tCVWSKLPELtLHGevOA1O\net+8cgMNT9zQIjfKO4l+kOnBwi7Y/mlmqPrV33ZGEFMyo+VIgF4yN6pURL/h\nWbkefb/Kp81Z1xXPaeZUcoJa9eAw5df3CdQ10ykgmAwyLELo2DFygqyihAha\nFWKreaey0ioX0yHzwglf/XTvzGq+LNv6id6N6KNmXeYReWlx554I71xBOpqs\ngZ+GJYoo68OFOAT4YNgSmVaDx0rfG1VOU8a40T2cESC/vkM/RNJrYEdOy9Bh\n1Ayf\r\n=t4IV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdd4sbL+AyQOf/GjZzWzLzzfQoYJMZWy6srSMOiPt59AiEA5VrjKZtKD5JjU4X6adxy4nWG8YqD5JnTWL6n+MARefk="}]},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"_npmUser":{"name":"cyrilwanner","email":"info@cyr.li"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-optimized-images_3.0.0-canary.10_1596973807638_0.9623244030263463"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-12T21:33:02.652Z","1.0.0":"2018-03-12T21:33:02.702Z","modified":"2022-05-10T14:52:57.139Z","1.1.0":"2018-03-14T21:07:57.777Z","1.1.1":"2018-03-14T21:17:47.806Z","1.1.2":"2018-03-15T16:08:30.647Z","1.2.0":"2018-03-15T20:27:25.795Z","1.2.1":"2018-03-19T18:31:27.111Z","1.2.2":"2018-03-27T20:14:15.021Z","1.3.0":"2018-04-04T11:52:28.876Z","1.3.1":"2018-04-16T12:58:48.198Z","1.3.2":"2018-05-01T12:52:25.270Z","1.4.0":"2018-05-10T17:42:13.784Z","1.4.1":"2018-05-27T13:22:54.666Z","2.0.0-canary.0":"2018-11-24T13:13:23.502Z","2.0.0":"2018-12-02T21:09:17.350Z","2.0.1":"2018-12-02T21:15:39.692Z","1.4.2":"2018-12-05T19:12:56.350Z","2.0.2":"2018-12-05T19:13:25.121Z","2.1.0":"2018-12-12T18:37:03.103Z","2.2.0":"2018-12-16T11:00:07.718Z","2.2.1":"2018-12-16T11:06:39.079Z","2.3.0":"2018-12-18T16:04:35.336Z","2.3.1":"2018-12-20T19:27:38.146Z","2.3.2":"2019-01-10T19:09:40.555Z","2.3.3":"2019-01-10T19:27:15.624Z","2.4.0":"2019-03-10T19:46:59.438Z","2.4.1":"2019-04-22T15:38:05.638Z","2.5.0":"2019-04-27T12:53:41.691Z","2.5.1":"2019-05-27T15:48:48.568Z","2.5.2":"2019-06-23T17:28:51.416Z","2.5.3":"2019-06-24T16:23:13.240Z","2.5.4":"2019-11-01T14:05:41.635Z","2.5.5":"2020-02-22T12:30:20.779Z","2.5.6":"2020-04-01T10:43:36.561Z","2.5.7":"2020-04-02T09:30:23.719Z","2.5.8-canary.0":"2020-04-11T09:52:48.086Z","2.5.8-canary.1":"2020-04-11T14:45:12.941Z","2.5.8":"2020-04-14T11:51:35.848Z","2.6.0":"2020-04-24T16:04:32.325Z","2.6.1":"2020-05-31T15:31:26.430Z","3.0.0-canary.0":"2020-06-14T22:02:48.097Z","3.0.0-canary.1":"2020-07-22T10:50:48.822Z","3.0.0-canary.2":"2020-07-23T16:11:43.386Z","3.0.0-canary.3":"2020-07-27T22:03:28.539Z","3.0.0-canary.4":"2020-07-27T22:09:17.430Z","2.6.2":"2020-07-28T15:12:45.659Z","3.0.0-canary.5":"2020-07-28T15:24:38.312Z","3.0.0-canary.6":"2020-07-30T10:32:15.384Z","3.0.0-canary.7":"2020-08-08T12:06:14.731Z","3.0.0-canary.8":"2020-08-08T12:28:31.662Z","3.0.0-canary.9":"2020-08-09T11:43:48.879Z","3.0.0-canary.10":"2020-08-09T11:50:07.778Z"},"maintainers":[{"email":"info@cyr.li","name":"cyrilwanner"}],"description":"Automatically optimize images used in next.js projects (jpeg, png, gif, svg).","homepage":"https://github.com/cyrilwanner/next-optimized-images#readme","keywords":["nextjs","next","react","plugin","images","optimize","optimized-images"],"repository":{"type":"git","url":"git+https://github.com/cyrilwanner/next-optimized-images.git"},"author":{"name":"Cyril Wanner","email":"info@cyr.li"},"bugs":{"url":"https://github.com/cyrilwanner/next-optimized-images/issues"},"license":"MIT","readme":"","readmeFilename":""}