This document discusses adaptive images in responsive web design. It begins by introducing the speaker, Christopher Schmitt, and his credentials. It then explores using the browser's user agent string and feature detection to determine screen resolution and bandwidth rather than browser sniffing. The document discusses using CSS media queries, jQuery, and the picture element to serve adaptive images. It also proposes some workaround techniques like background sizing and SVG to improve responsive images.

1. #WCATX2013
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject

2. CHRISTOPHER SCHMITT
@teleject

3. @teleject
http://CSSsummit.com/

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

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

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

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

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

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

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

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

16. 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/

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

18. FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3

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

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

21. 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/

22. 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) { ... }

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

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

25. BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

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

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

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

29. 96PPI
IF A WINDOWS USER

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

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

33. [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

34. 72 PPI

35. 240

36. 240 PPI

37. 240 PPI

38. 72 PPI

39. RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

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

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

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

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

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

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

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

47. IMGGIMME THAT OLD SCHOOL
1
2
3

48. 1 .htaccess
2
3
IMGGIMME THAT OLD SCHOOL

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

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

51. ...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/

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

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

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

55. 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/

56. <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/

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

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

59. 1 .htaccess
2 <picture>
3 HiSRC
GIMME THAT OLD SCHOOL
IMG

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

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

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

63. 2 TRICK PONY

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

65. http://mediaqueri.es/

66. 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) { ... }

67. Single pixel GIF

68. Single pixel GIF

69. Single pixel GIF

70. Single pixel GIF

71. $.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

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

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

74. 2 APPROACHES,
1 SIMPLE SOLUTION.
https://github.com/teleject/hisrc

75. WORKAROUNDSTRICKS
1
2
3
&
(cc) flic.kr/p/64fGf6

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

77. http://fittextjs.com/

80. 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+

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

82. SVG

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

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

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

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

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

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

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

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

93. http://fontello.com/

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

95. WORKAROUNDSTRICKS
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
4 compressed JPEGs

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

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

102. 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
!
" ←
↑

103. 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
! ↙
" ← ←
↗ ↑ ↖
↑ ↖

104. 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
↑ ↗
← " "
↙ ! ↘
! ↘

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

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

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

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

110. <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/

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

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

117. IMGGIMME THAT NEW SCHOOL
1
2
3

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

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

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

121. #rwdimg

122. #rwdimg

123. #rwdimg

124. #rwdimg

125. #rwdimg

126. #rwdimg

127. #rwdimg

128. #rwdimg

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

130. #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" />
<link rel="shortcut icon" href="/assets/favicon.ico" />

131. #rwdimg

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