1. @PEACHPIT WEBINAR
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
1

2. CHRISTOPHER SCHMITT
@teleject
2

3. @teleject
3

4. @teleject
http://nonbreakingspace.tv/
4

5. @teleject
http://cssdevconf.com/
5

6. @teleject
http://artifactconf.com/
6

7. 7

8. 8

9. 9

10. 10

11. 11

12. y
x
12

13. 13

14. 14

15. 15

16. WHY DON’T WE ASK
THE BROWSER?
(cc) flic.kr/p/vUBHv
16

17. alert("User-agent header sent: " + navigator.userAgent);
17

18. alert("User-agent header sent: " + navigator.userAgent);
18

19. Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
19

20. Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
20

21. Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
21

22. Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://webaim.org/blog/user-agent-string-history/
(cc) flic.kr/p/vUBHv
22

23. http://telejec.tv/12uYOC4
23

24. FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3
24

25. FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2
3
25

26. A scripting approach
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
26

27. The jQuery approach
// returns width of browser viewport
$(window).width();
// returns height of browser viewport
$(window).height();
// returns width of HTML document
$(document).width();
// returns height of HTML document
$(document).height();
http://api.jquery.com/width/ & http://api.jquery.com/height/
27

28. CSS media queries
// default, mobile-1st CSS rules devices go here
@media screen and (min-width: 480px) { ... }
@media screen and (min-width: 600px) { ... }
@media screen and (min-width: 768px) { ... }
@media screen and (min-width: 910px) { ... }
28

29. (cc) flic.kr/p/8Lo5Gk
29

30. BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS
30

31. FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3
31

32. 72PPIHAS SERVED US WELL
(cc) flic.kr/p/6tjjRP
32

33. 72 points-per-inch =
72 pixels-per-inch
33

34. 96PPI
IF A WINDOWS USER
34

35. 72 points-per-inch
x [1+(1/3)]
= 96 PPI
35

36. 78μm
goo.gl/zpkFy
78μm
“RETINA” DISPLAYS300ppi at 12 inches from the eyes
36

37. 37

38. [In 2013, Intel sees their
product line] offer a higher
resolution experience than a
top-of-the-line 1080p HDTV.”
“
http://liliputing.com/2012/04/intel-retina-laptop-
desktop-displays-coming-in-2013.html
38

39. 72 PPI
39

40. 240
40

41. 240 PPI
41

42. 240 PPI
42

43. 72 PPI
43

44. 44

45. RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES
45

46. FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
46

47. (cc) flic.kr/p/4DziUN
SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
47

48. Testing for speed of an
internet connection is like
stepping in front of a car to see
how fast it is.”
“
(cc) flic.kr/p/4DziUN
48

49. Testing for speed of an
internet connection is like
stepping in front of a car to see
how fast it is.”
“
But, Christopher, you only
have to test it once.”“
(cc) flic.kr/p/4DziUN
49

50. Speed test image
https://github.com/adamdbradley/foresight.js
50

51. Speed test image
+50k
https://github.com/adamdbradley/foresight.js
51

52. Native speed test
// @Modernizr's network-connection.js
connection = navigator.connection || {
type: 0 }, // polyfill
isSlowConnection = connection.type == 3
|| connection.type == 4
| /^[23]g$/.test(connection.type);
http://davidbcalhoun.com/2010/using-navigator-connection-android
52

53. FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
53

54. IMGGIMME THAT OLD SCHOOL
1
2
3
54

55. 1 .htaccess
2
3
IMGGIMME THAT OLD SCHOOL
55

56. Filament .htaccess
# Responsive Images
# Mobile-First images that scale responsively and responsibly
# Copyright 2010, Scott Jehl, Filament Group, Inc
# Dual licensed under the MIT or GPL Version 2 licenses.
# //Start Responsive Images
RewriteEngine On
# direct image requests to temp
RewriteCond %{QUERY_STRING} full=(.*)&?
RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L]
# ignore trap for non-image requests, rewrite URL without trap segment
RewriteRule (.*)rwd-router/(.*)$ $1$2
# //End Responsive Images
https://github.com/filamentgroup/Responsive-Images
56

57. Filament .htaccess
<script src="responsiveimgs.js"></script>
<img src="sample-content/running-sml.jpg?
full=sample-content/running-lrg.jpg" />
8+4+
57

58. ...the server has no way to
know what resolution the
client’s device is, so it can’t
send the appropriately sized
embeded images.”
“
http://mattwilcox.net/archive/entry/id/1053/
58

