-
Notifications
You must be signed in to change notification settings - Fork 5
/
image-fallback.html
65 lines (53 loc) · 2.55 KB
/
image-fallback.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
<!DOCTYPE html>
<title>Demo</title>
<h2>AVIF -> WebP -> PNG</h2>
<picture>
<source srcset="images/test.avif?regular" type="image/avif">
<source srcset="images/test.webp?regular" type="image/webp">
<img src="images/test.png?regular" width="341" height="138" alt="">
</picture>
<h2>unknown type -> WebP -> PNG</h2>
<picture>
<source srcset="images/test.avif?something-obviously-unsupported" type="image/something-obviously-unsupported">
<source srcset="images/test.webp?something-obviously-unsupported" type="image/webp">
<img src="images/test.png?something-obviously-unsupported" width="341" height="138" alt="">
</picture>
<h2>not actually AVIF -> WebP -> PNG</h2>
<picture>
<source srcset="images/test.fake.avif?fake-avif" type="image/avif">
<source srcset="images/test.webp?fake-avif" type="image/webp">
<img src="images/test.png?fake-avif" width="341" height="138" alt="">
</picture>
<h2>not found -> WebP -> PNG</h2>
<picture>
<source srcset="images/missing.avif?not-found" type="image/avif">
<source srcset="images/test.webp?not-found" type="image/webp">
<img src="images/test.png?not-found" width="341" height="138" alt="">
</picture>
<h2>decode failure -> WebP -> PNG</h2>
<picture>
<source srcset="images/broken.avif?decode-error" type="image/avif">
<source srcset="images/test.webp?decode-error" type="image/webp">
<img src="images/test.png?decode-error" width="341" height="138" alt="">
</picture>
<h2>AVIF -> WebP -> PNG (no image types)</h2>
<picture>
<source srcset="images/test.avif?notype">
<source srcset="images/test.webp?notype">
<img src="images/test.png?notype" width="341" height="138" alt="">
</picture>
<h2>JXL -> PNG</h2>
<picture>
<source srcset="images/test.jxl?jxl" type="image/jxl">
<img src="images/test.png?jxl" width="341" height="138" alt="">
</picture>
<h2>missing AVIF img with an error fallback to PNG</h2>
<img src="images/missing.avif?error-fallback" onerror="src='images/test.png?error-fallback'" width="341" height="138" alt="">
<h2>existing AVIF img with an error fallback to PNG</h2>
<img src="images/test.avif?error-fallback" onerror="src='images/test.png?error-fallback'" width="341" height="138" alt="">
<h2>existing JXL img with an error fallback to PNG</h2>
<img src="images/test.jxl?error-fallback-jxl" onerror="src='images/test.png?error-fallback-jxl'" width="341" height="138" alt="">
<h2>image via CSS</h2>
<div style="background: url(images/test.avif?css); width: 341px; height: 138px;"></div>
<h2>JXL image via CSS</h2>
<div style="background: url(images/test.jxl?css-jxl); width: 341px; height: 138px;"></div>