-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.html
64 lines (58 loc) · 5.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>webp-hero</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
background: #222;
color: #aaa;
padding: 1em;
}
h1 { margin: 1em auto; }
section { padding: 2em }
a { color: #fa4; }
</style>
</head>
<body>
<section>
<h1>webp-hero</h1>
<p><a href="https://github.com/chase-moskal/webp-hero">webp-hero github</a></p>
<p><a href="/libwebp/dist/google/index.html">google's webp demo</a></p>
<p><a href=".">.</a> standard webp usage</p>
<p><a href="./?force">?force</a> force webp decoding</p>
<p><a href="./?force&useCanvasElements">?force&useCanvasElements</a> replace images with canvases</p>
</section>
<img alt="" src="images/landscape.webp"/>
<img alt="" width="300" src="images/dice.webp"/>
<img alt="" style="width: 800px" src="images/firebreather.webp"/>
<img alt="" src="data:image/webp;base64,UklGRhgFAABXRUJQVlA4WAoAAAAgAAAANgAAJwAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANlZQOCDaAgAA8AsAnQEqNwAoAD8RcrFRrCakoq1JIYAiCWMAxQvzKWvMWEBV0O83F6qTtffTCUCjZAdKg0wGWOqBCO/y7i1ZTvpOb73EJUd1NWH6+bhJGc13cl8Ek8gLKri54h2i6nzCCxlpIE0kEAAA/pGaLUHMdU1S+L11hVyk+eGRFICWbNctrYo6YBmCUW6tozZSkXyqfl0uj3aF3OW6flxRPPX2dM/A2zRGaRtYeiI32oWXnYeQmUJZb22fkkd3UlJR08pBfCLw1PdUcfYp3PHZRxikInPHx4p5vSlhYTep4uyBTER+0xDi+Z4+GW63NOAjvdVyfI9ChxzePUbWM5OTGSkK8K+pR3B1qpXPi/P8XwfWBHH+bvOBW0JMeapJoR1Bhx8paKGYzu/14H8fhHeRqVIbUrZjRlS224BpVrusC/tzYpRJn6vrdTPj69HVCcIa1rZP0HKnWQT5U98xToaPO9FWkbj51uDnNaV4rFncZXEnHumG22NEXCA+Ix8UhE/2i3nfwC0zlSuD57dLohevPDGCw18Kpd/PwFTtzAzMIE1QMN//kSNA2HpacgXTR7WEo5qCzzyoNiLp/HGDrAtIOXzTcB1bbrNvmNJPxwxDT2QmMUYEh8lmPQzZzwTPllT2uoMhN3qhapMiujQjXvZgkADfHnffhT2IhIICjcNCQ46sOTJn+Tf0Gyq33Z2aE4P3jezb31mTufFcfTDPMLsb73E9pX5gd1Rezi98clelNuuHYNd8taps+p+fIcvrmY+iTFV7tTzCrfZUfLDTRqF2+Oeat6cidqjD/xCI29A/Wi0+x6KVvn5GPC0Xlmsvvh2bPcWhbvwz0It3zbXCyx09E1F1gekihEJfzr8Sr2lrxfIQcGMxVdwu6wOKZI5hQ/plxJyD6Aql6H8JVAIKxlSxUp5IAN1hkUBBDEtqFRX9FTGrEP/kLdF1DoiSg+WuQal4079NJpB9jYyMUaAAAA=="/>
<p>repeated, to test caching</p>
<img alt="" src="images/landscape.webp"/>
<img alt="" width="300" src="images/dice.webp"/>
<img alt="" style="width: 800px" src="images/firebreather.webp"/>
<img alt="" src="data:image/webp;base64,UklGRhgFAABXRUJQVlA4WAoAAAAgAAAANgAAJwAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANlZQOCDaAgAA8AsAnQEqNwAoAD8RcrFRrCakoq1JIYAiCWMAxQvzKWvMWEBV0O83F6qTtffTCUCjZAdKg0wGWOqBCO/y7i1ZTvpOb73EJUd1NWH6+bhJGc13cl8Ek8gLKri54h2i6nzCCxlpIE0kEAAA/pGaLUHMdU1S+L11hVyk+eGRFICWbNctrYo6YBmCUW6tozZSkXyqfl0uj3aF3OW6flxRPPX2dM/A2zRGaRtYeiI32oWXnYeQmUJZb22fkkd3UlJR08pBfCLw1PdUcfYp3PHZRxikInPHx4p5vSlhYTep4uyBTER+0xDi+Z4+GW63NOAjvdVyfI9ChxzePUbWM5OTGSkK8K+pR3B1qpXPi/P8XwfWBHH+bvOBW0JMeapJoR1Bhx8paKGYzu/14H8fhHeRqVIbUrZjRlS224BpVrusC/tzYpRJn6vrdTPj69HVCcIa1rZP0HKnWQT5U98xToaPO9FWkbj51uDnNaV4rFncZXEnHumG22NEXCA+Ix8UhE/2i3nfwC0zlSuD57dLohevPDGCw18Kpd/PwFTtzAzMIE1QMN//kSNA2HpacgXTR7WEo5qCzzyoNiLp/HGDrAtIOXzTcB1bbrNvmNJPxwxDT2QmMUYEh8lmPQzZzwTPllT2uoMhN3qhapMiujQjXvZgkADfHnffhT2IhIICjcNCQ46sOTJn+Tf0Gyq33Z2aE4P3jezb31mTufFcfTDPMLsb73E9pX5gd1Rezi98clelNuuHYNd8taps+p+fIcvrmY+iTFV7tTzCrfZUfLDTRqF2+Oeat6cidqjD/xCI29A/Wi0+x6KVvn5GPC0Xlmsvvh2bPcWhbvwz0It3zbXCyx09E1F1gekihEJfzr8Sr2lrxfIQcGMxVdwu6wOKZI5hQ/plxJyD6Aql6H8JVAIKxlSxUp5IAN1hkUBBDEtqFRX9FTGrEP/kLdF1DoiSg+WuQal4079NJpB9jYyMUaAAAA=="/>
<script src="dist-cjs/polyfills.js"></script>
<script src="dist-cjs/webp-hero.bundle.js"></script>
<script>
// for this demo, you can add "?force" to the url to force webp conversion
var webpSupport = location.search.indexOf("force") !== -1
? false
: undefined
// you can also add "?useCanvasElements" to the url
// to force replacement of img elements with canvases
var useCanvasElements = location.search.indexOf("useCanvasElements") !== -1
? true
: undefined
// instance the webp machine
var webpMachine = new webpHero.WebpMachine({
webpSupport: webpSupport,
useCanvasElements: useCanvasElements,
})
// polyfill this entire document's webp images
webpMachine.polyfillDocument()
.catch(function(error) { console.error(error) })
</script>
</body>
</html>