-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
65 lines (48 loc) · 2.91 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
<html>
<head>
<title>Image test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>The following are CSS background-image examples</h2>
<p>The following images are included in the view by using <code>background-image</code> in CSS. Two different sizes and resolutions. All assets are have the size attribute value of <code>width: 400px</code> and <code>height:40px</code>. When you are seeing an asset with 800px x 80px, this is the 2x assets.</p>
<p>The real proof is when you zoom in on the banner images. If you are on a retina device you will see a clear difference between the 800x80px banners and the 400x40px banners.</p>
<div class="standard-banner"></div>
<div class="hidpi-banner"></div>
<div class="dppx-banner"></div>
<h2>The following uses the HTML <code>img src</code> tag to add the images</h2>
<p>HTML alone gives us few options for managing hidpi assets. The following illustrates using the <code>img</code> tag with no additional size attributes.</p>
<img src="images/banner_1x.png">
<img src="images/banner_2x.png">
<img src="images/banner_2dppx.png">
<p>The following examples use the height and width attribute on the 2x asset only to reduce the physical size.</p>
<img src="images/banner_1x.png">
<img src="images/banner_2x.png" width="400" height="40">
<img src="images/banner_2dppx.png">
<p>The following example illustrates the example using the <code>img</code> tag and CSS to reduce the physical size.</p>
<div class="src-container">
<img src="images/banner_1x.png">
<img src="images/banner_2x.png">
<img src="images/banner_2dppx.png">
</div>
<h2>Technique using <code>-webkit-image-set</code></h2>
<p>The proposed <code>-webkit-image-set</code> will deliver the preferred asset based on device pixel density. Feature works in Safari, Chrome and Opera.</p>
<div class="image-set"></div>
<h2>Technique using media queries</h2>
<p>Deliver the preferred asset based on device pixel density</p>
<div class="image-query"></div>
<h2>Proof that dpi is meaningless</h2>
<p>The following images are completely different. The one on the left is 800x1100 at 10dpi with no jpg compression. The image on the right is also 800x1100 at 72dpi with 100% jpg compression and a 93% reduction in file size. </p>
<p>Difference in image quality, on my Macbook Pro with high retina screen, is minimal at standard viewing distance. Yes, there is some color fragging on the lightsaber and other places, but you have to look close to see that.</p>
<div class="compare">
<img src="images/star-wars.jpg" width="400">
<img src="images/star-wars-optimized.jpg" width="400">
</div>
<h2>The 1:96 CSS fixed ratio</h2>
<p>The following blocks are created using CSS. The Green block is 96x96px. The orange square is 1x1". </p>
<div class="css-inch"></div>
<p>96px square</p>
<div class="css-px-inch"></div>
<p>1in square</p>
</body>
</html>