This repository has been archived by the owner on Jun 10, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (132 loc) · 6.94 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><picture> patterns</title>
<link href="./style/css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="header header--home">
<div class="container">
<h1><code><picture></code> patterns</h1>
</div>
</header>
<main class="container">
<div class="intro">
<p>A collection of code patterns and demonstrations using <code>srcset</code> combined with the HTML <code><img></code> and <code><picture></code> elements</p>
</div>
<div class="grid grid--center">
<div class="col col-1">
<div class="tile">
<h2 class="tile__title"><img src="img/icon-basics.svg" class="icon" alt="Icon"> The basics</h2>
<p><em>This is a rough outline of what will be in this section:</em></p>
<div class="grid">
<dl class="col col-1 col-1-2--s">
<dt><a href="#coming-soon">The challenge with images in static vs responsive sites</a></dt>
<dt><a href="#coming-soon">A solution for responsive images using JavaScript</a></dt>
<dt><a href="#coming-soon">Revisiting the problem and looking for a better solution</a></dt>
</dl>
<dl class="col col-1 col-1-2--s">
<dt><a href="#coming-soon">How <code>srcset</code> and <code><picture></code> can help us</a></dt>
<dt><a href="#coming-soon">Caveats and limitations</a></dt>
</dl>
</div>
<p><em>This project is a work in progress.</em> The basics, more examples and resources will be added soon along with Picturefill-ed versions of each example. Browser support also needs updating and testing, including Safari 9.1 / iOS 9.3 now that it supports the full spec.</p>
</div>
</div>
</div>
<hr>
<div class="grid grid--balance-height grid--center">
<div class="col col-1 col-1-2--s">
<div class="tile">
<h2 class="tile__title"><img src="img/icon-2x.svg" class="icon" alt="Icon"> <code><img></code> and resolution changing</h2>
<dl>
<dt><a href="img-srcset-x-only/">Using <code>srcset -x</code> to swap resolution</a></dt>
<dd>Source image is picked based on screen density. Good for fixed-width images and not much else.</dd>
<dt><a href="img-srcset-w-only/">Using <code>srcset -w</code> to pick the best size</a></dt>
<dd>Source image is picked intelligently based on available widths, screen density and display size.</dd>
<dt><a href="img-srcset-w-multiple/">Using <code>srcset -w</code> to pick the best size, and the image changes size across breakpoints</a></dt>
<dd>Source image is picked intelligently based on available widths, screen density and display size.</dd>
<dt><a href="img-srcset-w-incomplete/">Testing <code>srcset -w</code> syntax, when no <code>source</code> attribute is set</a></dt>
<dd>A stress test for browsers in how they handle this non-spec situation.</dd>
</dl>
</div>
</div>
<div class="col col-1 col-1-2--s">
<div class="tile">
<h2 class="tile__title"><img src="img/icon-art-direction.svg" class="icon" alt="Icon"> <code><picture></code> and art direction</h2>
<dl>
<dt><a href="picture-srcset-x/">Using <code>-x</code> syntax to set density</a></dt>
<dd>Allow different sources with density support.</dd>
<dt><a href="picture-srcset-w/">Using <code>-w</code> syntax to set density</a></dt>
<dd>Allow the browser to more intelligently pick the best source based on available widths, screen density and display size at each breakpoint.</dd>
<dt><a href="picture-simple-art-direction/">Simple art direction changes</a></dt>
<dd>When images need to either display differently cropped sources, or change aspect across breakpoints, art direction is needed.</dd>
<dt><a href="picture-complex-art-direction-x-syntax/">Complex art direction with <code>-x</code> syntax</a></dt>
<dd>Using <code>-x</code> syntax to enforce explicit source selection with complex image elements, changing aspect and scale multiple times.</dd>
<dt><a href="picture-complex-art-direction-w-syntax/">Complex art direction with <code>-w</code> syntax</a></dt>
<dd>Using <code>-w</code> syntax to allow permissive source selection with complex image elements, changing aspect and scale multiple times.</dd>
</dl>
</div>
</div>
<div class="col col-1">
<div class="tile">
<h2 class="tile__title"><img src="img/icon-other.svg" class="icon" alt="Icon"> Other examples</h2>
<dl>
<dt><a href="picture-source-type/">Using <code><picture></code> to choose the best image format types</a></dt>
<dd>Provide different formats based on browser support, with fallbacks provided.</dd>
</dl>
</div>
</div>
</div>
<hr>
<div class="grid grid--balance-height grid--center">
<div class="col col-1 col-1-2--s">
<div class="tile">
<h2 class="tile__title">Further Resources</h2>
<ul>
<li><a href="http://w3c.github.io/html/semantics-embedded-content.html#the-picture-element">Official W3C <code><picture></code> specification</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture">MDN <code><picture></code> specification and examples</a></li>
<li><a href="https://responsiveimages.org/">RICG homepage</a></li>
<li><a href="http://caniuse.com/#feat=picture">Can I Use <code><picture></code> support</a></li>
<li><a href="http://caniuse.com/#feat=srcset">Can I Use <code>srcset</code> support</a></li>
<li><a href="https://github.com/scottjehl/picturefill">Picturefill <code><picture></code> and <code>srcset</code> polyfill</a></li>
</ul>
</div>
</div>
<div class="col col-1 col-1-2--s">
<div class="tile">
<h2 class="tile__title">Further Reading</h2>
<ul>
<li><a href="https://ericportis.com/posts/2014/srcset-sizes/">srcset and sizes – Eric Portis</a></li>
<li><a href="https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/">Responsive images done right – Eric Portis on Smashing Magazine</a></li>
<li><a href="http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015">Tutsplus quick tips</a></li>
</ul>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="inset">
<p>Made with ♥ by <a href="https://twitter.com/mikehdt">@mikehdt</a> – because projects without heart aren’t worth using amirite?</p>
</div>
</div>
</footer>
<script>
WebFontConfig = {
google: { families: [ 'Titillium+Web:400,700:latin', 'Roboto+Mono:400,700:latin' ] }
};
(function(){
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</body>
</html>