{"_id":"@aleafrodo/progressive-image-component","_rev":"2-fe349a58bb0396e64bd44c3f257f2cbd","name":"@aleafrodo/progressive-image-component","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aleafrodo/progressive-image-component","version":"1.0.0","keywords":["react","image","progressive-image","lazy-load","avif"],"author":{"name":"Alexander Bell"},"license":"MIT","_id":"@aleafrodo/progressive-image-component@1.0.0","maintainers":[{"name":"aleafrodo","email":"nw1oatcf@alexbell.email"}],"homepage":"https://git.alexbell.de/aleabodo/progressive-image-component","bugs":{"url":"https://git.alexbell.de/aleabodo/progressive-image-component/issues"},"dist":{"shasum":"b86309d1b3f824f051692b68d10320cd4a1fbb38","tarball":"https://registry.npmjs.org/@aleafrodo/progressive-image-component/-/progressive-image-component-1.0.0.tgz","fileCount":8,"integrity":"sha512-XrWYDwVbGDL7LOmlPN7+B64OzWt7HyKK+VKDorjJ1J9qKC6TYQnFFQJ8QRY/016M1CqxMzPqbb/4xCjOaPfCwQ==","signatures":[{"sig":"MEUCIBVoSE3ZeyTf63pIdR3PMhXpCExMkY6OghdM7Rd8zkAuAiEA/oIq7bOAtIQBM2L+pzI2Zo4TpZ/dNSbi3RVRJGYgh9A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28190},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"c59f2d814272a7401ac2faede31f3887aa88c4ae","scripts":{"dev":"vite","build":"vite build && tsc -p tsconfig.build.json","prepare":"npm run build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"aleafrodo","email":"nw1oatcf@alexbell.email"},"repository":{"url":"git+https://git.alexbell.de/aleabodo/progressive-image-component.git","type":"git"},"_npmVersion":"11.12.1","description":"A React progressive image component with AVIF srcset, lazy loading, and blurred placeholder.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.9.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.2","vite":"^7.0.6","typescript":"^5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitejs/plugin-react":"^5.0.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/progressive-image-component_1.0.0_1775802850428_0.15570166565707733","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aleafrodo/progressive-image-component","version":"1.0.1","description":"A React progressive image component with AVIF srcset, lazy loading, and blurred placeholder.","keywords":["react","image","progressive-image","lazy-load","avif"],"homepage":"https://git.alexbell.de/aleabodo/progressive-image-component","repository":{"type":"git","url":"git+https://git.alexbell.de/aleabodo/progressive-image-component.git"},"bugs":{"url":"https://git.alexbell.de/aleabodo/progressive-image-component/issues"},"license":"MIT","author":{"name":"Alexander Bell"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"sideEffects":["**/*.css"],"scripts":{"build":"vite build && tsc -p tsconfig.build.json","dev":"vite","typecheck":"tsc --noEmit","prepare":"npm run build"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitejs/plugin-react":"^5.0.1","sass":"^1.89.2","typescript":"^5.8.3","vite":"^7.0.6"},"gitHead":"4882baad95bd4a3bb888648fa678c91bd67e6fae","_id":"@aleafrodo/progressive-image-component@1.0.1","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-2vI0GDXuYNK7I+N1k5Zr8b7hKcpV6ug/Am2m8LVU+z3BviMsGv9nI8Jpp9wSubXqngUMFNmvNqyC/ErH8MUBiw==","shasum":"ff32df42b48c91a3e3a53aa2f51e42a1b2e5e900","tarball":"https://registry.npmjs.org/@aleafrodo/progressive-image-component/-/progressive-image-component-1.0.1.tgz","fileCount":8,"unpackedSize":27870,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC76TjyamCnowHvqko41nJHJAvafxqBGpvPzh3UpFkKOwIhAJ7lUuaSMf5fyvNlY36duldIz3WpmTPy8BuVKvOxNPWE"}]},"_npmUser":{"name":"aleafrodo","email":"nw1oatcf@alexbell.email"},"directories":{},"maintainers":[{"name":"aleafrodo","email":"nw1oatcf@alexbell.email"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/progressive-image-component_1.0.1_1775803077369_0.5480438401985894"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T06:34:10.321Z","modified":"2026-04-10T06:37:57.603Z","1.0.0":"2026-04-10T06:34:10.582Z","1.0.1":"2026-04-10T06:37:57.508Z"},"bugs":{"url":"https://git.alexbell.de/aleabodo/progressive-image-component/issues"},"author":{"name":"Alexander Bell"},"license":"MIT","homepage":"https://git.alexbell.de/aleabodo/progressive-image-component","keywords":["react","image","progressive-image","lazy-load","avif"],"repository":{"type":"git","url":"git+https://git.alexbell.de/aleabodo/progressive-image-component.git"},"description":"A React progressive image component with AVIF srcset, lazy loading, and blurred placeholder.","maintainers":[{"name":"aleafrodo","email":"nw1oatcf@alexbell.email"}],"readme":"# Progressive Image Component\n\nA React progressive image component with:\n\n- Blurry thumbnail placeholder\n- Lazy loading via `IntersectionObserver`\n- Responsive AVIF `srcSet`\n- Smooth fade-in when high-resolution image is loaded\n\n## Install\n\n```bash\nnpm install @aleafrodo/progressive-image-component\n```\n\n## Usage\n\n```jsx\nimport ProgressiveImage from \"@your-scope/progressive-image-component\";\n\nexport default function Hero() {\n  return (\n    <ProgressiveImage\n      baseName=\"sample-photo\"\n      alt=\"A mountain at sunrise\"\n      width=\"100%\"\n      aspectRatio=\"16/9\"\n      borderRadius=\"1rem\"\n      imagePath=\"/images/\"\n    />\n  );\n}\n```\n\nThe component expects image files following this naming convention:\n\n- `{baseName}-thumbnail.jpg`\n- `{baseName}-seo.jpg`\n- `{baseName}-{width}w.avif` (for each width in your set)\n\nExample for `baseName=\"sample-photo\"`:\n\n- `sample-photo-thumbnail.jpg`\n- `sample-photo-seo.jpg`\n- `sample-photo-100w.avif`, `sample-photo-200w.avif`, etc.\n\n## Props\n\n- `baseName: string` (required)\n- `alt: string` (required)\n- `showBlurry?: boolean` (default: `true`)\n- `flexGrow?: string | number` (default: `\"1\"`)\n- `aspectRatio?: string` (default: `\"16/9\"`)\n- `shadow?: boolean` (default: `true`)\n- `borderRadius?: string` (default: `\"0\"`)\n- `round?: boolean` (default: `false`)\n- `width?: string | number` (default: `\"auto\"`)\n- `height?: string | number` (default: `\"auto\"`)\n- `imagePath?: string` (default: `\"/images/\"`)\n- `widths?: number[]` (default built-in AVIF width list)\n\n## Local Development\n\n```bash\nnpm install\nnpm run build\n```\n\n## Image Generation Script\n\nA helper script is included at `scripts/compression.sh` to generate AVIF variants and JPG placeholders from originals.\n\nDependencies:\n\n- `imagemagick`\n- `libavif`\n- `jpegoptim`\n","readmeFilename":"README.md"}