{"_id":"@alfred.westerveld/css-lqip","_rev":"2-b965e5594363a2b71647c5812ead2163","name":"@alfred.westerveld/css-lqip","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@alfred.westerveld/css-lqip","version":"0.1.0","keywords":["lqip","placeholder","blur-up","css","sharp","astro","image"],"author":{"name":"Alfred Westerveld"},"license":"MIT","_id":"@alfred.westerveld/css-lqip@0.1.0","maintainers":[{"name":"alfred.westerveld","email":"alfred.westerveld@gmail.com"}],"bin":{"css-lqip":"dist/cli.js"},"dist":{"shasum":"1659504ac3d7b9c6eca28577ad1dd7b199a7a797","tarball":"https://registry.npmjs.org/@alfred.westerveld/css-lqip/-/css-lqip-0.1.0.tgz","fileCount":12,"integrity":"sha512-2CiPafHTEUc5MUmkheR7V29GuhfWq6gDFF5YZjnrZY0jovtB6plIDxkloYuEjirTbgC29w5Nx9/xraOCJJLo9g==","signatures":[{"sig":"MEUCIHaNQtChbNOVd3nczrPnzXSso5F6AC9oAHAjO/G4KgtEAiEAoyPeqvQDC3twvwi/fwNb/JxwNtyI1XvheGbf6ALKrvU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29548},"type":"module","types":"./dist/index.d.ts","volta":{"node":"24.11.0"},"engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./decode":{"types":"./dist/decode.d.ts","import":"./dist/decode.js"}},"gitHead":"a3aad74c3d982993d7d2732fa780ad3d8625319c","scripts":{"test":"bun test","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"bun run typecheck && bun run test && bun run build && publint"},"_npmUser":{"name":"alfred.westerveld","email":"alfred.westerveld@gmail.com"},"_npmVersion":"11.6.1","description":"Low-quality image placeholders: encode images to a 20-bit pure-CSS gradient or a 72-bit raster integer, decode without native deps.","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.0","sharp":"^0.34.5","publint":"^0.3.0","typescript":"^5.7.0","@types/node":"^22.10.0"},"peerDependencies":{"sharp":">=0.33.0"},"peerDependenciesMeta":{"sharp":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/css-lqip_0.1.0_1781087956231_0.6975100309632076","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@alfred.westerveld/css-lqip","version":"0.2.0","description":"Low-quality image placeholders: encode images to a 20-bit pure-CSS gradient or a 72-bit raster integer, decode without native deps.","type":"module","license":"MIT","author":{"name":"Alfred Westerveld"},"keywords":["lqip","placeholder","blur-up","css","sharp","astro","image"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./decode":{"types":"./dist/decode.d.ts","import":"./dist/decode.js","default":"./dist/decode.js"},"./package.json":"./package.json"},"types":"./dist/index.d.ts","bin":{"css-lqip":"dist/cli.js"},"sideEffects":false,"engines":{"node":">=18"},"scripts":{"build":"tsup","typecheck":"tsc --noEmit","test":"bun test","prepublishOnly":"bun run typecheck && bun run test && bun run build && publint"},"peerDependencies":{"sharp":">=0.33.0"},"peerDependenciesMeta":{"sharp":{"optional":true}},"devDependencies":{"@types/node":"^22.10.0","publint":"^0.3.0","sharp":"^0.34.5","tsup":"^8.3.0","typescript":"^5.7.0"},"volta":{"node":"24.11.0"},"gitHead":"a6112cb1bb8c25ca7100b6788d2d64b6a7e5063b","_id":"@alfred.westerveld/css-lqip@0.2.0","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-mM4r55mXOXI1z0p9LOt64upQKvPwBrFpLa3SWxc1Z8MBsE5FCMjLTi7LIA8PcMGa+bdSgktCumRv2167Bto4ZA==","shasum":"1bbd6984babd3385340d9965bb52b6b8b73a0163","tarball":"https://registry.npmjs.org/@alfred.westerveld/css-lqip/-/css-lqip-0.2.0.tgz","fileCount":12,"unpackedSize":31352,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBN4E+nOJhcB9TmU/cGysc2JRG7vvfE4VBHTJi+sWYwvAiEApvrfPhl1lHOC+X8XEIYS3oEzlu4ce4YGJAi3xdFcJoY="}]},"_npmUser":{"name":"alfred.westerveld","email":"alfred.westerveld@gmail.com"},"directories":{},"maintainers":[{"name":"alfred.westerveld","email":"alfred.westerveld@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/css-lqip_0.2.0_1781095223678_0.6933076109656557"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-10T10:39:16.014Z","modified":"2026-06-10T12:40:23.982Z","0.1.0":"2026-06-10T10:39:16.378Z","0.2.0":"2026-06-10T12:40:23.853Z"},"author":{"name":"Alfred Westerveld"},"license":"MIT","keywords":["lqip","placeholder","blur-up","css","sharp","astro","image"],"description":"Low-quality image placeholders: encode images to a 20-bit pure-CSS gradient or a 72-bit raster integer, decode without native deps.","maintainers":[{"name":"alfred.westerveld","email":"alfred.westerveld@gmail.com"}],"readme":"# @alfred.westerveld/css-lqip\n\nLow-quality image placeholders (LQIP) in two flavours from one image:\n\n- **CSS-gradient** — a 20-bit `--lqip` integer decoded entirely in pure CSS\n  (after [Lean Rada](https://leanrada.com/notes/css-only-lqip/)). Zero JS, zero\n  extra network bytes.\n- **Raster** — a 72-bit integer (avg RGB + 3×2 greyscale) decoded to a tiny\n  blurred SVG data-URI. No native dependency at render time.\n\nEncoding uses [`sharp`](https://sharp.pixelplumbing.com/); decoding/rendering does not.\n\n## Install\n\n```sh\nnpm i @alfred.westerveld/css-lqip\n# sharp is an optional peer dependency, needed only for encoding:\nnpm i sharp\n```\n\n## CLI\n\n```sh\ncss-lqip compress photo.jpg            # prints css int, raster int, dominant hex\ncss-lqip compress photo.jpg --json\ncss-lqip decompress <raster-int> out.jpg --width 600 --height 400\n```\n\n## Library\n\n```ts\n// Encoding (needs sharp)\nimport { encode } from '@alfred.westerveld/css-lqip';\nconst { css, raster, hex } = await encode('photo.jpg');\n\n// Rendering (sharp-free — safe in browser/edge/SSR)\nimport { lqipCss, lqipStyle, rasterDataUri } from '@alfred.westerveld/css-lqip/decode';\n\n// CSS-gradient placeholder: inject lqipCss() once, then per element:\n//   <img loading=\"lazy\" style={lqipStyle(css)} src=\"photo.jpg\" />\n\n// Raster placeholder:\nconst uri = rasterDataUri(raster); // data:image/svg+xml,...\n```\n\nAdd the `loaded` class once the real image arrives to fade out the blur\n(`lqipCss()` ships the transition by default).\n\n## Exports\n\n| Subpath | Needs sharp | Contents |\n| --- | --- | --- |\n| `.` | yes | `encode`, `encodeCss`, `encodeRaster` + everything from `./decode` |\n| `./decode` | no | `lqipCss`, `lqipStyle`, `rasterDataUri`, `unpackCss`, `unpackRaster` |\n\n## Credits\n\nThe 20-bit CSS-gradient format and its pure-CSS decoder are the work of\n**Lean Rada** — see [_CSS-only LQIP_](https://leanrada.com/notes/css-only-lqip/)\nand the [reference encoder](https://github.com/Kalabasa/leanrada.com/blob/master/main/scripts/update/lqip.mjs).\nThe decoder CSS in `src/css.ts` is used verbatim from that work; this package\nadds a `sharp` encoder, a 72-bit raster variant, a CLI, and an ESM library\nwrapper. All credit for the CSS-only LQIP technique goes to Lean Rada.\n","readmeFilename":"README.md"}