Skip to content

Commit 3e481f5

Browse files
hjorturehhjortureh
committed
Merge branch 'gh-pages' of https://github.com/14islands/14islands-website into gh-pages
2 parents 24c5aa2 + 4c60164 commit 3e481f5

File tree

14 files changed

+154
-1
lines changed

14 files changed

+154
-1
lines changed

‎lab/responsive.io/demo-with.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>PoC - responsive.io</title>
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
8+
9+
<!-- load responsiveio.js non-blocking -->
10+
<script src="http://direct.responsive.io/responsiveio.js" async defer></script>
11+
12+
<style>
13+
html, body {
14+
height: 100%;
15+
margin: 0;
16+
padding: 2em;
17+
}
18+
h2 {
19+
margin-top: 2em;
20+
}
21+
p {
22+
background: #eee;
23+
}
24+
img {
25+
display: block;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
31+
<h1>Demo WITH responsive.io</h1>
32+
<p><b>*** remember to re-load on window resize ***</b></p>
33+
34+
<h2>width: 100%;</h2>
35+
<p><img data-src="test-images/1.jpg" alt="A responsive image" style="width:100%;"/></p>
36+
37+
<h2>max-width: 100%;</h2>
38+
<p>
39+
<img data-src="test-images/2.jpg" alt="A responsive image" style="max-width:100%;"/>
40+
</p>
41+
42+
<h2>max-width: 50%;</h2>
43+
<p>
44+
<img data-src="test-images/3.jpg" alt="A responsive image" style="max-width:50%"/>
45+
</p>
46+
47+
<h2>width: 100%; max-width: 400px;</h2>
48+
<p>
49+
<img data-src="test-images/4.jpg" alt="A responsive image" style="width: 100%; max-width:400px"/>
50+
</p>
51+
52+
<h2>width: 100%; min-width: 400px;</h2>
53+
<p>
54+
<img data-src="test-images/5.jpg" alt="A responsive image" style="width:100%; min-width:400px;"/>
55+
</p>
56+
57+
58+
</body>
59+
</html>

‎lab/responsive.io/demo-without.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>PoC - responsive.io</title>
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
8+
9+
<style>
10+
html, body {
11+
height: 100%;
12+
margin: 0;
13+
padding: 2em;
14+
}
15+
h2 {
16+
margin-top: 2em;
17+
}
18+
p {
19+
background: #eee;
20+
}
21+
img {
22+
display: block;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
28+
<h1>Demo WITHOUT responsive.io</h1>
29+
<p><b>*** using normal img-tags ***</b></p>
30+
31+
<h2>width: 100%;</h2>
32+
<p><img src="test-images/1.jpg" alt="A responsive image" style="width:100%;"/></p>
33+
34+
<h2>max-width: 100%;</h2>
35+
<p>
36+
<img src="test-images/2.jpg" alt="A responsive image" style="max-width:100%;"/>
37+
</p>
38+
39+
<h2>max-width: 50%;</h2>
40+
<p>
41+
<img src="test-images/3.jpg" alt="A responsive image" style="max-width:50%"/>
42+
</p>
43+
44+
<h2>width: 100%; max-width: 400px;</h2>
45+
<p>
46+
<img src="test-images/4.jpg" alt="A responsive image" style="width: 100%; max-width:400px"/>
47+
</p>
48+
49+
<h2>width: 100%; min-width: 400px;</h2>
50+
<p>
51+
<img src="test-images/5.jpg" alt="A responsive image" style="width:100%; min-width:400px;"/>
52+
</p>
53+
54+
55+
</body>
56+
</html>

‎lab/responsive.io/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>PoC - responsive.io</title>
6+
7+
<!-- Disable zoom for apps -->
8+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
9+
<style>
10+
html, body {
11+
height: 100%;
12+
margin: 0;
13+
padding: 2em;
14+
}
15+
img {
16+
max-width: 50%;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
22+
<h1>responsive.io - Proof of Concept</h1>
23+
24+
<p>The following pages are identical in order to compare performance.</p>
25+
26+
<p>All original images are 1200px wide.</p>
27+
28+
<p>All images are saved using <em>Photoshop->Save For Web</em> as Jpeg quality 80 (very high).</p>
29+
30+
<p>
31+
<a href="demo-with.html">Demo page WITH responsive.io</a>
32+
</p>
33+
<p>
34+
<a href="demo-without.html">Demo page WITHOUT responsive.io - normal img tags</a>
35+
</p>
36+
37+
</body>
38+
</html>

‎lab/responsive.io/test-images/1.jpg

150 KB
Loading

‎lab/responsive.io/test-images/1.png

780 KB
Loading

‎lab/responsive.io/test-images/1_100.jpg

284 KB
Loading

‎lab/responsive.io/test-images/2.jpg

340 KB
Loading

‎lab/responsive.io/test-images/2_30.jpg

128 KB
Loading

‎lab/responsive.io/test-images/2_50.jpg

192 KB
Loading

‎lab/responsive.io/test-images/2_60.jpg

217 KB
Loading

‎lab/responsive.io/test-images/3.jpg

366 KB
Loading

‎lab/responsive.io/test-images/4.jpg

229 KB
Loading

‎lab/responsive.io/test-images/5.jpg

294 KB
Loading

‎lab/resrcit/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h1>Test: Responsive images</h1>
4949
</header>
5050

5151
<h2>low quality preview</h2>
52-
<img src="http://app.resrc.it/o=10/http://www.14islands.com/lab/resrcit/test.jpg" title="A picture" class="resrc"/>
52+
<img src="http://app.resrc.it/o=10/http://www.14islands.com/lab/resrcit/test.jpg" title="A picture" width="100%" class="resrc"/>
5353

5454
<h2>noscript version</h2>
5555
<noscript data-src="http://www.14islands.com/lab/resrcit/test.jpg" data-width="100%" class="resrc">

0 commit comments

Comments
 (0)