-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathimageexample.html
67 lines (65 loc) · 3.75 KB
/
imageexample.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
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
</head>
<body>
Here is a fully optimized image using client hints:<br/>
<img sizes="(max-width: 1400px) 100vw, 1400px"
src="https://res.cloudinary.com/hackchallenge/image/upload/q_auto,f_auto,w_auto:150:800,c_scale/v1521063280/MyVacation/IMG_20160525_070350112.jpg">
<br/>
Here is the same image using responsive picture code
<img
sizes="(max-width: 1400px) 100vw, 1400px"
srcset="
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_200.webp 200w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_391.webp 391w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_527.webp 527w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_642.webp 642w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_745.webp 745w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_844.webp 844w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_926.webp 926w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1011.webp 1011w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1093.webp 1093w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1170.webp 1170w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1240.webp 1240w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1320.webp 1320w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1390.webp 1390w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1396.webp 1396w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1400.webp 1400w"
srcset="
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_200.jp2 200w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_391.jp2 391w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_527.jp2 527w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_642.jp2 642w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_745.jp2 745w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_844.jp2 844w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_926.jp2 926w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1011.jp2 1011w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1093.jp2 1093w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1170.jp2 1170w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1240.jp2 1240w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1320.jp2 1320w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1390.jp2 1390w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1396.jp2 1396w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1400.jp2 1400w"
srcset="
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_200.jpg 200w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_391.jpg 391w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_527.jpg 527w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_642.jpg 642w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_745.jpg 745w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_844.jpg 844w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_926.jpg 926w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1011.jpg 1011w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1093.jpg 1093w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1170.jpg 1170w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1240.jpg 1240w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1320.jpg 1320w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1390.jpg 1390w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1396.jpg 1396w,
responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1400.jpg 1400w"
src="responsive/IMG_20160525_070350112_b5pdrs_c_scale,w_1400.jpg"
alt="">
</body>
</html>