{"_id":"@alterjs/saber-plugin-image","_rev":"1-ee7a786e13d76f0afd63bb9a46041b77","name":"@alterjs/saber-plugin-image","dist-tags":{"latest":"0.14.0"},"versions":{"0.13.0":{"name":"@alterjs/saber-plugin-image","version":"0.13.0","license":"MIT","_id":"@alterjs/saber-plugin-image@0.13.0","maintainers":[{"name":"chawyehsu","email":"su+npm@chawyehsu.com"}],"homepage":"https://github.com/chawyehsu/saber#readme","bugs":{"url":"https://github.com/chawyehsu/saber/issues"},"dist":{"shasum":"fb621039dbb15c19130bf702f22cd3d9b955ddf7","tarball":"https://registry.npmjs.org/@alterjs/saber-plugin-image/-/saber-plugin-image-0.13.0.tgz","fileCount":7,"integrity":"sha512-5zjaCPTuViydSPzlcNQqcPfNoDmLpZMaL5XJFltKIyBruOCp0PN85FoJlRB4m2P+H/YlZeM29kbf4DkwJ9MO5A==","signatures":[{"sig":"MEQCIGzoWhq/8NZVAqSmA2nMZRvt4ww5TJFUJl0s2BIjG8MeAiA02IU6qccIE9t2mLkkDhe419PJvWVNKJVBoV2ZcqghOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9788},"main":"./dist/index.min.cjs","module":"./dist/index.min.mjs","exports":{".":{"import":"./dist/index.min.mjs","require":"./dist/index.min.cjs"}},"gitHead":"df690b0df6c45372cb41b7fa42003f08edc08bf5","scripts":{"lint":"eslint src","build":"rimraf dist && rollup -c && node scripts/build.js","build:example":"saber build example","prepublishOnly":"npm run build"},"_npmUser":{"name":"chawyehsu","email":"su+npm@chawyehsu.com"},"repository":{"url":"git+https://github.com/chawyehsu/saber.git","type":"git"},"_npmVersion":"10.7.0","description":"Allows the generation of responsive images (`srcset` included), lazy-loading and all that good stuff.","directories":{},"_nodeVersion":"18.20.4","dependencies":{"jimp":"0.20.2","lozad":"1.16.0","responsive-loader":"2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@alterjs/saber":"^0.13.0"},"_npmOperationalInternal":{"tmp":"tmp/saber-plugin-image_0.13.0_1737181400709_0.07247526766816836","host":"s3://npm-registry-packages-npm-production"}},"0.14.0":{"name":"@alterjs/saber-plugin-image","version":"0.14.0","license":"MIT","repository":{"type":"git","url":"git+https://github.com/chawyehsu/saber.git"},"exports":{".":{"import":"./dist/index.min.mjs","require":"./dist/index.min.cjs"}},"main":"./dist/index.min.cjs","module":"./dist/index.min.mjs","scripts":{"build":"rimraf dist && rollup -c && node scripts/build.js","build:example":"saber build example","lint":"eslint src","prepublishOnly":"npm run build"},"peerDependencies":{"@alterjs/saber":"^0.14.0","jimp":"^0.22.12","sharp":"^0.33.5"},"dependencies":{"lozad":"1.16.0","responsive-loader":"^3.1.2"},"publishConfig":{"access":"public"},"_id":"@alterjs/saber-plugin-image@0.14.0","gitHead":"b2f92467783da7d52b91b19341663cc4efa66bfb","description":"Allows the generation of responsive images (`srcset` included), lazy-loading and all that good stuff.","bugs":{"url":"https://github.com/chawyehsu/saber/issues"},"homepage":"https://github.com/chawyehsu/saber#readme","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"integrity":"sha512-bKNy4BjzXhUIY57BeFKAkcczMmm9v1gnQz42DhSkM4dc7DxbbndGsSLni5mbu3JdEMzC5AUdqHyygWxayO8mQQ==","shasum":"55383d6ecb04bcd615f5c8a0a0487a380ba8a58d","tarball":"https://registry.npmjs.org/@alterjs/saber-plugin-image/-/saber-plugin-image-0.14.0.tgz","fileCount":7,"unpackedSize":11067,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXcNqYR4Z/MzYphYRDMH8dgP/BEUqmFPXEmh5kbVPtvAiEAlwXikXi+JBb2/26PePjBsv65QhAEAIe8tbMxfLE4u/E="}]},"_npmUser":{"name":"chawyehsu","email":"su+npm@chawyehsu.com"},"directories":{},"maintainers":[{"name":"chawyehsu","email":"su+npm@chawyehsu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/saber-plugin-image_0.14.0_1737376703538_0.5789306918807933"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-18T06:23:20.580Z","modified":"2025-01-20T12:38:23.890Z","0.13.0":"2025-01-18T06:23:20.896Z","0.14.0":"2025-01-20T12:38:23.707Z"},"bugs":{"url":"https://github.com/chawyehsu/saber/issues"},"license":"MIT","homepage":"https://github.com/chawyehsu/saber#readme","repository":{"type":"git","url":"git+https://github.com/chawyehsu/saber.git"},"description":"Allows the generation of responsive images (`srcset` included), lazy-loading and all that good stuff.","maintainers":[{"name":"chawyehsu","email":"su+npm@chawyehsu.com"}],"readme":"# @alterjs/saber-plugin-image\n\nAllows the generation of responsive images (`srcset` included), lazy-loading and all that good stuff.\n\n## Install\n\n```bash\nyarn add @alterjs/saber-plugin-image\n```\n\n## Usage\n\nIn your `saber-config.yml`:\n\n```yml\nplugins:\n - resolve: '@alterjs/saber-plugin-image'\n options:\n sizes:\n - 1000\n - 800\n - 500\n placeholder: true\n blendIn: true\n```\n\nUse it, either in Vue or Markdown!\n\n```html\n\n```\n\nPlease note that responsive image generation only works with local images. You can use `` with non-local images to get lazy-loading though.\n\n## Options\n\nThese options can be passed either in the plugin options or to each `` individually by using the `lazy` prop. The plugin options additionally accepts all [Responsive loader](https://github.com/herrstucki/responsive-loader) options.\n\n| Key | Description | Default | Type |\n| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ---------------- |\n| `lazyLoad` | Turn lazy loading off or on. | `true` | `Boolean` |\n| `placeholder` | Requires `lazyLoad` to be enabled. Display a generated placeholder while the image is loading. | `true` | `Boolean` |\n| `blendIn` | Requires `placeholder` to be enabled. Smoothly blends in the loaded image once loaded. | `true` | `Boolean` |\n| `markdownImages` | Transforms `` into ``. You can pass options via the query-string, e. g. `image.png?blendIn=true&sizes[]=100,sizes[]=200` | `true` | `Boolean` |\n| `quality` | JPEG compression quality. | `85` | `Integer` |\n| `sizes` | Images will be downscaled to the specified widths. | _original image width_ | `Array` |\n\nIf you don't like the `blendIn` loading transition, you can create your own ones, like this fade-in transition:\n\n```css\nimg {\n transition: opacity 0.5s;\n}\n\nimg[data-src],\nimg[data-srcset] {\n opacity: 0;\n}\n\nimg[data-lazy-loaded] {\n opacity: 1;\n}\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md"}