The document discusses adaptive images in responsive web design. It begins by explaining why the browser should be asked for information like screen resolution and bandwidth instead of doing speed tests. It then covers different techniques for adaptive images like using the browser width, screen resolution, bandwidth tests, feature testing vs browser sniffing, and CSS media queries. It also discusses workarounds like using the .htaccess file, <picture> element, and HiSRC plugin to serve responsive images. The document advocates for newer approaches that provide a simple user experience while allowing the browser and server to communicate information.

1. CHRISTOPHER SCHMITT @teleject
ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN
RWD SUMMIT 2012

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

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

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

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

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

11. FEATURE TESTING
vs. BROWSER SNIFFING
1
2
3

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

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

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

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

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

17. BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

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

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

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

21. 96 PPI
IF A WINDOWS USER

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

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

24. 240
144
72 PPI

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

26. 72 PPI

27. 240

28. 240 PPI

29. 240 PPI

30. 72 PPI

31. RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

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

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

34. “ 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

35. “ 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

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

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

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

39. IMG
GIMME THAT OLD SCHOOL
1
2
3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

62. 2 TRICK PONY

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

64. http://mediaqueri.es/

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

66. Single pixel GIF

67. Single pixel GIF

68. Single pixel GIF

69. Single pixel GIF

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

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

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

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

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

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

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

77. http://fittextjs.com/

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

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

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

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

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

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

84. http://raphaeljs.com/

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

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

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

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

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

91. IMG
GIMME THAT NEW SCHOOL
1
2
3

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

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

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

95. #rwdimg

96. #rwdimg

97. #rwdimg

98. #rwdimg

99. #rwdimg

100. #rwdimg

101. #rwdimg

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

103. <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" />
#rwdimg

104. #rwdimg

105. THANK YOU!
CHRISTOPHER SCHMITT @teleject
http://goo.gl/gSYmS
The Non Breaking Space Podcast - http://nonbreakingspace.tv/