{"_id":"@aarongustafson/lazy-img","_rev":"9-ce01166b248acef13ec7e9e6f8c14f52","name":"@aarongustafson/lazy-img","dist-tags":{"latest":"2.1.0"},"versions":{"1.0.0":{"name":"@aarongustafson/lazy-img","version":"1.0.0","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/lazy-img@1.0.0","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/lazy-img#readme","bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"dist":{"shasum":"d3618be1c2bea14393cd5246476ce662d8a52609","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-1.0.0.tgz","fileCount":7,"integrity":"sha512-wPOqa20FnmPX3pXaTT9sO9F6sSsXG2EMH4iIKXHisgiCTTBJpbVPURNtfrAxVTODzWKfhWDxByvuqSGcsjbzKA==","signatures":[{"sig":"MEUCIQDd/VfXoMv4Z9DAm7+FZbX05kEo9vCa6qwoPT4kvGlmBwIgEAcgiSWo5GQ20WoKqHCtKiiLwBcOM4GwSSNkPWVyou8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20409},"main":"index.js","type":"module","module":"lazy-img.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"66c8f070f6c9676fc21098b201f7187b88190a40","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"aarongustafson","email":"aaron@easy-designs.net"},"repository":{"url":"git+https://github.com/aarongustafson/lazy-img.git","type":"git"},"_npmVersion":"10.8.2","description":"Custom element to lazy load an image based on screen size","directories":{},"_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/lazy-img_1.0.0_1764309252532_0.1642877851160307","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@aarongustafson/lazy-img","version":"1.1.0","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/lazy-img@1.1.0","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/lazy-img#readme","bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"dist":{"shasum":"1b75966a224a07ee6fe676ba4414bc312533a238","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-1.1.0.tgz","fileCount":7,"integrity":"sha512-nPyie2nEpjbpuvAVmAS2KWdXaurz4y0xgBDSlchgrwlsx0GmB/CPCC+FFk/1IW3xwSOeaSH0t7fRKiBppFmduQ==","signatures":[{"sig":"MEUCIAp31ZjrjuwfRpKUTYxzdoj8ZkOAIhv7r0to4Wsd1djcAiEAlmVuryaMj7/29KjjSIEUkEmq/FytOqudUMFulAUC/cM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37391},"main":"index.js","type":"module","module":"lazy-img.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"af4706d199e2f350fc4d50216ea5a7546c0bdc46","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"aarongustafson","email":"aaron@easy-designs.net"},"repository":{"url":"git+https://github.com/aarongustafson/lazy-img.git","type":"git"},"_npmVersion":"10.8.2","description":"Custom element to lazy load an image based on screen size","directories":{},"_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/lazy-img_1.1.0_1764347270323_0.24464332624965235","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@aarongustafson/lazy-img","version":"1.1.2","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/lazy-img@1.1.2","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/lazy-img#readme","bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"dist":{"shasum":"3e569f13cf05fd06276e664bd7b10a0240efbd6a","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-1.1.2.tgz","fileCount":7,"integrity":"sha512-YKy/kH+Bu8ceYwgIdad7kKLr9Hx/F3CpZ9Qy7+tnsOlmszBp8EytMjNmbsLqFSoS65fFn1/NDCFU9841VRu+AQ==","signatures":[{"sig":"MEUCIQDl7B++IsJtPdPkbjHkdFuuzg/tIX6Qf2ebrG3CCS/ZMQIgKxgUFmBjDfnIQQrZWzZpnwoTKlyeguQGNykVpsB/7lM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2flazy-img@1.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":37391},"main":"index.js","type":"module","module":"lazy-img.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"bd9b9cfa0e06597d9793dd70c0a80e339945a97f","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:26758d17-5006-4129-b811-dc070af0286c"}},"repository":{"url":"git+https://github.com/aarongustafson/lazy-img.git","type":"git"},"_npmVersion":"11.6.4","description":"Custom element to lazy load an image based on screen size","directories":{},"_nodeVersion":"20.19.5","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/lazy-img_1.1.2_1764439118345_0.2893100008509679","host":"s3://npm-registry-packages-npm-production"}},"1.1.3":{"name":"@aarongustafson/lazy-img","version":"1.1.3","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/lazy-img@1.1.3","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/lazy-img#readme","bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"dist":{"shasum":"76be7967ac6b89dec6e733a4c6907468b04a6f54","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-1.1.3.tgz","fileCount":7,"integrity":"sha512-L+i4xqjaw6K899+qDRYnenahAEwpdz8sVd5KTWwDBI+1JvVSvnoh24QpGTHEUjJWIAZGNWo0q4oAJFNNwdq/HA==","signatures":[{"sig":"MEQCIEmtd4R7UXStkfqzFoELVnUmMFl9xO5YG+75QIVoYzAJAiAW0LqmLx0H8PZnOhaG09rIJVNHQOesSJFls8CFfANwWg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2flazy-img@1.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":37727},"main":"index.js","type":"module","module":"lazy-img.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"f0a44c0a70cef37b0e3af25ae3b25e44871c2531","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:26758d17-5006-4129-b811-dc070af0286c"}},"repository":{"url":"git+https://github.com/aarongustafson/lazy-img.git","type":"git"},"_npmVersion":"11.6.4","description":"Custom element to lazy load an image based on screen size","directories":{},"_nodeVersion":"20.19.5","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/lazy-img_1.1.3_1764518817179_0.15662464561332046","host":"s3://npm-registry-packages-npm-production"}},"1.1.4":{"name":"@aarongustafson/lazy-img","version":"1.1.4","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/lazy-img@1.1.4","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/lazy-img#readme","bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"dist":{"shasum":"f77325267b504ddbc769210f422f3a20d01dd3b4","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-1.1.4.tgz","fileCount":7,"integrity":"sha512-IMmv7QpmcJFhBhndsRaGi8TSE7NlDsRuoetJA+6lc6hjyq18xCxPpcscgQlmJeC5TVXzbDxiIMm0/6Akg4O/eA==","signatures":[{"sig":"MEUCIAS6QJN4utYTpw5z2Cg4/yfQjxyAb/7oipbBXPPSbFuwAiEA8bVv3f7jx0LIruTqzJhOejXS0GeYdYXeW/ZciMjsmsM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2flazy-img@1.1.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":37773},"main":"index.js","type":"module","module":"lazy-img.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"f75987187a6307b4129912e874d1a4901c086063","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:26758d17-5006-4129-b811-dc070af0286c"}},"repository":{"url":"git+https://github.com/aarongustafson/lazy-img.git","type":"git"},"_npmVersion":"11.6.4","description":"Web component that enables you to lazy load an image based on screen size","directories":{},"_nodeVersion":"20.19.5","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/lazy-img_1.1.4_1764519141520_0.7019162637711398","host":"s3://npm-registry-packages-npm-production"}},"1.1.5":{"name":"@aarongustafson/lazy-img","version":"1.1.5","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/lazy-img@1.1.5","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/lazy-img#readme","bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"dist":{"shasum":"ecdf9f64ae548dc1e7b7e76c86fda631d29eb318","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-1.1.5.tgz","fileCount":7,"integrity":"sha512-E6vVaJbshVBxBM5SFRVBZAnJBoi127mNHogjuKKVJLNxgyyjEkGUJKZ2tvVQ1nICbo9QFqozIn6sucQo42d4Cw==","signatures":[{"sig":"MEUCIQDZZplixpPE9G7B0Z4qHvzJLp+2KZO6ymMiPl3Rj0TC/wIgQVTykUEAPiqYDQoTlMMdtpBHgB/Lj7bsTftWcVACrAg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2flazy-img@1.1.5","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":41309},"main":"index.js","type":"module","module":"lazy-img.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"1ec6d409f1ae3b3f311cab81e94e4a7c99993dd9","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:26758d17-5006-4129-b811-dc070af0286c"}},"repository":{"url":"git+https://github.com/aarongustafson/lazy-img.git","type":"git"},"_npmVersion":"11.6.4","description":"Web component that enables you to lazy load an image based on screen size","directories":{},"_nodeVersion":"20.19.5","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/lazy-img_1.1.5_1764519250904_0.2544669349985791","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@aarongustafson/lazy-img","version":"2.0.0","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/lazy-img@2.0.0","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/lazy-img#readme","bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"dist":{"shasum":"6f270a64d1d54f0d525999dad8e7305056952b97","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-2.0.0.tgz","fileCount":7,"integrity":"sha512-L8TY4Bre+2uzbwMfjvRgnrRNKL/ZQMjD2qCTAXdTHqO8/Hxg2R9uq7pytJLBYxo6SX7HKEZDNR/Btw17+RU00A==","signatures":[{"sig":"MEUCIQDBhfvYlrE9bw+HvuPYN/aCLp8FJdfXr1tzAf3ryhWiZgIgd2ahAaE5YQmKgzDrfmIvbjEv6X4/Hly05Z6Pafmi/CA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2flazy-img@2.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":41857},"main":"index.js","type":"module","module":"lazy-img.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"b504d18be47ee2450fb6ba14a785075898a8e942","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:26758d17-5006-4129-b811-dc070af0286c"}},"repository":{"url":"git+https://github.com/aarongustafson/lazy-img.git","type":"git"},"_npmVersion":"11.6.4","description":"Web component that enables you to lazy load an image based on screen size","directories":{},"_nodeVersion":"20.19.6","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/lazy-img_2.0.0_1765156815327_0.33392463922323734","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@aarongustafson/lazy-img","version":"2.0.1","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/lazy-img@2.0.1","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/lazy-img#readme","bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"dist":{"shasum":"399633f8edfa64763219a44b2cf2cd3b8383979a","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-2.0.1.tgz","fileCount":7,"integrity":"sha512-OwqORSNEONLC8aqrgLOB/DW5ya8hJVoddpqIKHBV7mgFODGOOZkU+04AOg6PpeWFmsIB5a5dE8Edb4NPMao86A==","signatures":[{"sig":"MEUCIGwg5aWCBq9qv6ZougIOsXt+9MWO3rrCLyRQSdSgvi1FAiEAjtrAqtNtFuVaFpk4+Os8MMdDcmBZoQRamfbR4YYqMIo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2flazy-img@2.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":41959},"main":"index.js","type":"module","module":"lazy-img.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"ae4f4c8770ef245c3c9c9fbb9b3c96fa98c17145","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","version":"node scripts/update-demo-versions.js && git add demo/esm.html","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:26758d17-5006-4129-b811-dc070af0286c"}},"repository":{"url":"git+https://github.com/aarongustafson/lazy-img.git","type":"git"},"_npmVersion":"11.6.4","description":"Web component that enables you to lazy load an image based on screen size","directories":{},"_nodeVersion":"20.19.6","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/lazy-img_2.0.1_1765309224231_0.6886709067810972","host":"s3://npm-registry-packages-npm-production"}},"2.1.0":{"name":"@aarongustafson/lazy-img","version":"2.1.0","description":"Web component that enables you to lazy load an image based on screen size","keywords":["html","custom element","web component"],"author":{"name":"Aaron Gustafson","email":"aaron@easy-designs.net","url":"https://www.aaron-gustafson.com/"},"license":"MIT","homepage":"https://github.com/aarongustafson/lazy-img#readme","repository":{"type":"git","url":"git+https://github.com/aarongustafson/lazy-img.git"},"bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"type":"module","main":"index.js","module":"lazy-img.js","customElements":"custom-elements.json","exports":{".":{"import":"./index.js"},"./lazy-img.js":{"import":"./lazy-img.js"},"./define.js":{"import":"./define.js"},"./custom-elements.json":"./custom-elements.json"},"engines":{"node":">=20.0.0"},"scripts":{"setup":"node scripts/setup.js","test":"vitest","test:ui":"vitest --ui","test:run":"vitest run","test:coverage":"vitest run --coverage","lint":"npm run lint:eslint && npm run lint:prettier","format":"npm run format:eslint && npm run format:prettier","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","version":"node scripts/update-demo-versions.js && git add demo/esm.html","postversion":"git push --follow-tags"},"devDependencies":{"@open-wc/eslint-config":"^13.0.0","@testing-library/dom":"^10.4.1","@testing-library/user-event":"^14.6.1","@vitest/coverage-v8":"^4.0.10","@vitest/ui":"^4.0.10","eslint":"^9.39.1","eslint-config-prettier":"^10.1.8","happy-dom":"^20.0.10","prettier":"^3.6.2","vitest":"^4.0.10"},"publishConfig":{"access":"public"},"gitHead":"d0ab782926787582e3d35170eea03d186f14429f","_id":"@aarongustafson/lazy-img@2.1.0","_nodeVersion":"20.19.6","_npmVersion":"11.7.0","dist":{"integrity":"sha512-jqODZ4vNoOoRIJruzdWOetKRjOhnrxLaven4yl4QnnGdiNSs1ELwp5U1PVUUOYCoBhLD3Dzkf+W15iYAwb3a5A==","shasum":"46d76a198a0be3205f2f60af5ab020cc2279ad5e","tarball":"https://registry.npmjs.org/@aarongustafson/lazy-img/-/lazy-img-2.1.0.tgz","fileCount":7,"unpackedSize":45280,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2flazy-img@2.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCID5H62lJadDZybwKoTcSdtZbsrr42i3neSAuFfdzb2x1AiATeiPt+bx0ybtrazNwBsp1RrJV5Dh1+1IvIKfTbAVZkA=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:26758d17-5006-4129-b811-dc070af0286c"}},"directories":{},"maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lazy-img_2.1.0_1765913745176_0.7043614311834243"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-28T05:54:12.414Z","modified":"2025-12-16T19:35:45.671Z","1.0.0":"2025-11-28T05:54:12.731Z","1.1.0":"2025-11-28T16:27:50.531Z","1.1.2":"2025-11-29T17:58:38.535Z","1.1.3":"2025-11-30T16:06:57.356Z","1.1.4":"2025-11-30T16:12:21.780Z","1.1.5":"2025-11-30T16:14:11.130Z","2.0.0":"2025-12-08T01:20:15.483Z","2.0.1":"2025-12-09T19:40:24.373Z","2.1.0":"2025-12-16T19:35:45.312Z"},"bugs":{"url":"https://github.com/aarongustafson/lazy-img/issues"},"author":{"name":"Aaron Gustafson","email":"aaron@easy-designs.net","url":"https://www.aaron-gustafson.com/"},"license":"MIT","homepage":"https://github.com/aarongustafson/lazy-img#readme","keywords":["html","custom element","web component"],"repository":{"type":"git","url":"git+https://github.com/aarongustafson/lazy-img.git"},"description":"Web component that enables you to lazy load an image based on screen size","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"readme":"# Lazy Img Web Component\n\n[![npm version](https://img.shields.io/npm/v/@aarongustafson/lazy-img.svg)](https://www.npmjs.com/package/@aarongustafson/lazy-img) [![Build Status](https://img.shields.io/github/actions/workflow/status/aarongustafson/lazy-img/ci.yml?branch=main)](https://github.com/aarongustafson/lazy-img/actions)\n\nA lightweight, flexible web component for lazy-loading images based on viewport or container size. Perfect for responsive images that should only load when needed.\n\nBased on the original [Easy Lazy Images](https://github.com/easy-designs/easy-lazy-images.js) by Aaron Gustafson, now reimagined as a modern Custom Element.\n\n## Demo\n\n[Live Demo](https://aarongustafson.github.io/lazy-img/demo/) ([Source](./demo/index.html))\n\n**CDN Demos:**\n- [unpkg](https://aarongustafson.github.io/lazy-img/demo/unpkg.html) ([Source](./demo/unpkg.html))\n- [esm.sh](https://aarongustafson.github.io/lazy-img/demo/esm.html) ([Source](./demo/esm.html))\n\n## Why Use This?\n\n**Performance Benefit:** Unlike `picture` or `srcset` which always load *some* image variant, `lazy-img` can **completely skip loading images** on screens or containers below your specified threshold. This saves bandwidth and improves performance for users on smaller devices or slower connections.\n\nFor example, if you set `min-inline-size=\"768\"`, mobile users will never download that image at all — saving their data and speeding up your page load.\n\n**Note on Resize Behavior:** Once an image is loaded, it remains loaded even if the viewport or container is resized below the threshold. This is intentional for performance — the component prevents unnecessary downloads, but doesn't unload images that are already in memory. Use the [`loaded` and `qualifies` attributes](#controlling-visibility-with-state-attributes) to control visibility with CSS if needed.\n\n## Features\n\n- **[Container Queries](#container-query-default)**: Load images based on container width (default)\n- **[Media Queries](#media-query)**: Load images based on viewport width\n- **[View-Based Loading](#view-mode-intersectionobserver)**: Load images when they enter the viewport using IntersectionObserver\n- **[Named Breakpoints](#named-breakpoints)**: Support for named breakpoints via CSS custom properties\n- **[Responsive Images](#responsive-images)**: Full support for `srcset` and `sizes`\n- **Throttled Resize**: Efficient resize handling to prevent performance issues\n## Installation\n\n### npm\n\n```bash\nnpm install @aarongustafson/lazy-img\n```\n\n### Import\n\n**Option 1: Manual registration**\n```javascript\nimport { LazyImgElement } from '@aarongustafson/lazy-img';\n\ncustomElements.define('lazy-img', LazyImgElement);\n```\n\n**Option 2: Auto-define (browser environments only)**\n```javascript\nimport '@aarongustafson/lazy-img/define.js';\n// Registers <lazy-img> when customElements is available\n```\n\nPrefer to control when registration happens? Call the helper directly:\n\n```javascript\nimport { defineLazyImg } from '@aarongustafson/lazy-img/define.js';\n\ndefineLazyImg();\n```\n\nYou can also include the guarded script from HTML:\n\n```html\n<script src=\"./node_modules/@aarongustafson/lazy-img/define.js\" type=\"module\"></script>\n```\n\n## Usage\n\n### Basic Example\n\n[View Demo](https://aarongustafson.github.io/lazy-img/demo/#basic-example)\n\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"A beautiful image\">\n</lazy-img>\n```\n\n### Container Query (Default)\n\n[View Demo](https://aarongustafson.github.io/lazy-img/demo/#container-query-example)\n\nLoad an image when its container reaches a minimum width:\n\n```html\n<lazy-img\n  src=\"large-image.jpg\"\n  alt=\"Large image\"\n  min-inline-size=\"500\">\n</lazy-img>\n```\n\nThe image will load when the `lazy-img` element's container reaches 500px width.\n\n### Media Query\n\n[View Demo](https://aarongustafson.github.io/lazy-img/demo/#media-query-example)\n\nLoad an image based on viewport width:\n\n```html\n<lazy-img\n  src=\"desktop-image.jpg\"\n  alt=\"Desktop image\"\n  min-inline-size=\"768\"\n  query=\"media\">\n</lazy-img>\n```\n\nThe image will load when the browser window is at least 768px wide.\n\n### View Mode (IntersectionObserver)\n\nLoad images when they scroll into view using IntersectionObserver:\n\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"Loads when scrolled into view\"\n  query=\"view\">\n</lazy-img>\n```\n\nThe image will load when it enters the viewport. The default behavior (`view-range-start=\"entry 0%\"`) loads as soon as any part of the image is visible.\n\n#### Control When Images Load\n\n**Load when 50% visible:**\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"Loads when half visible\"\n  query=\"view\"\n  view-range-start=\"entry 50%\">\n</lazy-img>\n```\n\n**Preload before entering viewport:**\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"Preloads 200px before visible\"\n  query=\"view\"\n  view-range-start=\"entry -200px\">\n</lazy-img>\n```\n\nThe `view-range-start` attribute uses scroll-driven animation syntax:\n- `\"entry X%\"` - Load when X% of the element is visible (e.g., `\"entry 25%\"` = 25% visible)\n- `\"entry -Xpx\"` - Preload X pixels before entering viewport (e.g., `\"entry -300px\"` = load 300px before visible)\n\n**Note:** Unlike container or media query modes, view mode doesn't use the `qualifies` attribute. Images load once when the intersection condition is met and remain loaded.\n\n### Responsive Images\n\n[View Demo](https://aarongustafson.github.io/lazy-img/demo/#responsive-images)\n\nUse `srcset` and `sizes` for responsive images:\n\n```html\n<lazy-img\n  src=\"image-800.jpg\"\n  srcset=\"image-400.jpg 400w,\n          image-800.jpg 800w,\n          image-1200.jpg 1200w\"\n  sizes=\"(max-width: 600px) 400px,\n         (max-width: 1000px) 800px,\n         1200px\"\n  alt=\"Responsive image\"\n  min-inline-size=\"400\">\n</lazy-img>\n```\n\n### Named Breakpoints\n\n[View Demo](https://aarongustafson.github.io/lazy-img/demo/#named-breakpoints)\n\nYou can use named breakpoints by defining the `--lazy-img-mq` CSS custom property:\n\n```css\n:root {\n  --lazy-img-mq: small;\n}\n\n@media (min-width: 768px) {\n  :root {\n    --lazy-img-mq: medium;\n  }\n}\n\n@media (min-width: 1024px) {\n  :root {\n    --lazy-img-mq: large;\n  }\n}\n```\n\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"Image with named breakpoints\"\n  named-breakpoints=\"medium, large\"\n  query=\"media\">\n</lazy-img>\n```\n\nThe image will load when the `--lazy-img-mq` custom property matches any of the specified breakpoint names.\n\n## API\n\n### Attributes\n\n#### Image Attributes\n\nThese attributes are passed through to the `<img>` element when loading conditions are met:\n\n| Attribute | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `src` | String | - | **Required.** The image source URL |\n| `alt` | String | `\"\"` | Alternative text for the image |\n| `srcset` | String | - | Responsive image source set |\n| `sizes` | String | - | Responsive image sizes |\n| `width` | String (Number) | - | Intrinsic width of the image (helps prevent layout shift) |\n| `height` | String (Number) | - | Intrinsic height of the image (helps prevent layout shift) |\n| `loading` | String | - | Native lazy loading hint: `\"lazy\"` or `\"eager\"` |\n| `decoding` | String | - | Image decoding hint: `\"async\"`, `\"sync\"`, or `\"auto\"` |\n| `fetchpriority` | String | - | Resource fetch priority: `\"high\"`, `\"low\"`, or `\"auto\"` |\n| `crossorigin` | String | - | CORS settings: `\"anonymous\"` or `\"use-credentials\"` |\n| `referrerpolicy` | String | - | Referrer policy for the image request |\n\n**Note:** The `<img>` element is only created in the shadow DOM when loading conditions are met (or immediately if no conditions are specified). These attributes are applied to the `<img>` at that time.\n\n#### Configuration Attributes\n\n| Attribute | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `min-inline-size` | String (Number) | - | Minimum inline size in pixels to load the image (ignored in view mode) |\n| `named-breakpoints` | String | - | Comma-separated list of named breakpoints (reads from `--lazy-img-mq` CSS custom property, ignored in view mode) |\n| `query` | String | `\"container\"` | Query type: `\"container\"`, `\"media\"`, or `\"view\"` |\n| `view-range-start` | String | `\"entry 0%\"` | When to load in view mode: `\"entry X%\"` for threshold or `\"entry -Xpx\"` for preload margin |\n\n#### State Attributes (read-only)\n\n| Attribute | Type | Description |\n|-----------|------|-------------|\n| `loaded` | Boolean | Reflects whether the image has been loaded |\n| `qualifies` | Boolean | Reflects whether element currently meets conditions to display (not used in view mode) |\n\n### Query Types\n\n- **`container`** (default): Uses ResizeObserver to watch the element's container size\n- **`media`**: Uses window resize events to watch viewport size\n- **`view`**: Uses IntersectionObserver to watch when element enters viewport\n\n### Events\n\n[View Demo](https://aarongustafson.github.io/lazy-img/demo/#events)\n\n| Event | Detail | Description |\n|-------|--------|-------------|\n| `lazy-img:loaded` | `{ src: string }` | Fired when the image has loaded |\n\n#### Event Example\n\n```javascript\nconst lazyImg = document.querySelector('lazy-img');\nlazyImg.addEventListener('lazy-img:loaded', (event) => {\n  console.log('Image loaded:', event.detail.src);\n});\n```\n\n### CSS Custom Properties\n\n| Property | Default | Description |\n|----------|---------|-------------|\n| `--lazy-img-display` | `block` | Display mode for the component |\n| `--lazy-img-mq` | - | Current named breakpoint identifier (define on `:root` with `@media` queries) |\n\n#### CSS Example\n\n```css\nlazy-img {\n  --lazy-img-display: inline-block;\n}\n\n/* Define named breakpoints */\n:root {\n  --lazy-img-mq: small;\n}\n\n@media (min-width: 768px) {\n  :root {\n    --lazy-img-mq: medium;\n  }\n}\n```\n\n## Examples\n\n### Preventing Layout Shift with Width and Height\n\n[Recommended for Core Web Vitals]\n\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"A beautiful image\"\n  width=\"800\"\n  height=\"600\"\n  min-inline-size=\"768\">\n</lazy-img>\n```\n\nThe `width` and `height` attributes help browsers calculate the aspect ratio and reserve space before the image loads, preventing Cumulative Layout Shift (CLS).\n\n### Using fetchpriority for LCP Images\n\n```html\n<lazy-img\n  src=\"hero-image.jpg\"\n  alt=\"Hero image\"\n  width=\"1200\"\n  height=\"600\"\n  fetchpriority=\"high\"\n  loading=\"eager\">\n</lazy-img>\n```\n\nUse `fetchpriority=\"high\"` for above-the-fold images that are critical for Largest Contentful Paint (LCP).\n\n### CORS Images for Canvas Manipulation\n\n```html\n<lazy-img\n  src=\"https://cdn.example.com/image.jpg\"\n  alt=\"CDN image\"\n  crossorigin=\"anonymous\"\n  min-inline-size=\"500\">\n</lazy-img>\n```\n\nThe `crossorigin` attribute is necessary when you need to manipulate images from different origins in a canvas.\n\n### Controlling Visibility with State Attributes\n\n[View Demo](https://aarongustafson.github.io/lazy-img/demo/#state-attributes)\n\nThe `loaded` and `qualifies` attributes allow you to control visibility based on current conditions:\n\n```css\n/* Hide images that loaded but no longer meet conditions (e.g., after rotation) */\nlazy-img[loaded]:not([qualifies]) {\n  display: none;\n}\n\n/* Show a placeholder for images that qualify but haven't loaded yet */\nlazy-img[qualifies]:not([loaded])::before {\n  content: \"Loading...\";\n  display: block;\n  padding: 2em;\n  background: #f0f0f0;\n  text-align: center;\n}\n\n/* Style images based on their qualification state */\nlazy-img[qualifies] {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n\nlazy-img:not([qualifies]) {\n  opacity: 0.5;\n}\n```\n\n\n### Progressive Image Loading in Containers\n\n```html\n<style>\n  .sidebar {\n    container-type: inline-size;\n  }\n</style>\n\n<div class=\"sidebar\">\n  <lazy-img\n    src=\"sidebar-image.jpg\"\n    alt=\"Sidebar content\"\n    min-inline-size=\"300\">\n  </lazy-img>\n</div>\n```\n\n### Art Direction with Named Breakpoints\n\n```css\n/* Define breakpoints in your CSS */\n:root { --lazy-img-mq: small; }\n@media (min-width: 768px) { :root { --lazy-img-mq: medium; } }\n@media (min-width: 1024px) { :root { --lazy-img-mq: large; } }\n@media (min-width: 1440px) { :root { --lazy-img-mq: xlarge; } }\n```\n\n```html\n<lazy-img\n  src=\"portrait.jpg\"\n  alt=\"Portrait orientation\"\n  named-breakpoints=\"small, medium\"\n  query=\"media\">\n</lazy-img>\n\n<lazy-img\n  src=\"landscape.jpg\"\n  alt=\"Landscape orientation\"\n  named-breakpoints=\"large, xlarge\"\n  query=\"media\">\n</lazy-img>\n```\n\n## Configuration Patterns\n\n### Immediate Loading (No Conditions)\n\nIf you don't specify `min-inline-size` or `named-breakpoints`, the image loads immediately:\n\n```html\n<lazy-img src=\"image.jpg\" alt=\"Loads immediately\"></lazy-img>\n```\n\n**Note:** While this pattern loads the image immediately (like a standard `img`), it still provides a performance benefit: **if JavaScript fails to load or execute, the image won't load at all**. This can be desirable for non-critical images that enhance but aren't essential to the content (e.g., decorative images, supplementary graphics, or marketing banners).\n\n**Important:** Only use this pattern for non-critical images that aren't referenced in your content. Critical images that are part of your content should use standard `img` tags to ensure they load even when JavaScript is unavailable.\n\n### Container-Based Loading (Default)\n\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"Container-based\"\n  min-inline-size=\"400\">\n</lazy-img>\n```\n\n### Viewport-Based Loading\n\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"Viewport-based\"\n  min-inline-size=\"768\"\n  query=\"media\">\n</lazy-img>\n```\n\n### Scroll-Based Loading\n\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"Scroll-based\"\n  query=\"view\"\n  view-range-start=\"entry -100px\">\n</lazy-img>\n```\n\n## Browser Support\n\nWorks in all modern browsers supporting:\n- Custom Elements v1\n- Shadow DOM v1\n- ResizeObserver (for container queries)\n- IntersectionObserver (for view mode)\n- ES Modules\n\nFor legacy browser support, consider polyfills for Custom Elements, ResizeObserver, and IntersectionObserver.\n\n## Migration from Easy Lazy Images\n\nIf you're migrating from the original Easy Lazy Images script:\n\n**Before:**\n```html\n<div data-image-src=\"image.jpg\"\n     data-image-alt=\"Alt text\"\n     data-image-srcset=\"image-400.jpg 400w, image-800.jpg 800w\">\n</div>\n\n<script>\n  window.easyLazyImages(500);\n</script>\n```\n\n**After:**\n```html\n<lazy-img\n  src=\"image.jpg\"\n  alt=\"Alt text\"\n  srcset=\"image-400.jpg 400w, image-800.jpg 800w\"\n  min-inline-size=\"500\"\n  query=\"media\">\n</lazy-img>\n```\n\nKey differences:\n- Uses a custom element instead of a global function\n- Configuration is per-element via attributes\n- Default query type is `container` (not `media`)\n- No longer requires `watchResize()` - uses ResizeObserver internally\n\n## Performance\n\n- **Throttled Resize**: Resize events are throttled to 150ms to prevent excessive checks\n- **Shared ResizeObserver**: Multiple `lazy-img` elements observing the same parent container share a single `ResizeObserver` instance, making it highly efficient for galleries and other scenarios with many images\n- **Shared Window Resize Listener**: Multiple `lazy-img` elements using media query mode (`query=\"media\"`) share a single window resize event listener, ensuring optimal performance even with hundreds of instances on a page\n- **Shared IntersectionObserver**: Multiple `lazy-img` elements using view mode with the same `view-range-start` configuration share a single `IntersectionObserver`, making scroll-based lazy loading extremely efficient even with hundreds of images\n- **Efficient Loading**: Images only render in the DOM after loading conditions are met\n- **Clean Disconnection**: Properly cleans up observers and event listeners when elements are removed; automatically removes unused shared observers and listeners when no longer needed\n\n## License\n\nMIT - See [LICENSE](LICENSE)\n\n## Contributing\n\nContributions welcome! See [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Author\n\nAaron Gustafson <aaron@easy-designs.net> (https://www.aaron-gustafson.com/)\n\n## Credits\n\nBased on my original [Easy Lazy Images](https://github.com/easy-designs/easy-lazy-images.js) concept, reimagined as a modern Custom Element.\n","readmeFilename":"README.md"}