{"id":18997307,"url":"https://github.com/chase-moskal/webp-hero","last_synced_at":"2025-10-05T20:32:11.385Z","repository":{"id":27515198,"uuid":"114217655","full_name":"chase-moskal/webp-hero","owner":"chase-moskal","description":"browser polyfill for the webp image format","archived":false,"fork":false,"pushed_at":"2022-06-06T01:39:26.000Z","size":3534,"stargazers_count":253,"open_issues_count":10,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-12T01:02:04.686Z","etag":null,"topics":["browser-polyfill","decoder","polyfill","webp","webp-images"],"latest_commit_sha":null,"homepage":"https://chasemoskal.com/webp-hero/","language":"CMake","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chase-moskal.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-14T07:32:54.000Z","updated_at":"2025-02-11T01:28:56.000Z","dependencies_parsed_at":"2022-08-07T13:00:22.399Z","dependency_job_id":null,"html_url":"https://github.com/chase-moskal/webp-hero","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fwebp-hero","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fwebp-hero/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fwebp-hero/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fwebp-hero/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chase-moskal","download_url":"https://codeload.github.com/chase-moskal/webp-hero/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240012307,"owners_count":19733878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-polyfill","decoder","polyfill","webp","webp-images"],"created_at":"2024-11-08T17:38:56.577Z","updated_at":"2025-10-05T20:32:06.353Z","avatar_url":"https://github.com/chase-moskal.png","language":"CMake","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n🦸‍♂️ webp-hero\n============\n\nbrowser polyfill for the webp image format\n------------------------------------------\n\n- 📦 `npm install webp-hero`\n- 🎉 webp images come alive, even in safari and ie11! _(firefox and edge now support webp)_\n- ⚙️ webp-hero actually runs google's `libwebp` decoder in the browser _(converts webp images to png on-the-fly)_\n- 🕹️ live demo\n\t- [webp-hero/](https://webp-hero.chasemoskal.com/) — webp-hero polyfill operating normally _(does nothing if your browser supports webp)_\n\t- [webp-hero/?force](https://webp-hero.chasemoskal.com/?force) — webp conversion to png is forced _(even if your browser supports webp)_\n\t- [webp-hero/?force\u0026useCanvasElements](https://webp-hero.chasemoskal.com/?force\u0026useCanvasElements) — wholly replace webp image elements with canvas elements _(added for icecat compatibility)_\n- ♻️ freshness\n\t- [libwebp def64e9](https://github.com/webmproject/libwebp/tree/def64e920ff69e1d8270a2787d13df7c0d38d8ba) — 2020-08-17\n\t- [emscripten 2.0.1](https://github.com/emscripten-core/emscripten/releases/tag/2.0.1) — 2020-08-21\n- 💯 browser support tested 2020-08-26\n\t- evergreen browsers (chrome, firefox, edge, desktop safari)\n\t- windows 7 ie11\n\t- iphone 7 mobile safari\n\t- galaxy s5 samsung internet\n\t- icecat 60.7 *(requires option `{useCanvasElements: true}`)*\n- ⚖️ `98 KB`\n- ⚠️ known issues and deficiencies\n\t- doesn't yet support css background images (pull requests welcome!)\n\t- doesn't yet support `\u003cpicture\u003e` elements\n\t- doesn't yet support web workers (decodes images one-at-a-time, blocking, single-threaded)\n\t- no wasm (because older browsers)\n\nwebp-hero installation and usage\n--------------------------------\n\n- **option A — html install, use webp-hero's bundle with the polyfills**  \n\tyou just inject the html onto your page. this technique works nicely for older browsers like ie11\n\n\t1. load generic polyfills and the webp-hero global bundle via script tags\n\n\t\t```html\n\t\t\u003cscript src=\"https://unpkg.com/webp-hero@0.0.2/dist-cjs/polyfills.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js\"\u003e\u003c/script\u003e\n\t\t```\n\n\t2. run the webp-hero polyfill function on the document\n\n\t\t```html\n\t\t\u003cscript\u003e\n\t\t\tvar webpMachine = new webpHero.WebpMachine()\n\t\t\twebpMachine.polyfillDocument()\n\t\t\u003c/script\u003e\n\t\t```\n\n- **option B — commonjs install, use webp-hero's cjs modules in your application**  \n\tyou'll be familiar with this if you're bundling a commonjs with browserify or webpack  \n\n\t1. install the webp-hero npm package\n\n\t\t`npm install webp-hero`\n\n\t2. import and run the webp-hero polyfill function\n\n\t\t```js\n\t\timport {WebpMachine} from \"webp-hero\"\n\t\tconst webpMachine = new WebpMachine()\n\t\twebpMachine.polyfillDocument()\n\t\t```\n\n\t3. *if* you want to support old browsers like ie11,  \n\t\tyou might want to include your own polyfills or import `webp-hero/dist-cjs/polyfills.js`\n\n- **option C — es-module install, like in the future**  \n\tes modules are available. but why would anybody use these for webp-hero? i guess it could be useful for.. mobile safari? anyways, this won't work in older browsers, which might defeat the purpose of using webp-hero in the first place? well.. it's here for you if you need it!\n\n\t1. use webp-hero on your page in one script tag\n\n\t\t```html\n\t\t\u003cscript type=\"module\"\u003e\n\t\t\timport {WebpMachine} from \"https://unpkg.com/webp-hero@0.0.2/dist/webp-machine.js\"\n\t\t\tconst webpMachine = new WebpMachine()\n\t\t\twebpMachine.polyfillDocument()\n\t\t\u003c/script\u003e\n\t\t```\n\n- **option D — angular users should look at [ngx-webp-polyfill](https://github.com/turnstileweb/ngx-webp-polyfill)**\n\nwebp-hero advanced usage\n------------------------\n\n### webp-machine\n\n- [webp-machine.ts](./source/webp-machine.ts) has logic for polyfilling, caching, and enforcing sequential webp decoding\n\t- `new WebpMachine({...options})` — all options have defaults, but you can override them\n\t\t- `{webp}` google module which contains the actual decoder\n\t\t- `{webpSupport}` function which detects whether the browser supports webp\n\t\t- `{detectWebpImage}` detect whether or not the provided `\u003cimg\u003e` element is in webp format\n\t\t- `{useCanvasElements: true}` boolean which when true causes webp-hero to polyfill webp images by wholly replacing them with canvas elements (instead of using png data urls). this helps compatibility with icecat (default: false)\n\t- the webpMachine you create has the following methods\n\t\t- `webpMachine.polyfillDocument()` — run over the entire html document, sniffing out webp `\u003cimg\u003e` elements to convert (only if the browser doesn't support webp)\n\t\t- `webpMachine.polyfillImage(imageElement)` — converts the given webp image (only if the browser doesn't support webp)\n\t\t- `webpMachine.decode(webpData)` — decode webp `Uint8Array` data, return a png data-url\n\t\t- `webpMachine.clearCache()` — manually wipe the cache to save memory\n- other modules like `convert-binary-data.ts` and etc may be unstable, you might not want to rely on those\n\n### manual-style with the google libwebp decoder\n\n- we compile from google's libwebp emscripten build in a docker container\n- this build contains minimal functionality for rendering webp data to a canvas:\n\t- google's emscripten output: `webp-hero/libwebp/google/webp.js`\n- we do little hacks to wrap this build into two modules:\n\t- common-js: `webp-hero/libwebp/webp.cjs.js`\n\t- es-module: `webp-hero/libwebp/webp.js`\n- we have a typescript declaration for it too: [webp.d.ts](./libwebp/source/webp.d.ts)\n\nwebp-hero dev and contributing\n------------------------------\n\n- **prerequisites**\n\t- git and node\n\t- docker (only if you want to rebuild google's libwebp)\n\n- **webp-hero development**\n\t- `npm install` — install dependencies and run build\n\t\t- runs a typescript build, uses browserify to make the bundle\n\t\t- generates `webp-hero/dist/` and `webp-hero/dist-cjs/`\n\t\t- generates the polyfills (cjs-only)\n\t\t- does *not* rebuild google's libwebp\n\t- `npm start` — start http server\n\t\t- visit http://localhost:5000/ to see the webp-hero demo\n\t\t- visit http://localhost:5000/libwebp/dist/google/ to see google's demo\n\n- **rebuild google's libwebp**\n\t- libwebp build artifacts in `libwebp/dist` are checked into git, because it takes so damn long to build\n\t- `libwebp/build` — run dockerized libwebp build, regenerates `libwebp/dist`\n\t- `libwebp/debug` — handy for debugging the dockerized build\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchase-moskal%2Fwebp-hero","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchase-moskal%2Fwebp-hero","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchase-moskal%2Fwebp-hero/lists"}