59. http://adaptive-images.com/
59

60. ADD .HTACCESS, JS,
PHP 5, GD lib*, &
THEN <IMG>
60

61. 1 .htaccess
2 <picture> and/or srcset
3
GIMME THAT OLD SCHOOL
IMG
61

62. media queries in HTML
<video controls>
<source type="video/mp4" src="video/windowsill_small.mp4"
media="all and (max-width: 480px), all and (max-device-width:
480px)">
<source type="video/webm" src="video/windowsill_small.webm"
media="all and (max-width: 480px), all and (max-device-width:
480px)">
<source type="video/mp4" src="video/windowsill.mp4">
<source type="video/webm" src="video/windowsill.webm">
<!-- proper fallback content goes here -->
</video>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
picture-without-the-overhead/
62

63. <picture> patch
<picture alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<!-- <source src="small.jpg"> -->
<source src="small.jpg">
<!-- <source src="medium.jpg" media="(min-width: 400px)"> -->
<source src="medium.jpg" media="(min-width: 400px)">
<!-- <source src="large.jpg" media="(min-width: 800px)"> -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- Fallback content for non-JS browsers. Same src as the initial
source element. -->
<noscript><img src="small.jpg" alt="A giant stone face at The Bayon
temple in Angkor Thom, Cambodia"></noscript>
</picture>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
picture-without-the-overhead/
63

64. ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>
64

65. @srcset standard?
<h1><img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x,
banner-phone.jpeg 100w,
banner-phone-HD.jpeg 100w 2x">
</h1>
http://www.whatwg.org/specs/web-apps/current-work/multipage/
embedded-content-1.html#attr-img-srcset
65

66. https://www.webkit.org/blog/2910/improved-support-for-
high-resolution-displays-with-the-srcset-image-attribute/
66

67. 1 .htaccess
2 <picture> and/or srcset
3 HiSRC
GIMME THAT OLD SCHOOL
IMG
67

68. Set, forget it HiSRC
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.7.2/jquery.min.js"></script>
<script src="hisrc.js"></script>
<script>
$(document).ready(function(){
$(".hisrc img").hisrc();
});
</script>
https://github.com/teleject/hisrc
68

69. Set, forget it HiSRC
<div class="hisrc">
<img src="halloween-mobile-1st.png"
data-1x="halloween-x1.png"
data-2x="halloween-x2.jpg"
alt="Celebrating Halloween in style" />
</div>
69

70. Set, forget it HiSRC
<div class="hisrc">
<img src="halloween-mobile-1st.png"
data-1x="halloween-x1.png"
data-2x="halloween-x2.jpg"
alt="Celebrating Halloween in style" />
</div>
70

71. SERIES OF CHECKS TO
FIND OUT RESPONSIVE
PATH FOR IMAGES...
71

72. DO NATIVE SPEED
TEST FOR MOBILE
DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
72

73. $.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !==
undefined) {
$.hisrc.devicePixelRatio =
window.devicePixelRatio
};
Check pixel density...
https://gist.github.com/2428356
73

74. +50k
https://github.com/adamdbradley/foresight.js
Force speed test
74

75. LESS THAN 4G MEANS
MOBILE IMAGES LEFT
IN PLACE
75

76. BETWEEN 4G &
300 Kbps MEANS
REGULAR DESKTOP
IMAGES SWAPPED IN
76

77. FAST SPEED & HIGH
DENSITY, RETINA
IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
77

78. 2 TRICK PONY
78

79. CSS IS CORE.
WE USE CSS MEDIA
QUERIES FOR DESIGN
79

80. http://mediaqueri.es/
80

81. CSS media queries
// default, mobile-1st CSS rules devices go here
@media screen and (min-width: 480px) { ... }
@media screen and (min-width: 600px) { ... }
@media screen and (min-width: 768px) { ... }
@media screen and (min-width: 910px) { ... }
81

82. Single pixel GIF
82

83. Single pixel GIF
83

84. Single pixel GIF
84

85. Single pixel GIF
85

