1. AUSTIN WORDPRESS 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/

6. @teleject
http://JavaScriptSummit.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. https://github.com/igrigorik/http-client-hints

27. FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3

28. FEATURE TESTINGvs. 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 TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3

35. 72PPIHAS
(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
goo.gl/zpkFy
78μm
“RETINA” DISPLAYS300ppi at 12 inches from the eyes

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

43. 72 PPI

44. 240

45. 240 PPI

46. 240 PPI

47. 72 PPI

49. RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

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

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

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

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

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

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

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

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

58. IMGGIMME THAT OLD SCHOOL
1
2
3

59. 1 srcset & sizes
2
3
IMGGIMME THAT OLD SCHOOL

60. Basic Image Swap
<img src="headshot_500px.jpg"
srcset="headshot_650px.jpg 1.5x,
headshot_1000px.jpg 2x"
width="500" alt="Headshot">
http://caniuse.com/#search=srcset

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

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

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

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

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

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

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

73. <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>
25+38+ 33+ ? ?

74. <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>
25+38+ 33+ ? ?

75. <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>
25+38+ 33+ ? ?

76. <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>
25+38+ 33+ ? ?

77. USE <PICTURE>
POWER TO SOLVE ART
DIRECTION

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

96. http://fittextjs.com/

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

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

99. SVG

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

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

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

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

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

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

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

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

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

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

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

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

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

118. http://fontello.com/

119. http://icomoon.io

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

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

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

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

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

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

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

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

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

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

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

138. (cc) flic.kr/p/64fGf6
COMBO MOVESCLOWN CAR TECHNIQUE
+ HIGHLY COMPRESSED JPEGS

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

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

143. IMGGIMME THAT NEW SCHOOL
1
2
3
#rwdimg

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

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

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

147. #rwdimg

149. #rwdimg

150. #rwdimg

151. #rwdimg

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

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

154. #rwdimg

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