1. CHRISTOPHER SCHMITT
@teleject
ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN
PARIS WEB
1

2. @teleject
CHRISTOPHER SCHMITT
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)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
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
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
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 TESTING
vs. BROWSER SNIFFING
1
2
3
24

25. FEATURE TESTING
vs. 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 TESTING
vs. BROWSER SNIFFING
1
Browser width
2
Screen resolution
3
31

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

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

34. 96
PPI
IF A WINDOWS USER
34

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

36. “RETINA” DISPLAYS
300ppi at 12 inches from the eyes
goo.gl/zpkFy
78μm
78μm
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-laptopdesktop-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 TESTING
vs. BROWSER SNIFFING
1
Browser width
2
Screen resolution
3
Bandwidth
46

47. SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
(cc) flic.kr/p/4DziUN
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 TESTING
vs. BROWSER SNIFFING
1
Browser width
2
Screen resolution
3
Bandwidth
53

54. IMG
GIMME THAT OLD SCHOOL
1
2
3
54

55. IMG
GIMME THAT OLD SCHOOL
1
.htaccess
2
3
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" />
4+
8+
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. IMG
GIMME THAT OLD SCHOOL
1
.htaccess
2
<picture> and/or srcset
3
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/polyfillingpicture-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/polyfillingpicture-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-forhigh-resolution-displays-with-the-srcset-image-attribute/
66

67. IMG
GIMME THAT OLD SCHOOL
1
.htaccess
2
<picture> and/or srcset
3
HiSRC
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. Check pixel density...
$.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !==
undefined) {
$.hisrc.devicePixelRatio =
window.devicePixelRatio
};
https://gist.github.com/2428356
73

74. Force speed test
+50k
https://github.com/adamdbradley/foresight.js
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. http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
78

79. 24+
http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
79

80. ALL SOLUTIONS HAVE
2x HTTP REQUESTS
+ JAVASCRIPT
http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
80

81. WORKAROUNDS &
TRICKS in CONTEXT
1
2
3
(cc) flic.kr/p/64fGf6
81

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

83. http://fittextjs.com/
83

84. 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;
}
17+
9+
11.6+
5+
9+
84

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

86. SVG
86

87. 87

88. 88

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

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

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

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

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

94. 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
94

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

96. “
...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.”
96

97. 97

98. 98

99. 99

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

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

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

103. http://fontello.com/
103

104. http://icomoon.io
104

105. 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>
105

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

107. 107

108. 108

109. 109

110. 110

111. OS X Lion
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
iCloud
iOS 5
OSX Lion
iPad 2
iPhone
111

112. !
OS X Lion
"
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
iCloud
iOS 5
OSX Lion
iPad 2
iPhone
112

113. !
↙
OS X Lion
"
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
iCloud
iOS 5
OSX Lion
iPad 2
iPhone
113

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

115. 115

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

117. <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/polyfillingpicture-without-the-overhead/
117

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

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

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

121. EXTREMELY
COMPRESSED PROBLEMS
(cc) flic.kr/p/64fGf6
121

122. 122

123. 123

124. COMBO MOVES
CLOWN CAR TECHNIQUE
+ HIGHLY COMPRESSED JPEGS
(cc) flic.kr/p/64fGf6
124

125. <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);}
https://github.com/estelle/clowncar
}
@media screen and (min-width: 1001px) {
125

126. <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);}
https://github.com/estelle/clowncar
}
@media screen and (min-width: 1001px) {
126

127. 127

128. http://coding.smashingmagazine.com/2013/06/02/clowncar-technique-solving-for-adaptive-images-in-responsiveweb-design/
128

129. Combo Move: SVG
<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
129

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

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

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

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

134. Combo Move:
Compressed JPEG
@media screen and (min-width: 401px),
screen and (max-width: 800px) and (-webkit-min-device-pixelratio: 1.75) {
svg {
background-image: url("extremely-highlycompressed.jpg");
outline: red solid 5px;
}
}
http://codepen.io/teleject/pen/KlzBe
134

135. @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
135

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

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

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

139. COMBO MOVE
DON’T BLAME THE PLAYER
1
No additional HTTP request
2
# of images = 2
3
No JavaScript
http://codepen.io/teleject/pen/KlzBe
139

140. 140

141. 141

142. IMG
GIMME THAT NEW SCHOOL
1
2
3
#rwdimg
142

143. IMG
GIMME THAT NEW SCHOOL
1
simple design for users
2
3
#rwdimg
143

144. IMG
GIMME THAT NEW SCHOOL
1
simple design for users
2
browser, server handshake
3
#rwdimg
144

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

146. #rwdimg
146

147. 147

148. #rwdimg
148

149. #rwdimg
149

150. #rwdimg
150

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

152. Mobile iOS Bookmarks
<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" />
#rwdimg
152

153. #rwdimg
153

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