1. CHRISTOPHER SCHMITT
@teleject
ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN
CSS DEV CONF 2013

2. @teleject
CHRISTOPHER SCHMITT

3. @teleject

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

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

11. y
x

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

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

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

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

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

20. 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. 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. http://telejec.tv/12uYOC4

23. FEATURE TESTING
vs. BROWSER SNIFFING
1
2
3

24. FEATURE TESTING
vs. BROWSER SNIFFING
1
2
3
Browser width

25. 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. 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. 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. (cc) flic.kr/p/8Lo5Gk

29. BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

30. FEATURE TESTING
vs. BROWSER SNIFFING
1
Browser width
2
Screen resolution
3

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

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

33. 96
PPI
IF A WINDOWS USER

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

35. “RETINA” DISPLAYS
300ppi at 12 inches from the eyes
goo.gl/zpkFy
78μm
78μm

37. “
[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. 72 PPI

39. 240

40. 240 PPI

41. 240 PPI

42. 72 PPI

44. RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

45. FEATURE TESTING
vs. BROWSER SNIFFING
1
Browser width
2
Screen resolution
3
Bandwidth

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

47. “
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. “
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. Speed test image
https://github.com/adamdbradley/foresight.js

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

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

53. IMG
GIMME THAT OLD SCHOOL
1
2
3

54. IMG
GIMME THAT OLD SCHOOL
1
2
3
.htaccess

55. 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. Filament .htaccess
<script src="responsiveimgs.js"></script>
<img src="sample-content/running-sml.jpg?
full=sample-content/running-lrg.jpg" />
4+
8+

57. “
...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. http://adaptive-images.com/

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

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

61. 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. <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. ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>

64. @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. https://www.webkit.org/blog/2910/improved-support-forhigh-resolution-displays-with-the-srcset-image-attribute/

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

67. 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. 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. 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. SERIES OF CHECKS TO
FIND OUT RESPONSIVE
PATH FOR IMAGES...

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

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

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

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

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

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

77. http://css-tricks.com/whichresponsive-images-solutionshould-you-use/

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

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

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

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

82. http://fittextjs.com/

83. 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. WORKAROUNDS &
TRICKS in CONTEXT
1
background-size: auto
2
SVG
3
(cc) flic.kr/p/64fGf6

85. SVG

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

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

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

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

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

93. 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. WORKAROUNDS &
TRICKS in CONTEXT
1
background-size: auto
2
SVG
3
font-based solutions
(cc) flic.kr/p/64fGf6

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

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

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

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

102. http://fontello.com/

103. http://icomoon.io

104. 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. WORKAROUNDS &
TRICKS in CONTEXT
1
background-size: 100%
2
SVG
3
font-based solutions
4
compressed JPEGs
(cc) flic.kr/p/64fGf6

110. 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. !
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. !
↙
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. (cc) flic.kr/p/64fGf6

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

116. <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. 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. 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. One Image, One IMG
<img src="rock-climber.jpg" alt="" />

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

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

124. <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. <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) {

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

128. 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. <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. Combo Move: SVG
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
http://codepen.io/teleject/pen/KlzBe

131. 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. 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. 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. @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. http://codepen.io/teleject/pen/KlzBe

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

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

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

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

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

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

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

145. #rwdimg

147. #rwdimg

148. #rwdimg

149. #rwdimg

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

151. 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. #rwdimg

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