-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (76 loc) · 2.34 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<title>Avif test</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./css/normalize.css" />
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div>
<div id="test"></div>
<img id="test2" />
Photo by
<a
href="https://unsplash.com/@greg_rosenke?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
>
Greg Rosenke
</a>
on
<a
href="https://unsplash.com/s/photos/16x9?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
>
Unsplash
</a>
</div>
<picture>
<source srcset="./img/avif.avif" type="image/avif" />
<source srcset="./img/avif.webp" type="image/webp" />
<img
src="./img/avif.jpg"
alt="AVIF example with WebP and JPEG fallback"
/>
</picture>
<section>
<script>
window.addEventListener("DOMContentLoaded", function () {
const image = document.getElementById("image");
const format = document.getElementById("format");
const url = image.currentSrc.split("?");
const extension = url[0].split(".").pop();
format.innerHTML = extension;
});
</script>
<picture>
<source
srcset="
https://cdn.glitch.com/f4525b23-4268-473b-a57c-bdb57f3f7494%2FIMG_5666.avif?v=1599083333763
"
type="image/avif"
/>
<source
srcset="
https://cdn.glitch.com/f4525b23-4268-473b-a57c-bdb57f3f7494%2FIMG_5666.webp?v=1599083327747
"
type="image/webp"
/>
<img
id="image"
src="https://cdn.glitch.com/f4525b23-4268-473b-a57c-bdb57f3f7494%2FIMG_5666.jpg?v=1599084177153"
alt="Description of Photo"
width="630px"
/>
</picture>
<h4 class="Message">
Your browser has loaded this image in
<span id="format" class="Format">...</span>
format
</h4>
</section>
<script src="./js/vendor/modernizr-3.11.2.min.js"></script>
<script src="./js/plugins.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html>