This document discusses responsive image techniques for adaptive web design. It covers using fluid grids with percentages instead of pixels, media queries to load different CSS stylesheets for different screen widths, and setting image max-widths to 100% so they scale responsively. It also discusses feature testing browser width with JavaScript instead of browser sniffing, handling high pixel density "Retina" displays, and techniques like .htaccess rewriting, <picture> element, and JavaScript libraries to serve the most appropriate image assets. The focus is on delivering the right image for each device or screen size to optimize for bandwidth, performance, and user experience.

1. CHRISTOPHER SCHMITT @teleject
ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN
#HEWEBAR 2012

2. RESPONSIVE CODE
it’s all about the divisor
1
2
3

3. RESPONSIVE CODE
it’s all about the divisor
1 Fluid grid, layout
2
3

4. .container {
width: 988px;
}
.column {
width: 144px;
}
http://www.alistapart.com/articles/fluidgrids/

5. .container {
width: 988px; /* 988px / 16px = 61.75em */
}
.column {
width: 144px;
}
http://www.alistapart.com/articles/fluidgrids/

6. .container {
width: 61.75em; /* 988px / 16px = 61.75em */
}
.column {
width: 144px;
}
http://www.alistapart.com/articles/fluidgrids/

7. .container {
width: 61.75em; /* 988px / 16px = 61.75em */
}
.column {
width: 144px; /* 144px / 988px = 14.57% */
}
http://www.alistapart.com/articles/fluidgrids/

8. .container {
width: 61.75em; /* 988px / 16px = 61.75em */
}
.column {
width: 14.57%; /* 144px / 988px = 14.57% */
}
http://www.alistapart.com/articles/fluidgrids/

9. http://ratiostrong.com/

10. RESPONSIVE CODE
it’s all about the divisor
1 Fluid grid, layout
2 Media queries
3

11. <link rel="stylesheet" type="text/css"
href="core.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="print.css" media="print" />
http://www.alistapart.com/articles/responsive-web-design/

12. <link rel="stylesheet" type="text/css"
href="core.css" media="screen" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width:
480px)" href="sm-bowl-porridge.css" />
<link rel="stylesheet" type="text/css"
href="print.css" media="print" />
http://www.alistapart.com/articles/responsive-web-design/

13. <link rel="stylesheet" type="text/css"
href="sm-bowl-porridge.css"
media="screen and (max-device-width: 480px)"/>
<link rel="stylesheet" type="text/css"
href="med-bowl-porridge.css"
media="screen and (max-device-width: 600px)"/>
<link rel="stylesheet" type="text/css"
href="large-bowl-porridge.css"
media="screen and (max-device-width: 768px)"/>
<link rel="stylesheet" type="text/css"
href="xl-bowl-porridge.css"
media="screen and (max-device-width: 910px)"/>
http://www.alistapart.com/articles/responsive-web-design/

14. // 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) { ... }
http://www.alistapart.com/articles/responsive-web-design/

15. FIND YOUR OWN
BREAKPOINTS FOR
YOUR SITE!

16. RESPONSIVE CODE
it’s all about the divisor
1 Fluid grid, layout
2 Media queries
3 Adaptive images

17. img {
max-width: 100%;
height: auto;
}
http://www.alistapart.com/articles/fluid-images/

18. video, object, video, img {
max-width: 100%;
height: auto;
}
http://www.alistapart.com/articles/fluid-images/

19. video, object, video, img {
max-width: 100%;
height: auto;
}
* Unless you’re IE6, use conditional comments:
video, object, video, img {
width: 100%;
height: auto;
}
http://www.alistapart.com/articles/fluid-images/

20. video, object, video, img, iframe {
max-width: 100%;
height: auto;
}
* Unless you are wanting embedded
videos like your YouTubes or your
Vimeos to scale.

21. http://fitvidsjs.com

22. <script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
</script>
http://fitvidsjs.com

23. THE RETINA DISPLAY
PROBLEM-O
#rwdimg

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

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

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

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

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

29. “ Based on feedback from users,
testers and engineers you will
contact large as well as smaller
Web sites and advise them on
how to improve their code for
maximum compatibility and
device independence.”
http://my.opera.com/chooseopera/blog/2010/06/09/
work-for-opera-as-a-web-opener
(cc) flic.kr/p/vUBHv

30. FEATURE TESTING
vs. BROWSER SNIFFING
1
2
3

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

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

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

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

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

36. BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

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

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

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

40. 96 PPI
IF A WINDOWS USER

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

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

43. 240
144
72 PPI

44. “ [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

45. 72 PPI

46. 240

47. RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

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

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

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. IMG
GIMME THAT OLD SCHOOL
1
2
3

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

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

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

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

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

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

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

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

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

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

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

67. @srcset standard?
http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html

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

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

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

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

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

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

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

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

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

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

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

79. 2 TRICK PONY

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

81. http://mediaqueri.es/

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

83. Single pixel GIF

84. Single pixel GIF

85. Single pixel GIF

86. Single pixel GIF

87. Single pixel GIF
$.hisrc.defaults = {
useTransparentGif: true,
http://www.w3.org/community/respimg/2012/04/06/responsive-
content-images-using-a-spacer-png-and-background-image/

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

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

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

91. 2 APPROACHES,
1 SIMPLE SOLUTION.
HEART WEB DESIGN
https://github.com/teleject/hisrc

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

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

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

95. 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;
}
17+ 9+ 11.6+ 5+ 9+

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

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

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

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

102. jQuery check
var checkBrowser =
$('html').hasClass('lt-ie9');
<div class="svgswap">
<img src="example.svg"
data-svgswap="example.png">
</div>
https://github.com/teleject/svg-swap

103. http://raphaeljs.com/

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

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

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

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

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

109. https://github.com/blog/1106-say-hello-to-octicons

110. https://github.com/blog/1106-say-hello-to-octicons
https://github.com/styleguide/css/7.0

111. http://symbolset.com/

113. IMG
GIMME THAT NEW SCHOOL
1
2
3

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

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

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

117. #rwdimg

118. THANK YOU!
CHRISTOPHER SCHMITT @teleject
http://goo.gl/gSYmS
The Non Breaking Space Podcast - http://nonbreakingspace.tv/
Online, live RWD Summit on Aug. 28th - http://RWDSummit.com/
Online, live UX Web Summit on Sept. 26th - http://UXWebSummit.com/
& use “HEWEBAR” code 20% off for both events.