{"_id":"@anakinyuen/progressive-image","_rev":"1-3192893f45dd047a338566dbc1161802","name":"@anakinyuen/progressive-image","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@anakinyuen/progressive-image","version":"0.0.1","description":"Enriches the native `img` element by using multiple Progressive Image Rendering strategies","main":"./src/index.js","repository":{"type":"git","url":"git+https://github.com/AnakinYuen/progressive-image.git"},"scripts":{"build":"gulp build","web-component-tester":"npx bower install Polymer/web-component-tester --save","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["progressive","image","img","lazy loading","Intersection Observer"],"author":{"name":"Anakin Yuen"},"license":"MIT","devDependencies":{"del":"^4.1.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.2.0","eslint-plugin-import":"^2.17.2","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.13.0","gulp":"^4.0.2","gulp-clean-css":"^4.2.0","gulp-rename":"^1.4.0","gulp-uglify-es":"^1.0.4","prettier":"^1.17.1","web-component-tester":"^6.9.2"},"gitHead":"64824d48cb73266145c4d5f637309ec3c1a830d8","bugs":{"url":"https://github.com/AnakinYuen/progressive-image/issues"},"homepage":"https://github.com/AnakinYuen/progressive-image#readme","_id":"@anakinyuen/progressive-image@0.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.9.0","_npmUser":{"name":"anakinyuen","email":"anakinyuen1024@gmail.com"},"dist":{"integrity":"sha512-0dxOwXUmwbfMXbVtLwhcCh7d744dxFMOYdMerilXowSp16rlJRtmingtg5kmCRJGUNafk4fhGhyS0hkM7l0JVQ==","shasum":"a3db930b99389a29c4446af551c3b74d3d0ba6c4","tarball":"https://registry.npmjs.org/@anakinyuen/progressive-image/-/progressive-image-0.0.1.tgz","fileCount":21,"unpackedSize":10213270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3E4bCRA9TVsSAnZWagAA+RgP/0iBEauaTFcVcFbTcRii\nW7shQaQ+udkRfSDW9dmcrOA/ZT37vl//siquN2k6Pp8YA47B6DmmAE0uk5Li\nMBjc0rN5LYBG7Ez9WQLLsRP/SSTN7L0U6A6wvBvvSaqOdAVXrLPFSousCuIv\nVnu4mFpHnqSbn/WJUV4d/wyDsrR3hvePqvfuBZ1Uqy+wZWBgMTq/jnTQf04T\n/0yRJWidrSPuq7cPknUdDsqYtb6FEoqn69u7QFN/0q/suM4Y9OSv6oSl+uuh\npLr/gC0H6mZQOFH3nX5sHgUzD3BaeIMzumgXR1JJctVgYdijD5U9IBy07eAQ\n2sRR/beeU1ewji13PsbdU2tL7VEm+DcPOtBzYw3glWS8twa26sfV5lRs5pXj\nHlIV0Do5/3NyKZ1gMo64/K03OaH9Iot36MgPo5GjIiBX7HGDRnkbiaDvY8t7\nmNwzNlsfQs1k0Kkg7Gwm2wuPjEEfty/1N3PRxOtdBg3Wr1r3yREgAH4cr/S7\n9ceCzJQSXpjJS0iZf7OdbCQrN7K98fo9yLwIeutXj+y1bT4n0LhxQP3r4mKL\nl5lCRqtLDeefpcRynDIlqUkLNCSkU9WzMBrjzcCfVjBpYzkXhYNzJAuluv0X\npNj9n12u8PtVW6k+5gJrPfHbPgx8NXAroKp6T/L6gzxoZcLdfpWKdD3BQ1Pn\n0fOK\r\n=soJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7PHr0QVksY8RdUVZGPs9g8254gyf6jP1c+xhykK3m1AiA8ti4KI85gKWGnMvnwwAkdAa0CpTPiO3GChO8ddkB90g=="}]},"maintainers":[{"name":"anakinyuen","email":"anakinyuen1024@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/progressive-image_0.0.1_1557941786536_0.30445858880991405"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-15T17:36:26.508Z","0.0.1":"2019-05-15T17:36:27.107Z","modified":"2022-04-04T13:53:45.400Z"},"maintainers":[{"name":"anakinyuen","email":"anakinyuen1024@gmail.com"}],"description":"Enriches the native `img` element by using multiple Progressive Image Rendering strategies","homepage":"https://github.com/AnakinYuen/progressive-image#readme","keywords":["progressive","image","img","lazy loading","Intersection Observer"],"repository":{"type":"git","url":"git+https://github.com/AnakinYuen/progressive-image.git"},"author":{"name":"Anakin Yuen"},"bugs":{"url":"https://github.com/AnakinYuen/progressive-image/issues"},"license":"MIT","readme":"
\n \n
\n\n# progressive-image\n\n[](https://github.com/prettier/prettier)\n\nThe customized build-in element that enriches the native `img` element by using multiple Progressive Image Rendering strategies.\n\n\n\n`progressive-image` example in Chrome with Fast 3G throttling\n\n## Installation\n\n### npm\n\n```bash\n$ npm install progressive-image\n```\n\n### Direct include\n\nSimply download and include with a `script` tag and a `link` tag inside the `head` tag.\n\n```html\n\n \n \n\n```\n\nor\n\n### Using `import` statement\n\nYou may also import `progressive-image` directly to your source code\n\n```js\nimport 'progressive-image';\n```\n\n```html\n\n \n \n\n```\n\n## Usage\n\n### Create `img` in html\n\n```html\n\n```\n\n### Create `img` in js\n\n```js\nconst progressiveImage = document.createElement('img', {\n is: 'progressive-image',\n});\nprogressiveImage.width = 474;\nprogressiveImage.height = 600;\nprogressiveImage.src = 'The_Scream.jpg';\nprogressiveImage.alt = 'The Scream';\nprogressiveImage.dataset.blurrySrc = 'The_Scream-189px.jpg';\nprogressiveImage.sizes = '(min-width: 415px) 50vw, 80vw';\nprogressiveImage.srcset = `\n The_Scream-474px.jpg 474w,\n The_Scream-606px.jpg 606w,\n The_Scream-808px.jpg 808w,\n The_Scream-10025px.jpg 10025w\n`;\n```\n\n## Key Features\n\n- **no dependency**\n- **minimal size:** weighing `1.8KB` only\n- **multiple Progressive Image Rendering strategies:** support CSS Placeholder Shimmer and Low quality image placeholder (LQIP)\n- **lazy load images:** Intersection Observer is used to trigger image loads\n - you may want to include Intersection Observer polyfill for browsers which not natively support `Intersection Observer`\n- **auto fallback:** work exactly the same as `img` do if Custom elements is not supported\n\n## Attributes\n\n### is (is=\"progressive-image\")\n\nSpecify that a standard HTML element (`img`) should behave like a registered custom built-in element (`progressive-image`).\n\n> See [Using custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for more details\n\n### src\n\nSame as `src` attribute on the `img` tag.\n\n### srcset\n\nSame as `srcset` attribute on the `img` tag.\n\n### sizes\n\nSame as `sizes` attribute on the `img` tag.\n\n> See [Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images) for usage of sizes and srcset.\n\n### alt\n\nSame as `alt` attribute on the `img` tag.\n\n### data-blurry-src\n\nOptional attribute\n\nThe `data-blurry-src` attribute defined the source for Low quality image placeholder(LQIP) of the `img` element. By default, the image of `data-blurry-src` is immediately downloaded and shown in blurry form. The final image will start download after LQIP is shown. Once ready, the LQIP will fade out and show the final image.\n\n### height and width\n\nAn **explicit** size of the image, which is used by the `progressive-image` to determine the aspect ratio without fetching the image.\n\n## Compatibility\n\n**[Requires ES2015 classes](https://caniuse.com/es6-class). IE11 and below not supported.**\n\n- **If targeting browsers that natively support ES2015, but not native Web Components:**\n\n You will also need the [Custom Elements V1 Polyfill](https://github.com/WebReflection/document-register-element).\n\n See caniuse.com for support on [Custom Elements v1](https://caniuse.com/#feat=custom-elementsv1).\n\n- **If targeting browsers that does not support ES2015:**\n\n You might want to reconsider since you'll be better off not using Web Components in this case.\n\n## Licensing\n\n[MIT license](https://github.com/AnakinYuen/progressive-image/blob/master/LICENSE)\n","readmeFilename":"README.md"}
![\"Progressive](\"./logo.png\"){kind=logo}
\n