The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.

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

2. @teleject
CHRISTOPHER SCHMITT

3. @teleject

4. @teleject
Responsive Media Course

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

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

12. y
x

16. http://cssspecificity.com

17. http://cssspecificity.com

18. http://cssspecificity.com

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

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

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

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

23. Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
(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
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/

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

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

27. FEATURE TESTING vs. BROWSER SNIFFING
1
2
3

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

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

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

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

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

33. BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

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

35. 72PPI
HAS
(cc) flic.kr/p/6tjjRP

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

37. 96PPI
IF A

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

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

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

42. 72 PPI

43. 240

44. 240 PPI

45. 240 PPI

46. 72 PPI

48. RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

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

50. SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
(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.”
“
(cc) flic.kr/p/4DziUN

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

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

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

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

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

57. IMG GIMME THAT OLD SCHOOL
1
2
3

58. IMG GIMME THAT OLD SCHOOL
1 srcset & sizes
2
3

59. Basic Image Swap
<img src="headshot_500px.jpg"
srcset="headshot_650px.jpg 1.5x,
headshot_1000px.jpg 2x"
width="500" alt="Headshot">

60. Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
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/

61. Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
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/

62. Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
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/

63. Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw"
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/

64. Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw"
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/

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

66. BUT YOU WILL USE
THESE ATTRIBUTES
1,000% OF THE TIME*
* Science

67. GIMME THAT OLD SCHOOL IMG
1 srcset & sizes
2 <picture>
3

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

69. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt=“That awesome Saints touchdown.">
</picture>
38+ 33+ 25+ ? ?

70. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt=“That awesome Saints touchdown.">
</picture>
38+ 33+ 25+ ? ?

71. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt=“That awesome Saints touchdown.">
</picture>
38+ 33+ 25+ ? ?

72. <picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt=“That awesome Saints touchdown.">
</picture>
38+ 33+ 25+ ? ?

73. USE <PICTURE>
POWER TO SOLVE ART
DIRECTION

74. & ONLY WHEN ALL
OTHER CSS-y OPTIONS
HAVE BEEN EXPLORED

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

76. GIMME THAT OLD SCHOOL IMG
1 srcset & sizes
2 <picture>
3 HiSRC and more

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

92. http://fittextjs.com/

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

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

95. SVG

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

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

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

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

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

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

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

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

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

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

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

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

113. http://fontello.com/

114. http://icomoon.io

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

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

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

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

123. X Lion! ↙
" ← ←
↗ ↑ ↖
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
↑ ↖
iCloud iOS 5 OSX Lion iPad 2 iPhone

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

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

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

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

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

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

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

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

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

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

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

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

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

142. #rwdimg

144. #rwdimg

145. #rwdimg

146. #rwdimg

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

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

149. #rwdimg

150. THANK YOU! CHRISTOPHER SCHMITT
Sass Summit - http://SassSummit.com