{"_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","_rev":"8-5a6a817cdbd63ecb04618f072aa69ffb","name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","dist-tags":{"latest":"1.1.1"},"versions":{"0.1.0":{"name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","version":"0.1.0","keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"author":{"url":"https://www.danielbiegler.de","name":"Daniel Biegler"},"license":"MIT","_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading@0.1.0","maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"dist":{"shasum":"a0e3434c22665e3007eb3fd0c0d08bad1a0583ec","tarball":"https://registry.npmjs.org/@danielbiegler/vendure-plugin-blurry-image-lazy-loading/-/vendure-plugin-blurry-image-lazy-loading-0.1.0.tgz","fileCount":30,"integrity":"sha512-A5oQfBYq2kSWdXXuBRFi2yfAiuaMy/IV82whZ/Nr9KS5fsFTMFsL9vqa2G1Ds/VlwQeuv6WEDTZeaeqxyRWSqQ==","signatures":[{"sig":"MEQCICZlYokJ/DLxiHPaUs+3vKQi5mi/nCRSoWO/ZHOeW2SnAiBFnuzaKJbS7f5Kc4hnOvMJ+vWoYLHCzf4DB9Q8Fj7S/g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":357516},"main":"./dist/index.js","types":"./dist/index.d.ts","gitHead":"030b0faffe627c651a7d7616269dff3de783476f","private":false,"scripts":{"dev":"ts-node dev-server/index.ts","e2e":"cross-env PACKAGE=blurry-image-lazy-loading vitest -c ../../utils/e2e/vitest.config.mts","build":"rimraf dist && tsc -p ./tsconfig.build.json","codegen":"ts-node generate-types.ts"},"_npmUser":{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"},"repository":{"url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git","type":"git"},"_npmVersion":"10.2.3","description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"sharp":"0.33.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vendure-plugin-blurry-image-lazy-loading_0.1.0_1743005533227_0.3943012343382204","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","version":"0.1.1","keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"author":{"url":"https://www.danielbiegler.de","name":"Daniel Biegler"},"license":"MIT","_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading@0.1.1","maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"dist":{"shasum":"cac63de6d1f8b7d38809bb26f1d9b683401baaa3","tarball":"https://registry.npmjs.org/@danielbiegler/vendure-plugin-blurry-image-lazy-loading/-/vendure-plugin-blurry-image-lazy-loading-0.1.1.tgz","fileCount":30,"integrity":"sha512-uA0e8B2FUN1UFFi7XrWAPfHo+vduoQsrbTTitb5ePgtbCYqoGvtz/P2Oh5buwvTlgWOd6Tv3rER95LoIxiW2Dg==","signatures":[{"sig":"MEUCIDzcZNMWnVM2W2qW89YE1neY2i4Dwv3vqhCJbDw4gAggAiEAwPOjV2OLrmqXHL1AksAkvVxcBYztsg0u4R8WmVqXRaQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":358714},"main":"./dist/index.js","types":"./dist/index.d.ts","gitHead":"2040073b9568d75e0b06fc46d8ef3c55ccbdd71d","private":false,"scripts":{"dev":"ts-node dev-server/index.ts","e2e":"cross-env PACKAGE=blurry-image-lazy-loading vitest -c ../../utils/e2e/vitest.config.mts","build":"rimraf dist && tsc -p ./tsconfig.build.json","codegen":"ts-node generate-types.ts"},"_npmUser":{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"},"repository":{"url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git","type":"git"},"_npmVersion":"10.2.3","description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"sharp":"0.33.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vendure-plugin-blurry-image-lazy-loading_0.1.1_1743102380180_0.20412033732240098","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","version":"0.1.2","keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"author":{"url":"https://www.danielbiegler.de","name":"Daniel Biegler"},"license":"MIT","_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading@0.1.2","maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"dist":{"shasum":"24a5a720750a01d03b639ffb4f23de4780c96f2e","tarball":"https://registry.npmjs.org/@danielbiegler/vendure-plugin-blurry-image-lazy-loading/-/vendure-plugin-blurry-image-lazy-loading-0.1.2.tgz","fileCount":30,"integrity":"sha512-u/XgPODeWmFhykOdadDtrgOV42UPwv7iwTJWHmBzeykmosaWK+07mQTPAjs9PMGgRIBpOD/A7lUZE1rdYCnGKQ==","signatures":[{"sig":"MEYCIQCRrozPQyyLZjsMUSmBdGRzXCR7MLbAIBBSTq7s1ZrO0wIhAJVpbsDnoW+k2bY5WZ+E2kA3bcGpkr529uUfjUhYd/QP","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":358731},"main":"./dist/index.js","types":"./dist/index.d.ts","gitHead":"4a0d858fc5b06013c249c36c104d91d02c9c9bbd","private":false,"scripts":{"dev":"ts-node dev-server/index.ts","e2e":"cross-env PACKAGE=blurry-image-lazy-loading vitest -c ../../utils/e2e/vitest.config.mts","build":"rimraf dist && tsc -p ./tsconfig.build.json","codegen":"ts-node generate-types.ts"},"_npmUser":{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"},"repository":{"url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git","type":"git"},"_npmVersion":"10.2.3","description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"sharp":"0.33.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vendure-plugin-blurry-image-lazy-loading_0.1.2_1743144935876_0.8440347828945627","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","version":"0.1.3","keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"author":{"url":"https://www.danielbiegler.de","name":"Daniel Biegler"},"license":"MIT","_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading@0.1.3","maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"dist":{"shasum":"018910ba57d14fc9d8679ccc7cf9622c11008c05","tarball":"https://registry.npmjs.org/@danielbiegler/vendure-plugin-blurry-image-lazy-loading/-/vendure-plugin-blurry-image-lazy-loading-0.1.3.tgz","fileCount":30,"integrity":"sha512-9Om0PTPoS9lXdJW68XigLZKMsJUnIOGzMiMpccGUipSw/H66lN4CtbLM5CZJvtj9+wKZCdQHZ2sXM0ujYTpHhA==","signatures":[{"sig":"MEUCIGxuEeYVKhBoUQWNiLg85b44sPYJqrtirxpBubdYDc9dAiEAkd9GQnQau7B7BRIoTbl7xzyjGPuCf+l+bZMpyzV3njQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":358843},"main":"./dist/index.js","types":"./dist/index.d.ts","gitHead":"9de8494eaaaabd5dc2cf0f71c249e450d31de385","private":false,"scripts":{"dev":"ts-node dev-server/index.ts","e2e":"cross-env PACKAGE=blurry-image-lazy-loading vitest -c ../../utils/e2e/vitest.config.mts","build":"rimraf dist && tsc -p ./tsconfig.build.json","codegen":"ts-node generate-types.ts"},"_npmUser":{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"},"repository":{"url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git","type":"git"},"_npmVersion":"10.2.3","description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"sharp":"0.33.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vendure-plugin-blurry-image-lazy-loading_0.1.3_1743145531376_0.06379698002028822","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","version":"1.0.0","keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"author":{"url":"https://www.danielbiegler.de","name":"Daniel Biegler"},"license":"MIT","_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading@1.0.0","maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"dist":{"shasum":"c16d866603b7994133015cd4558c2a33ec169392","tarball":"https://registry.npmjs.org/@danielbiegler/vendure-plugin-blurry-image-lazy-loading/-/vendure-plugin-blurry-image-lazy-loading-1.0.0.tgz","fileCount":30,"integrity":"sha512-6EOuyT6rZryYp3/SyOQg1jClNlGBmjhxLIn9z9XP9TodKEQKKZFFvpsrj5DzM0Z98rMABHPBUkIcnFG9eCfVKw==","signatures":[{"sig":"MEUCIQCZ3SwWmHBr+0SmG8O50p7TE60pDAXt9m5wnakXdJgFzQIgDdOdDuldqhbv4pq3ksoqlinx1XDprsq2MXa6Lkmqf0Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":365007},"main":"./dist/index.js","types":"./dist/index.d.ts","gitHead":"5241da134709a596ed5787fc9f9903bd69d01b24","private":false,"scripts":{"dev":"ts-node dev-server/index.ts","e2e":"cross-env PACKAGE=blurry-image-lazy-loading vitest -c ../../utils/e2e/vitest.config.mts","build":"rimraf dist && tsc -p ./tsconfig.build.json","codegen":"ts-node generate-types.ts"},"_npmUser":{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"},"repository":{"url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git","type":"git"},"_npmVersion":"10.2.3","description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"sharp":"0.33.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vendure-plugin-blurry-image-lazy-loading_1.0.0_1743156632543_0.2127977119166713","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","version":"1.0.1","keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"author":{"url":"https://www.danielbiegler.de","name":"Daniel Biegler"},"license":"MIT","_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading@1.0.1","maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"dist":{"shasum":"0d80101889d9b17a9181c531eb12956c117afa29","tarball":"https://registry.npmjs.org/@danielbiegler/vendure-plugin-blurry-image-lazy-loading/-/vendure-plugin-blurry-image-lazy-loading-1.0.1.tgz","fileCount":30,"integrity":"sha512-SYLDxg91yjLyXtoFAZQsthT8jprQ+GVWJiH9UUjED3LVprih37142oN3mzcEstL+kkhKYocxDxG8a1GJh5NLxA==","signatures":[{"sig":"MEUCIQDUpU2ym9mhQoELZuCDDqk+7/yFsVJLJfHSec8XwCuI4gIgGxa0tjAMEXW5DbnZh/nl1BvAkp0M/W+wKPJscHDm1VU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":366425},"main":"./dist/index.js","types":"./dist/index.d.ts","gitHead":"b4c0e7042db3c713c43396e8d09294ea01df7ae7","private":false,"scripts":{"dev":"ts-node dev-server/index.ts","e2e":"cross-env PACKAGE=blurry-image-lazy-loading vitest -c ../../utils/e2e/vitest.config.mts","build":"rimraf dist && tsc -p ./tsconfig.build.json","codegen":"ts-node generate-types.ts"},"_npmUser":{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"},"repository":{"url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git","type":"git"},"_npmVersion":"10.2.3","description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"sharp":"0.33.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vendure-plugin-blurry-image-lazy-loading_1.0.1_1743608759669_0.3352068348021311","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","version":"1.1.0","keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"author":{"url":"https://www.danielbiegler.de","name":"Daniel Biegler"},"license":"MIT","_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading@1.1.0","maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"dist":{"shasum":"a75a6e1ce8c257a0618c41f41759941d77597871","tarball":"https://registry.npmjs.org/@danielbiegler/vendure-plugin-blurry-image-lazy-loading/-/vendure-plugin-blurry-image-lazy-loading-1.1.0.tgz","fileCount":30,"integrity":"sha512-EwNAT6Bzn4/B30A/h3wyUqHwnDtnPPt1hGBQjMs+1WXCjF+ult32WjfUJsl65ULGaypkxv4DwbVUzbRLG/nBvw==","signatures":[{"sig":"MEYCIQCT9aBveNbHm6qkAJopUGv0bjpUXxXXG9jHQcAgjIixzgIhAPSZAPU7s+fYXxMoL2H6boPEkUPDlPaSNsC+FajlbWXN","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":374390},"main":"./dist/index.js","types":"./dist/index.d.ts","gitHead":"eaff22c911f57ab6884344c818bf09ef6330b7f2","private":false,"scripts":{"dev":"ts-node dev-server/index.ts","e2e":"cross-env PACKAGE=blurry-image-lazy-loading vitest -c ../../utils/e2e/vitest.config.mts","build":"rimraf dist && tsc -p ./tsconfig.build.json","codegen":"ts-node generate-types.ts"},"_npmUser":{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"},"repository":{"url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git","type":"git"},"_npmVersion":"10.9.2","description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"sharp":"0.33.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vendure-plugin-blurry-image-lazy-loading_1.1.0_1749635755277_0.9876939284247619","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading","description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","version":"1.1.1","license":"MIT","scripts":{"dev":"ts-node dev-server/index.ts","codegen":"ts-node generate-types.ts","build":"rimraf dist && tsc -p ./tsconfig.build.json","e2e":"cross-env PACKAGE=blurry-image-lazy-loading vitest -c ../../utils/e2e/vitest.config.mts"},"dependencies":{"sharp":"0.33.5"},"author":{"name":"Daniel Biegler","url":"https://www.danielbiegler.de"},"repository":{"type":"git","url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git"},"keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"private":false,"publishConfig":{"access":"public"},"main":"./dist/index.js","types":"./dist/index.d.ts","_id":"@danielbiegler/vendure-plugin-blurry-image-lazy-loading@1.1.1","gitHead":"ad61111dad1f6e0142194fb97db88e01be3b0134","bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-SXfHEDw2NJXL6/t8v0nZjFGMY2499GX+ZQtVzckXIcyBLbkpOsKxUlBvsb9m0cyZK0r3IWj8paY+Z3oj2bGtOQ==","shasum":"7770c59b6c8249fcf96b37d0eae5a0f7da2ae862","tarball":"https://registry.npmjs.org/@danielbiegler/vendure-plugin-blurry-image-lazy-loading/-/vendure-plugin-blurry-image-lazy-loading-1.1.1.tgz","fileCount":30,"unpackedSize":375284,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB8p8Sjm1xTjUKpK9SDhAENwxabLG1Wb64WwqkDfFOclAiAcRvcD4lGXls5lUnFDgg+ON7TmhEkAIEFGApBxOcxf0w=="}]},"_npmUser":{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"},"directories":{},"maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vendure-plugin-blurry-image-lazy-loading_1.1.1_1756543440214_0.20436516283937212"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-26T16:12:13.157Z","modified":"2025-08-30T08:44:00.578Z","0.1.0":"2025-03-26T16:12:13.407Z","0.1.1":"2025-03-27T19:06:20.443Z","0.1.2":"2025-03-28T06:55:36.084Z","0.1.3":"2025-03-28T07:05:31.582Z","1.0.0":"2025-03-28T10:10:32.787Z","1.0.1":"2025-04-02T15:45:59.921Z","1.1.0":"2025-06-11T09:55:55.459Z","1.1.1":"2025-08-30T08:44:00.410Z"},"bugs":{"url":"https://github.com/DanielBiegler/bieglers-vendure-plugins/issues"},"author":{"name":"Daniel Biegler","url":"https://www.danielbiegler.de"},"license":"MIT","homepage":"https://github.com/DanielBiegler/bieglers-vendure-plugins#readme","keywords":["vendure","plugin","vendure-plugin","ecommerce","headless","graphql","typescript"],"repository":{"type":"git","url":"git+https://github.com/DanielBiegler/bieglers-vendure-plugins.git"},"description":"Generates image hashes for displaying blurry previews when loading images on the frontend.","maintainers":[{"name":"danielbiegler","email":"danielbiegler.de@gmail.com"}],"readme":"![Banner Image](https://raw.githubusercontent.com/DanielBiegler/bieglers-vendure-plugins/master/packages/blurry-image-lazy-loading/assets/thumbnail_16x9.jpeg)\n\n# Vendure Plugin: Blurry Image Lazy Loading\n\nGenerates image hashes for displaying blurry previews when loading images on the frontend.\n\n<a href=\"https://www.npmjs.com/package/@danielbiegler/vendure-plugin-blurry-image-lazy-loading\" target=\"_blank\">\n  <img src=\"https://badge.fury.io/js/@danielbiegler%2Fvendure-plugin-blurry-image-lazy-loading.svg\" alt=\"npm version badge\" height=\"18\">\n</a>\n\n## Features\n\n- CustomField on `Asset` Entities containing a hash for your frontend.\n- Automatic creation of hashes for new assets via event bus.\n- Synchronous creation of hashes for direct consumption.\n- Asynchronous creation of hashes via dedicated job queue.\n- Out of the box comes with two different hashing strategies and can be extended if need be via a custom `PreviewImageHashStrategy`.\n  - `ThumbHash` ([Reference](https://github.com/evanw/thumbhash))\n  - `BlurHash` ([Reference](https://github.com/woltapp/blurhash))\n- Suite of end-to-end tests ensuring correctness.\n\n### End-To-End Tests\n\n```\n ✓ blurry-image-lazy-loading/e2e/thumbhash.e2e-spec.ts (8 tests)\n ✓ blurry-image-lazy-loading/e2e/blurhash.e2e-spec.ts (8 tests)\n ✓ blurry-image-lazy-loading/e2e/common.e2e-spec.ts (14 tests)\n\n Test Files  3 passed (3)\n      Tests  30 passed (30)\n```\n\n## Example comparisons\n\nThe [ThumbHash Website](https://evanw.github.io/thumbhash/) has an interactive online comparison generator.\n\n![size-comparison-banner.png](https://github.com/DanielBiegler/bieglers-vendure-plugins/raw/master/packages/blurry-image-lazy-loading/assets/size-comparison-banner.png)\n\n![size-comparison-camera.png](https://github.com/DanielBiegler/bieglers-vendure-plugins/raw/master/packages/blurry-image-lazy-loading/assets/size-comparison-camera.png)\n\n![size-comparison-lipstick.png](https://github.com/DanielBiegler/bieglers-vendure-plugins/raw/master/packages/blurry-image-lazy-loading/assets/size-comparison-lipstick.png)\n\n![size-comparison-opera.png](https://github.com/DanielBiegler/bieglers-vendure-plugins/raw/master/packages/blurry-image-lazy-loading/assets/size-comparison-opera.png)\n\n## How To: Usage\n\nThe plugin adds a couple ways to generate hashes for you to the admin api endpoint.\nYour admin-client needs the `CreateAsset` Vendure permission in order to call the following mutations. See [resolver](https://github.com/DanielBiegler/bieglers-vendure-plugins/blob/master/packages/blurry-image-lazy-loading/src/api/admin.resolver.ts).\n\n```gql\nextend type Mutation {\n  \"\"\"\n  Create a preview image hash for one image.\n  \"\"\"\n  pluginPreviewImageHashCreateImageHash(\n    input: PluginPreviewImageHashCreateInput!\n  ): PluginPreviewImageHashCreateResult!\n\n  \"\"\"\n  Create preview image hashes for a product.\n  This includes both the product itself and all of its ProductVariant assets.\n  \"\"\"\n  pluginPreviewImageHashCreateImageHashesForProduct(\n    input: PluginPreviewImageHashForProductInput!\n  ): PluginPreviewImageHashResult!\n\n  \"\"\"\n  Create preview image hashes for an entire collection.\n  This includes the collection, the contained Product-assets and related ProductVariant-assets.\n\n  Due to how large collections can become, you may want to disable the deduplication of asset ids.\n  If deduplication is enabled, jobs will be created only after gathering all assets first.\n  If disabled, jobs will be created as the assets are being read.\n\n  No deduplication may result in assets being hashed multiple times, but the tradeoff is not having\n  to hold potentially millions of records in memory and just letting the worker take care of them eventually.\n  \"\"\"\n  pluginPreviewImageHashCreateImageHashesForCollection(\n    input: PluginPreviewImageHashForCollectionInput!\n  ): PluginPreviewImageHashResult!\n\n  \"\"\"\n  Create preview image hashes for all assets.\n  \n  This mutation should be handled with extra care since an installation may hold hundreds of thousands of images.\n  This is mainly useful as a one-time-use utility to initialize all of the assets with hashes after installing the plugin.\n  \"\"\"\n  pluginPreviewImageHashCreateImageHashesForAllAssets(\n    input: PluginPreviewImageHashForAllAssetsInput\n  ): PluginPreviewImageHashResult!\n}\n```\n\nSee [api-extensions.ts](https://github.com/DanielBiegler/bieglers-vendure-plugins/blob/master/packages/blurry-image-lazy-loading/src/api/api-extensions.ts) for a complete overview of the graphql extensions and types.\n\n### 1. Add the plugin to your Vendure Config\n\nYou can find the package over on [npm](https://www.npmjs.com/package/@danielbiegler/vendure-plugin-blurry-image-lazy-loading) and install it via:\n\n```bash\nnpm i @danielbiegler/vendure-plugin-blurry-image-lazy-loading\n```\n\nThe simplest way is relying on the defaults and just adding the plugin with a hashing strategy.\n\n```ts\nimport { PreviewImageHashPlugin, ThumbHashStrategy } from \"@danielbiegler/vendure-plugin-blurry-image-lazy-loading\";\nexport const config: VendureConfig = {\n  // ...\n  plugins: [\n    PreviewImageHashPlugin.init({\n      hashingStrategy: new ThumbHashStrategy(), // Recommended\n    }),\n  ],\n}\n```\n\nIt's possible to pass in further configurations into both the plugin and the strategies, for example:\n\n```ts\nPreviewImageHashPlugin.init({\n  enqueueHashingAfterAssetCreation: false,\n  hashingStrategy: new ThumbHashStrategy({\n    encoding: \"hex\",\n    resizeOptions: {\n      width: 32,\n      fit: \"contain\"\n    }\n  }),\n})\n```\n\nPlease refer to the specific [docs](https://github.com/DanielBiegler/bieglers-vendure-plugins/blob/master/packages/blurry-image-lazy-loading/src/types.ts) for how and what you can customize.\n\n### 2. Generate a database migration\n\nThis plugin adds a custom field to the `Asset` entity called `previewImageHash`, which requires you to generate a database migration. See Vendure's [migration documentation](https://docs.vendure.io/guides/developer-guide/migrations/) for further guidance.\n\n### 3. Generate hashes\n\nBy default the option `enqueueHashingAfterAssetCreation` automatically adds hashing tasks to the dedicated job queue for newly added assets.\n\nFor existing assets you can produce hashes either synchronously or via the job queue, of which the latter is recommended for production environments, via the admin API:\n\n```graphql\nmutation {\n  pluginPreviewImageHashCreateImageHash(\n    input: {\n      idAsset: \"example123\",\n      runSynchronously: true,  # False by default\n    }\n  ) {\n    # When running asynchronously you get a short status response.\n    ... on PluginPreviewImageHashResult {\n      code\n      jobsAddedToQueue\n      assetsSkipped\n      message\n    }\n\n    # When running synchronously, you get the Asset directly.\n    # This is useful for scripts.\n    ... on Asset {\n      id\n      name\n      customFields {\n        previewImageHash\n      }\n    }\n  }\n}\n```\n\n### 4. Consume the hashes in your frontend\n\nNow that your assets have hashes you may consume them on your frontend. How and where you consume them exactly is dependent on your setup, but in general it involves the following steps.\n\n1. Retrieve assets, for example:\n\n```graphql\nquery {\n  collection(slug: \"example\") {\n    productVariants(options: { take: 10 }) {\n      items {\n        name\n        featuredAsset {\n          preview\n          width\n          height\n          customFields {\n            previewImageHash\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n2. For example with the `ThumbHashStrategy` and its `BufferEncoding` set to the default `\"base64\"` you can now decode the hashes with the [provided helper](https://github.com/DanielBiegler/bieglers-vendure-plugins/blob/master/packages/blurry-image-lazy-loading/src/vendors/thumbhash.ts#L374-L384) like so:\n\n```ts\n// Node\nconst buffer = Buffer.from(previewImagehash, \"base64\");\nconst dataUrl = thumbHashToDataURL(buffer);\n```\n\n```ts\n// Browser\n// Warning: `atob` can throw! You should make a proper helper method with error handling. Skipping that here for brevity.\nconst buffer = Uint8Array.from(atob(previewImagehash), (v) => v.charCodeAt(0));\nconst dataUrl = thumbHashToDataURL(buffer);\n```\n\n3. Use the result in your frontend. There are some environment specific implementation details, so we'll use an imaginary react component here for brevity.\n\n```jsx\n<MyCustomImgComponent\n  previewSrc={dataUrl}\n  src={asset.preview}\n  width={asset.width}\n  height={asset.height}\n/>\n```\n\n## Practical Guides and Resources\n\n### Guides\n\n- [Implementing Low-Quality Image Placeholders (LQIP) in Astro](https://pinelab.studio/blog/implementing-low-quality-image-placeholders-lqip-in-astro/), by Martijn from Pinelab Studio\n\n### Resources\n\n- [React Lazy Load Image Component](https://github.com/Aljullu/react-lazy-load-image-component/), a popular solution for lazy loading comfortably in React projects\n\n---\n\n#### Credits\n\n- Original Banner Photo by [Ray Piedra](https://www.pexels.com/@craytive/) from [Pexels](https://www.pexels.com/photo/beauty-product-in-pink-color-2720447/), edited by [Daniel Biegler](https://www.danielbiegler.de/)\n- Lipstick Photo by [Suzy Hazelwood](https://www.pexels.com/@suzyhazelwood/) from [Pexels](https://www.pexels.com/photo/close-up-photo-of-pink-lipstick-and-blush-on-2533266/)\n- Camera Photo by [Math](https://www.pexels.com/@madebymath/) from [Pexels](https://www.pexels.com/photo/black-fujifilm-dslr-camera-90946/)\n","readmeFilename":"README.md"}