The document discusses the implementation of adaptive images in responsive web design, focusing on techniques such as feature testing versus browser sniffing, and the use of CSS media queries and new HTML elements like <picture> and <img srcset>. It highlights the importance of optimizing images based on browser width, screen resolution, and bandwidth. Additionally, it addresses potential challenges such as double taxation and the impact of modern practices on user experience.

1. FUNKA 2015
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject

2. CHRISTOPHER SCHMITT
@teleject

3. @teleject

4. @teleject
Responsive Media Course
http://goo.gl/fKgZ6I

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

11. y
x

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

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

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

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

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

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

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

25. FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3

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

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

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

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

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

31. BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

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

33. 72PPIHAS
(cc) flic.kr/p/6tjjRP

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

35. 96PPI
IF A

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

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

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

41. 72 PPI

42. 240

43. 240 PPI

44. 240 PPI

45. 72 PPI

47. RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

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

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

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

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

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

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

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

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

56. 1 HiSRC and others
2
3
GIMME THAT OLD SCHOOL
IMG

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

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

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

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

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

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

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

64. BRINGING PROBLEMSBRINGING THE PAIN
1
2
3

65. BRINGING PROBLEMS
1 Double Taxation
2
3
BRINGING THE PAIN

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

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

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

69. http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
2x
= MORE
TIME COSTS

70. https://github.com/crdeutsch/hisrc/tree/v2
BRINGING THE PAIN
1 Double Taxation
2 Browser Preloader
3
BRINGING THE PAIN

71. http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4
“A single-user client SHOULD
NOT maintain more than 2
connections with any server or
proxy.”

72. https://developer.yahoo.com/blogs/ydn/high-performance-sites-
rule-6-move-scripts-bottom-7200.html

73. https://developer.yahoo.com/blogs/ydn/high-performance-sites-
rule-6-move-scripts-bottom-7200.html

74. http://www.stevesouders.com/blog/2013/04/26/i/
MODERN BROWSERS
NOW USE PRELOADER

75. http://www.stevesouders.com/blog/2013/04/26/i/
PRELOADS IMAGES
BEFORE PAGE FULLY
DOWNLOADS

77. BRINGING PROBLEMS
1 Double Taxation
2
One Image, Still Not Ready3
Browser Preloader
BRINGING THE PAIN

78. #rwdimg

80. #rwdimg

81. #rwdimg

82. #rwdimg

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

84. #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

85. #rwdimg

86. https://github.com/igrigorik/http-client-hints

87. 1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS

88. 1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
srcset

89. Basic Image Swap
<img
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

90. Image Fuel
<img
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

91. Image Fuel
<img
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

92. Image Fuel
<img
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

93. Image Fuel
<img
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

94. 1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
srcset attribute
sizes attribute

95. Basic Image Swap
<img sizes="(min-width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

96. Basic Image Swap
<img sizes="(min-width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

97. Basic Image Swap
<img sizes="(min-width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

98. Basic Image Swap
<img sizes="(min-width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/

99. IT’S STILL UP TO
BROWSER TO PICK
WHICH IMAGE TO USE

101. 1
2
3 <picture>
srcset attribute
sizes attribute
RWD IMAGESMEET THE NEW IMAGE ELEMENTS

104. <picture>
<img src="small.jpg" alt=“That awesome
Saints’ touchdown.">

105. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)"
srcset="cropped.jpg">
<img src="small.jpg" alt=“That awesome Saints’
touchdown.">
</picture>

106. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)"
srcset="cropped.jpg">
<img src="small.jpg" alt=“That awesome Saints’
touchdown.">
</picture>

107. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)"
srcset="cropped.jpg">
<img src="small.jpg" alt=“That awesome Saints’
touchdown.">
</picture>

108. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)"
srcset="cropped.jpg">
<img src="small.jpg" alt=“That awesome Saints’
touchdown.">
</picture>

109. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)"
srcset="cropped.jpg">
<img src="small.jpg" alt=“That awesome Saints’
touchdown.">
</picture>

110. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)"
srcset="cropped.jpg">
<img src="small.jpg" alt=“That awesome Saints’
touchdown.">
</picture>

111. USE <PICTURE> FOR
FINER CONTROL, ART
DIRECTION

112. OTHERWISE,
KEEP USING
SRCSET & SIZES

114. http://responsivedesign.is/resources/images/picture-fill

115. https://wordpress.org/plugins/ricg-responsive-images/

116. 1
2
3 <picture>
srcset attribute
sizes attribute
RWD IMAGESMEET THE NEW IMAGE ELEMENTS

118. THANK YOU!CHRISTOPHER SCHMITT
Newsletter - http://eepurl.com/TQAer

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

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

121. http://fittextjs.com/

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

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

125. SVG

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

129. PNG
SVG
9+5+9+ 11.6+17+

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

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

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

133. HTML5 Boilerplate
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"
lang="en">
<![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en">
<![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <!
[endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<!
[endif]-->
<head>

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

135. https://github.com/filamentgroup/grunticon/

136. https://wordpress.org/plugins/scalable-vector-graphics-svg/

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

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

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

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

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

143. http://fontello.com/

144. http://icomoon.io

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

168. (cc) flic.kr/p/64fGf6
COMBO MOVESHIGHLY COMPRESSED JPEGS

169. <img src="rock-climbing-400px.jpg"
srcset="rock-climbing-400px.jpg 400w,
rock-climbing-compressed.jpg 600w"
sizes="100vw"
alt="Mountain Climber" />
http://codepen.io/teleject/full/qpxmr/

170. http://codepen.io/teleject/full/qpxmr/

171. THANK YOU!CHRISTOPHER SCHMITT