npm install webp-hero
libwebp
decoder in the browser (converts webp images to png on-the-fly){useCanvasElements: true}
)98 KB
<picture>
elementsoption A β html install, use webp-hero's bundle with the polyfills
you just inject the html onto your page. this technique works nicely for older browsers like ie11
load generic polyfills and the webp-hero global bundle via script tags
<script src="https://unpkg.com/webp-hero@0.0.2/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js"></script>
run the webp-hero polyfill function on the document
<script>
var webpMachine = new webpHero.WebpMachine()
webpMachine.polyfillDocument()
</script>
option B β commonjs install, use webp-hero's cjs modules in your application
you'll be familiar with this if you're bundling a commonjs with browserify or webpack
install the webp-hero npm package
npm install webp-hero
import and run the webp-hero polyfill function
import {WebpMachine} from "webp-hero"
const webpMachine = new WebpMachine()
webpMachine.polyfillDocument()
if you want to support old browsers like ie11,
you might want to include your own polyfills or import webp-hero/dist-cjs/polyfills.js
option C β es-module install, like in the future
es 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!
use webp-hero on your page in one script tag
<script type="module">
import {WebpMachine} from "https://unpkg.com/webp-hero@0.0.2/dist/webp-machine.js"
const webpMachine = new WebpMachine()
webpMachine.polyfillDocument()
</script>
option D β angular users should look at ngx-webp-polyfill
new WebpMachine({...options})
β all options have defaults, but you can override them
{webp}
google module which contains the actual decoder{webpSupport}
function which detects whether the browser supports webp{detectWebpImage}
detect whether or not the provided <img>
element is in webp format{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)webpMachine.polyfillDocument()
β run over the entire html document, sniffing out webp <img>
elements to convert (only if the browser doesn't support webp)webpMachine.polyfillImage(imageElement)
β converts the given webp image (only if the browser doesn't support webp)webpMachine.decode(webpData)
β decode webp Uint8Array
data, return a png data-urlwebpMachine.clearCache()
β manually wipe the cache to save memoryconvert-binary-data.ts
and etc may be unstable, you might not want to rely on thosewebp-hero/libwebp/google/webp.js
webp-hero/libwebp/webp.cjs.js
webp-hero/libwebp/webp.js
prerequisites
webp-hero development
npm install
β install dependencies and run build
webp-hero/dist/
and webp-hero/dist-cjs/
npm start
β start http server
rebuild google's libwebp
libwebp/dist
are checked into git, because it takes so damn long to buildlibwebp/build
β run dockerized libwebp build, regenerates libwebp/dist
libwebp/debug
β handy for debugging the dockerized build