86. $.hisrc.defaults = {
useTransparentGif: true,
http://www.w3.org/community/respimg/2012/04/06/responsive-
content-images-using-a-spacer-png-and-background-image/
Single pixel GIF
86

87. $.hisrc.defaults = {
useTransparentGif: true,
transparentGifSrc: 'http://
example.com/spg.gif',
6+5+9+ 11.6+17+
Single pixel GIF
87

88. $.hisrc.defaults = {
useTransparentGif: true,
transparentGifSrc: 'data:image/
gif;base64,R0lGODlhAQABAIAAAMz/
AAAAACH5BAEAAAAALAAAAAABAAE
AAAICRAEAOw==',
8+5+9+ 11.6+17+
Single pixel GIF
88

89. http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
89

90. 24+http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
90

91. http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
ALL SOLUTIONS HAVE
2x HTTP REQUESTS
+ JAVASCRIPT
91

92. WORKAROUNDSTRICKS in CONTEXT
1
2
3
&
(cc) flic.kr/p/64fGf6
92

93. WORKAROUNDSTRICKS
1 background-size: 100%
2
3
&
(cc) flic.kr/p/64fGf6
93

94. http://fittextjs.com/
94

95. background-size: 100%
<a href="example.com/link">Download on Github</a>
.download a {
padding: .095em .8em;
background: url(../img/arrow.png) no-repeat;
background-size: 100%;
margin-left: .4em;
-webkit-transition: margin 0.15s ease-out;
-moz-transition: margin 0.15s ease-out;
text-decoration: none;
}
9+5+9+ 11.6+17+
95

96. WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG
3
&
(cc) flic.kr/p/64fGf6
96

97. SVG
97

98. 98

99. 99

100. Native SVG
http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
100

101. PNG 16kb
SVG 7kb
9+5+9+ 11.6+17+
101

102. http://petercollingridge.appspot.com/svg-optimiser
102

103. https://github.com/svg/svgo-gui
103

104. https://github.com/svg/svgo-gui
104

105. Modernizr check
if(!Modernizr.svg){
var images =
document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++){
var src = images[i].src.split(".");
images[i].src = src[0] + ".png";
}
}
http://stackoverflow.com/questions/12846852/
svg-png-extension-switch
105

106. WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG (Clown Car)
3
&
(cc) flic.kr/p/64fGf6
106

107. WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
107

108. ...if you use <meta
charset="utf-8"> (you should
be for HTML5), you’re adding
common Unicode characters
like and ✆, and you don’t
need a specific font’s version...
just copy and paste them into
your HTML.”
“
108

109. 109

110. 110

111. 111

112. Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
112

113. Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
avg file size
40kb/per font
113

114. http://css-tricks.com/examples/IconFont/
114

115. http://fontello.com/
115

116. http://icomoon.io
116

117. Font-based icons
<style>
[data-icon]:before {
font-family: 'icon-font';
content: attr(data-icon);
}
</style>
<a href="http://example.com/cloud/save/">
<span data-icon="C" aria-hidden="true"></span>
Save to Cloud
</a>
117

118. WORKAROUNDSTRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
4 compressed JPEGs
118

119. 119

120. 120

121. 121

122. 122

123. iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
Multi-Touch gestures, Mission Control,
full-screen apps, and Launchpad, OS X
Lion takes the Mac further than ever.
Learn More
X Lion
123

124. iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
Multi-Touch gestures, Mission Control,
full-screen apps, and Launchpad, OS X
Lion takes the Mac further than ever.
Learn More
X Lion
!
" ←
↑
124

125. iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
Multi-Touch gestures, Mission Control,
full-screen apps, and Launchpad, OS X
Lion takes the Mac further than ever.
Learn More
X Lion
! ↙
" ← ←
↗ ↑ ↖
↑ ↖
125

126. iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
Multi-Touch gestures, Mission Control,
full-screen apps, and Launchpad, OS X
Lion takes the Mac further than ever.
Learn More
X Lion
↑ ↗
← " "
↙ ! ↘
! ↘
126

127. (cc) flic.kr/p/64fGf6
127

128. 128

129. 446kb < 8,755.2kb
(cc) flic.kr/p/64fGf6
0% vs 100%
129

130. Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
Large
512x768 1x 503kb
Large
640x960 2x 746kb
Large
320x480 1x 223kb
Medium
500x750 2x 485kb
Medium
250x375 1x 145kb
130

131. Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
Large
512x768 1x 503kb
Large
640x960 2x 746kb
Large
320x480 1x 223kb
Medium
500x750 2x 485kb
Medium
250x375 1x 145kb
131

132. <picture> Patch
<picture alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<!-- <source src="small.jpg"> -->
<source src="small.jpg">
<!-- <source src="medium.jpg" media="(min-width: 400px)"> -->
<source src="medium.jpg" media="(min-width: 400px)">
<!-- <source src="large.jpg" media="(min-width: 800px)"> -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- Fallback content for non-JS browsers. Same src as the initial
source element. -->
<noscript><img src="small.jpg" alt="A giant stone face at The Bayon
temple in Angkor Thom, Cambodia"></noscript>
</picture>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
picture-without-the-overhead/
132

133. <img src="rock-climber.jpg" alt="" />
One Image, One IMG
133

134. (cc) flic.kr/p/64fGf6
EXTREMELYCOMPRESSED PROBLEMS
134

135. 135

136. 136

137. 137

138. Clown Car SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid
meet">
<title>Clown Car Technique</title>
<style>
svg {
background-size: 100% 100%; background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {background-image: url(images/small.png");}
}
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {background-image: url(images/medium.png);}
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
svg {background-image: url(images/big.png);}
}
@media screen and (min-width: 1001px) {
svg {background-image: url(images/huge.png);}
}
</style>
</svg>
https://github.com/estelle/clowncar
138

139. Clown Car SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid
meet">
<title>Clown Car Technique</title>
<style>
svg {
background-size: 100% 100%; background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {background-image: url(images/small.png");}
}
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {background-image: url(images/medium.png);}
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
svg {background-image: url(images/big.png);}
}
@media screen and (min-width: 1001px) {
svg {background-image: url(images/huge.png);}
}
</style>
</svg>
https://github.com/estelle/clowncar
139

140. 140

141. http://coding.smashingmagazine.com/2013/06/02/clown-
car-technique-solving-for-adaptive-images-in-responsive-
web-design/
141

142. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231"
preserveAspectRatio="xMidYMid meet" tabindex="-1"
aria-label="the aria label is being read" role="img"
title="the title attribute of the SVG is being read">
<title>Clown Car Technique</title>
<style>
</style>
</svg>
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
142

143. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231"
preserveAspectRatio="xMidYMid meet" tabindex="-1"
aria-label="the aria label is being read" role="img"
title="the title attribute of the SVG is being read">
<title>Clown Car Technique</title>
<style>
</style>
<foreignObject>
<!--[if lte IE 8]>
<img src="../images/mobile-first.png" width="375" height="231"
alt="put alt attribute text here"/>
<![endif]-->
</foreignObject>
</svg>
http://codepen.io/teleject/pen/KlzBe
143

144. svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
144

145. svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {
background-image: url("http://s.cdpn.io/168/pic-Medium-375x231-
@1x-72ppi.jpg"); outline: green solid 5px;
}
}
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
145

146. @media screen and (min-width: 401px),
screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio:
1.75) {
svg {
background-image: url("http://s.cdpn.io/168/pic-
Extreme-2276x1400-72ppi.jpg");
outline: red solid 5px;
}
}
http://codepen.io/teleject/pen/KlzBe
Combo Move:
Compressed JPEG
146

147. @media screen and (max-width: 400px) {
svg {
width: 375px;
height: 231px; } }
@media screen and (min-width: 401px) {
svg {
width: 750px;
height: 462px; } }
svg {
outline: 5px solid black; }
http://codepen.io/teleject/pen/KlzBe
Combo Move: CSS
147

148. http://codepen.io/teleject/pen/KlzBe
148

149. http://codepen.io/teleject/pen/KlzBe
149

150. http://codepen.io/teleject/pen/KlzBe
150

151. COMBO MOVEDON’T BLAME THE PLAYER
1
2
3
No additional HTTP request1
# of images = 2
No JavaScript
http://codepen.io/teleject/pen/KlzBe
151

152. 152

153. 153

154. IMGGIMME THAT NEW SCHOOL
1
2
3
#rwdimg
154

155. IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
#rwdimg
1
155

156. IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
#rwdimg
2
156

157. IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
same, several formats
#rwdimg
3
157

158. #rwdimg
158

159. #rwdimg
159

160. #rwdimg
160

161. #rwdimg
161

162. #rwdimg
162

163. #rwdimg
163

164. #rwdimg
164

165. #rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />
Favicon
165

166. #rwdimg
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed"
href="apple-touch-icon-precomposed.png" />
Mobile iOS Bookmarks
166

167. #rwdimg
167

168. THANK YOU!CHRISTOPHER SCHMITT @teleject
The Non Breaking Space Podcast - http://nonbreakingspace.tv/
168