{"_id":"avif.js","_rev":"2-e230aa3634539140140cabdf3dce3603","name":"avif.js","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"avif.js","version":"0.1.0","description":"AVIF polyfill for the browser","main":"avif.js","scripts":{},"repository":{"type":"git","url":"git+https://github.com/Kagami/avif.js.git"},"keywords":["AVIF","AV1","image","polyfill"],"author":{"name":"Kagami Hiiragi"},"license":"CC0-1.0","bugs":{"url":"https://github.com/Kagami/avif.js/issues"},"homepage":"https://github.com/Kagami/avif.js#readme","gitHead":"55d02cafca218a6720602d4b3fee999ad3d58866","_id":"avif.js@0.1.0","_npmVersion":"6.5.0","_nodeVersion":"11.8.0","_npmUser":{"name":"kagami","email":"kagami@genshiken.org"},"maintainers":[{"name":"kagami","email":"kagami@genshiken.org"}],"dist":{"integrity":"sha512-bDVjUc0OMDcwzPK0CCsclBzwxFNj+5hKlzvAxkn7HJREj7OgTiKgZX91thENHFjBNojFN1OdpsljQ6qVUrLztQ==","shasum":"49769755435ff9bf6cbe8acc18022ebc87c61f19","tarball":"https://registry.npmjs.org/avif.js/-/avif.js-0.1.0.tgz","fileCount":5,"unpackedSize":18415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJce7uGCRA9TVsSAnZWagAAQpYP/0LAeylCK8slkjarK0ie\n+cJP9VQkk4l6t8FU4wZwd9+7MUYNf3PjV0uzjeVyieuoYSruZYo+UFdiWtlB\nnlIfDgZMcD8cI8B/zBZbQv2Hyriv2Rhp/NJpcYffGNSXwmoMTPR8W/QPr0/f\nczFu78YMC42i599ltH2XvHHwqlWhyGokeMrA7jmDV9qifzGq7Ro6QgTJcX42\naNyhKcvzuVFM657e4qoeDn2uqMvVATKEshgSFmKjt1CvyKzUwSPw4qzJcFqn\n99hS3sQ8f8RGN1FcrhLcwJvHYvXkOdxdIW/IseHRXkVbmjcYLek25x94LgB5\njQjm18O4KvsrBAfwMToJB8KdnNYC8BnchxOSRW0LASAgDnaWe8xOtF7bkQFi\nbbc5mUjKsVgZO7fCqRbR+PXFzviVc9BHCoKvTox7OuCGmEFepWm8XR2Cj7yJ\nWWaI47sdwK6F1fXkeZGlcjb+t4uwaOmObMdFW6H49wu5//UPa9qO8vmBvNG+\nFid1TOW7ZLh1d0Vht4AMGlha5uY0/vGIN8BIPU4Pzf++aqT+Ltl2sJGy3/F1\nNwMvVFYig50MFioNumfsMaZnM9eqSItaN6GwlvCz5CzWoazUbwBdBazjo83Z\n8iNCZfNs5XRWo2RpRAHczfng4Y2voRUwkTaJkw4rjjtAhaot10aFXAfMdXtg\nPScw\r\n=uPww\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGksWDix2qzZFs1VEnH1fWscQXFYzc8Qotf7u8OgIGcQIhAKiwf7g3yT074dY6ZSDz/4MO7uPPbpDOxEl+Bk9IWj7n"}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avif.js_0.1.0_1551612805917_0.4293979740869831"},"_hasShrinkwrap":false},"0.2.0":{"name":"avif.js","version":"0.2.0","description":"AVIF polyfill for the browser","main":"avif.js","scripts":{"start":"parcel demo/index.html --no-hmr","size":"cat *.js | terser -c -m | gzip -c | wc -c","update-demo":"D=`mktemp -d` && parcel build demo/index.html --out-dir \"$D\" --public-url ./ && git checkout gh-pages && rm `git ls-files *` && mv \"$D\"/* . && rmdir \"$D\" && git add -A && git commit -m 'Update demo'"},"repository":{"type":"git","url":"git+https://github.com/Kagami/avif.js.git"},"keywords":["AVIF","AV1","image","polyfill"],"author":{"name":"Kagami Hiiragi"},"license":"CC0-1.0","bugs":{"url":"https://github.com/Kagami/avif.js/issues"},"homepage":"https://github.com/Kagami/avif.js#readme","parcelDisableLoaders":["wasm"],"dependencies":{"dav1d.js":"^0.1.0"},"devDependencies":{"parcel-bundler":"^1.12.3","parcel-plugin-disable-loaders":"^1.0.3","terser":"^3.16.1"},"gitHead":"82668dc1773cf519e81b80acca6c4f896e450d5b","_id":"avif.js@0.2.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"kagami","email":"kagami@genshiken.org"},"maintainers":[{"name":"kagami","email":"kagami@genshiken.org"}],"dist":{"integrity":"sha512-X3ozZxqD/Y5KSG8vfa9eVoxtERYiPrZY5RQV2ZBz37pMTLLbBsimI+NL60mCx/DpksBmDOV7+93yFrl9k1OHKw==","shasum":"1318d0ddf6fce1a4608b39243fada3afbaf5482f","tarball":"https://registry.npmjs.org/avif.js/-/avif.js-0.2.0.tgz","fileCount":7,"unpackedSize":27493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpTYuCRA9TVsSAnZWagAATVoP/3LETbPWd6j6kwhXzos6\nxgzXgkcUG09/sJPbWL+fyXuIWv9vuiWBI9gJ+rWrXfzzxBt5DcCNln+cm64d\nQMPFeC36JlbtuHRlm0dDYvnI5GZQJCrCewwek0aVgITGT133Khf1u/IABYri\n4t6qFXALC34pi2MsC/SvolXz87ufc4qHhQATC4FMO1Jx7xBIlKesH189AxiT\nBqC93i0wqfioBl/c0dF11zdO95IoKGqIIqTwIKpTHXhB3V0u4Sc7azBhZy8/\nxx95ZMrgD4ZwQ/YRUYxG8JfVGIO1yvqtgJkLR0Qxz0jvW8ufjdMYJv7yTX+3\nVi03lE6Mm5ddk1r693zmK6BaqQ2rGUpKX8xnp7DJKTEZLVSAERhFFTYa/vTj\nHy4qU//yj2l8UuasfUL15O6wO/x0+nEdnLZIetM+2nAl9GriHEtkmbOJtHZ1\nnfGkA9J+rPV8dWJCLyd6Cvs5N5oGZeODD6O6TpKIx1kFpY3x0SYHDag/y666\nn8chNZ8an66EvePUz00ObZlMd84xIqHFxG7AncYVpPiiuyD7JIgN9L8hOoRM\nMK4SZ1eQjqAYBgBHRUSZCIVB/b02TBjKx7gVoiDA9gn1s8bMIjJiMHEtuThp\nOGOhioHzskfvaa62e3PLBBkdlDNh0ONg3gOiQXhoNyHRYcGPCjvLZufp6zta\nDu9U\r\n=Hnmp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkXm8hZxgIPLCwZQPH7ZlP0ll4kGEWRIDnlnK6L0peoQIgA7pe8U5ICkwDE2rgYNqrTQXQKtCMZ5lx3IP8+LgJl7M="}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avif.js_0.2.0_1554331182151_0.06808616605343532"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-03T11:33:25.917Z","0.1.0":"2019-03-03T11:33:26.061Z","modified":"2022-04-11T16:11:00.015Z","0.2.0":"2019-04-03T22:39:42.317Z"},"maintainers":[{"name":"kagami","email":"kagami@genshiken.org"}],"description":"AVIF polyfill for the browser","homepage":"https://github.com/Kagami/avif.js#readme","keywords":["AVIF","AV1","image","polyfill"],"repository":{"type":"git","url":"git+https://github.com/Kagami/avif.js.git"},"author":{"name":"Kagami Hiiragi"},"bugs":{"url":"https://github.com/Kagami/avif.js/issues"},"license":"CC0-1.0","readme":"<p align=\"center\">\n  <img src=\"https://upload.wikimedia.org/wikipedia/commons/8/84/AV1_logo_2018.svg\" height=\"200\">\n  <br><b>AVIF (AV1 Still Image File Format) polyfill for the browser</b>\n  <br><i>Start using superior image compression today!</i> :shipit:\n  <br>:confetti_ball: :tada: <b><a href=\"https://kagami.github.io/avif.js/\">DEMO</a></b> :tada: :confetti_ball:\n  <br><a href=\"https://www.npmjs.com/package/avif.js\"><img src=\"https://img.shields.io/npm/v/avif.js.svg\"></a>\n</p>\n\n## Features\n\n* Small, optional dependency, <4kb minified & gzipped\n* Intercepts AVIF fetch requests so works in any scenario\n* Uses native decoder if possible and should be reasonably fast\n\n## Supported browsers\n\n**With native decoder:**\n\n* Chrome Desktop 70+\n* Firefox 63+ (with `media.av1.enabled` activated)\n* Firefox for Android 64+ (with `media.av1.enabled` and `media.av1.use-dav1d` activated)\n* Edge 18+ (with `AV1 Video Extension` installed)\n* Bromite 71+\n\n**With AV1 polyfill:**\n\n* Chrome 57+\n* Firefox 53+\n* Edge 17+\n* Safari 11+\n\n## Usage\n\n```\nnpm install avif.js\n```\n\n```js\n// Put this to reg.js and serve avif-sw.js from web root\nrequire(\"avif.js\").register(\"/avif-sw.js\");\n```\n\n```html\n<html>\n<body>\n  <!-- Register worker -->\n  <script src=\"reg.js\"></script>\n\n  <!-- Can embed AVIF with IMG tag now -->\n  <img src=\"image.avif\">\n\n  <!-- Or via CSS property -->\n  <div style=\"background: url(image2.avif)\">\n    some content\n  </div>\n</body>\n</html>\n```\n\nThat's it! Service worker will detect all fetch requests for AVIF files and\ndecode them on the fly. It works with any complex scenarios of image embedding\nyou might have, e.g. `background-image` in external CSS or `XMLHttpRequest`\nfrom a script.\n\nSee [demo](demo) directory for the usage example.\n\nTo generate AVIF files you may use [go-avif CLI utility](https://github.com/Kagami/go-avif#cli).\n\n## Technical details for nerds\n\nAVIF file is basically an AV1 keyframe packed inside ISOBMFF container, almost\nidentical to the HEIF structure, except AV1 video format instead of HEVC is\nused. Latest versions of Chrome and Firefox support AV1 video decoding, but\nstill can't display AVIF images, it usually takes some time before new format\nwill be added. See e.g. [Firefox issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1443863).\n\nThough abovementioned technical aspects of AVIF make it quite easy to implement\nas a tiny polyfill. All we need to do is repack AVIF as a single-frame AV1\nvideo and decode it using native decoder. This is exactly what avif.js does.\nFirst it fetches the AVIF file into binary buffer, then parses the ISOBMFF\nstructure, then searches and extracts the actual frame data (OBUs) and finally\nembeds it into MP4 video file. Now we can decode that video with standard\n`<video>` element and dump raw pixel data to temporary `<canvas>`.\n\nInstead of forcing users to call some function every time they need to display\nAVIF file, fetch event interceptor powered by\n[Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)\nis used. It allows us to replace image data that browser doesn't know how to\ndecode with some known one. avif.js uses BMP to avoid spending time on second\ncompression of already decoded pixel data. It's very fast operation, we just\nneed to write BMP header and copy color values in order. Finally we can deliver\nthat created on the fly .bmp back to the browser and our image will appear on\nthe page.\n\nThe actual process is a bit more complex, e.g. we can't create `<video>`\nelement in a worker, so pass decoding request to the main thread and get result\nback. Also container fields of the video should correspond to properties of the\nstill image, some offsets need to be fixed and so on. But you got the general\nidea.\n\n## Limitations of Service Worker API\n\n* Needs to be served from HTTPS\n* Doesn't work in Firefox/Edge Private Window\n* Requires page reload on first visit to display static assets\n\n## TODO\n\n* Benchmark\n* Check for AVIF support\n* Support for browsers without Service Workers\n\n## License\n\navif.js is licensed under [CC0](COPYING).  \nDemo images are taken from [av1-avif](https://github.com/AOMediaCodec/av1-avif/tree/master/testFiles) repo.\n","readmeFilename":"README.md"}