[funka] adaptive images in responsive web design
TRANSCRIPT
![Page 1: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/1.jpg)
FUNKA 2015
ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
![Page 2: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/2.jpg)
CHRISTOPHER SCHMITT@teleject
![Page 3: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/3.jpg)
@teleject
![Page 6: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/6.jpg)
![Page 7: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/7.jpg)
![Page 8: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/8.jpg)
![Page 9: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/9.jpg)
![Page 10: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/10.jpg)
![Page 11: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/11.jpg)
y
x
![Page 12: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/12.jpg)
![Page 13: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/13.jpg)
![Page 14: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/14.jpg)
![Page 15: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/15.jpg)
![Page 16: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/16.jpg)
![Page 17: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/17.jpg)
![Page 19: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/19.jpg)
alert("User-agent header sent: " + navigator.userAgent);
![Page 20: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/20.jpg)
alert("User-agent header sent: " + navigator.userAgent);
![Page 21: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/21.jpg)
Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
![Page 22: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/22.jpg)
Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
![Page 23: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/23.jpg)
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/
![Page 24: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/24.jpg)
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.3http://webaim.org/blog/user-agent-string-history/
(cc) flic.kr/p/vUBHv
![Page 25: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/25.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3
![Page 26: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/26.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2
3
![Page 27: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/27.jpg)
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
![Page 28: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/28.jpg)
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/
![Page 29: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/29.jpg)
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) { ... }
![Page 31: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/31.jpg)
BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
![Page 32: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/32.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3
![Page 34: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/34.jpg)
72 points-per-inch = 72 pixels-per-inch
![Page 35: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/35.jpg)
96PPIIF A
![Page 36: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/36.jpg)
72 points-per-inch x [1+(1/3)] = 96 PPI
![Page 38: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/38.jpg)
![Page 39: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/39.jpg)
[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
![Page 40: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/40.jpg)
![Page 41: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/41.jpg)
72 PPI
![Page 42: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/42.jpg)
240
![Page 43: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/43.jpg)
240 PPI
![Page 44: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/44.jpg)
240 PPI
![Page 45: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/45.jpg)
72 PPI
![Page 46: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/46.jpg)
![Page 47: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/47.jpg)
RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
![Page 48: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/48.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
![Page 50: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/50.jpg)
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
![Page 51: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/51.jpg)
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
![Page 52: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/52.jpg)
Speed test image
https://github.com/adamdbradley/foresight.js
![Page 53: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/53.jpg)
Speed test image
+50k
https://github.com/adamdbradley/foresight.js
![Page 54: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/54.jpg)
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
![Page 55: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/55.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
![Page 56: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/56.jpg)
1 HiSRC and others
2
3
GIMME THAT OLD SCHOOLIMG
![Page 57: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/57.jpg)
SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
![Page 58: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/58.jpg)
DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
![Page 59: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/59.jpg)
$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) {
$.hisrc.devicePixelRatio = window.devicePixelRatio
};
Check pixel density...
https://gist.github.com/2428356
![Page 60: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/60.jpg)
+50k
https://github.com/adamdbradley/foresight.js
Force speed test
![Page 61: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/61.jpg)
LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
![Page 62: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/62.jpg)
BETWEEN 4G &300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
![Page 63: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/63.jpg)
FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
![Page 64: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/64.jpg)
BRINGING PROBLEMSBRINGING THE PAIN
1
2
3
![Page 65: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/65.jpg)
BRINGING PROBLEMS1 Double Taxation
2
3
BRINGING THE PAIN
![Page 66: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/66.jpg)
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
![Page 67: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/67.jpg)
24+http://css-tricks.com/which-responsive-images-solution-
should-you-use/
![Page 68: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/68.jpg)
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
ALL SOLUTIONS HAVE 2x +
![Page 69: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/69.jpg)
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
2x = MORE TIME COSTS
![Page 70: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/70.jpg)
https://github.com/crdeutsch/hisrc/tree/v2
BRINGING THE PAIN1 Double Taxation
2 Browser Preloader
3
BRINGING THE PAIN
![Page 71: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/71.jpg)
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.”
![Page 72: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/72.jpg)
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html
![Page 73: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/73.jpg)
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html
![Page 74: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/74.jpg)
http://www.stevesouders.com/blog/2013/04/26/i/
MODERN BROWSERS NOW USE PRELOADER
![Page 75: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/75.jpg)
http://www.stevesouders.com/blog/2013/04/26/i/
PRELOADS IMAGES BEFORE PAGE FULLY DOWNLOADS
![Page 76: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/76.jpg)
![Page 77: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/77.jpg)
BRINGING PROBLEMS1 Double Taxation
2
One Image, Still Not Ready3
Browser Preloader
BRINGING THE PAIN
![Page 79: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/79.jpg)
![Page 83: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/83.jpg)
#rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />
Favicon
![Page 84: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/84.jpg)
#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
![Page 87: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/87.jpg)
1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
![Page 88: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/88.jpg)
1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
srcset
![Page 89: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/89.jpg)
Basic Image Swap
<img src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/
![Page 90: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/90.jpg)
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/
![Page 91: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/91.jpg)
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/
![Page 92: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/92.jpg)
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/
![Page 93: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/93.jpg)
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/
![Page 94: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/94.jpg)
1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
srcset attribute
sizes attribute
![Page 95: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/95.jpg)
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/
![Page 96: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/96.jpg)
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/
![Page 97: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/97.jpg)
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/
![Page 98: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/98.jpg)
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/
![Page 99: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/99.jpg)
IT’S STILL UP TO BROWSER TO PICK WHICH IMAGE TO USE
![Page 100: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/100.jpg)
![Page 101: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/101.jpg)
1
2
3 <picture>
srcset attribute
sizes attribute
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
![Page 102: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/102.jpg)
![Page 103: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/103.jpg)
![Page 104: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/104.jpg)
<picture>
<img src="small.jpg" alt=“That awesome Saints’ touchdown.">
![Page 105: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/105.jpg)
<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>
![Page 106: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/106.jpg)
<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>
![Page 107: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/107.jpg)
<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>
![Page 108: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/108.jpg)
<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>
![Page 109: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/109.jpg)
<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>
![Page 110: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/110.jpg)
<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>
![Page 111: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/111.jpg)
USE <PICTURE> FOR FINER CONTROL, ART DIRECTION
![Page 112: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/112.jpg)
OTHERWISE, KEEP USING SRCSET & SIZES
![Page 113: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/113.jpg)
![Page 114: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/114.jpg)
http://responsivedesign.is/resources/images/picture-fill
![Page 115: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/115.jpg)
https://wordpress.org/plugins/ricg-responsive-images/
![Page 116: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/116.jpg)
1
2
3 <picture>
srcset attribute
sizes attribute
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
![Page 117: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/117.jpg)
![Page 122: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/122.jpg)
![Page 123: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/123.jpg)
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+
![Page 124: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/124.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3
&
(cc) flic.kr/p/64fGf6
![Page 125: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/125.jpg)
SVG
![Page 126: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/126.jpg)
![Page 127: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/127.jpg)
![Page 128: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/128.jpg)
Native SVG
http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
![Page 129: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/129.jpg)
PNG SVG
9+5+9+ 11.6+17+
![Page 130: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/130.jpg)
http://petercollingridge.appspot.com/svg-optimiser
![Page 133: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/133.jpg)
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>
![Page 134: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/134.jpg)
Modernizr checkif(!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
![Page 136: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/136.jpg)
https://wordpress.org/plugins/scalable-vector-graphics-svg/
![Page 137: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/137.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
![Page 138: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/138.jpg)
...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.”
“
![Page 139: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/139.jpg)
![Page 140: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/140.jpg)
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
![Page 141: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/141.jpg)
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
avg file size 40kb
![Page 142: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/142.jpg)
http://css-tricks.com/examples/IconFont/
![Page 145: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/145.jpg)
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>
![Page 146: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/146.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf64 compressed JPEGs
![Page 147: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/147.jpg)
![Page 148: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/148.jpg)
![Page 149: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/149.jpg)
![Page 150: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/150.jpg)
![Page 151: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/151.jpg)
![Page 152: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/152.jpg)
iCloud iOS 5 OSX Lion iPad 2 iPhone
OSThe 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
![Page 153: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/153.jpg)
iCloud iOS 5 OSX Lion iPad 2 iPhone
OSThe 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!
" ←↑
![Page 154: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/154.jpg)
iCloud iOS 5 OSX Lion iPad 2 iPhone
OSThe 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↑
← "!
![Page 155: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/155.jpg)
iCloud iOS 5 OSX Lion iPad 2 iPhone
OSThe 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! ↙
" ← ←↗ ↑ ↖
↑ ↖
![Page 156: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/156.jpg)
iCloud iOS 5 OSX Lion iPad 2 iPhone
OSThe 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↑ ↗
← " "↙ ! ↘
! ↘
![Page 158: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/158.jpg)
![Page 160: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/160.jpg)
<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/
![Page 161: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/161.jpg)
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra Large
1024x1536 2x 1,745kb
512x768 1x 503kb
Large640x960 2x 746kb
320x480 1x 223kb
Medium500x750 2x 485kb
250x375 1x 145kb
![Page 162: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/162.jpg)
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra Large
1024x1536 2x 1,745kb
512x768 1x 503kb
Large640x960 2x 746kb
320x480 1x 223kb
Medium500x750 2x 485kb
250x375 1x 145kb
![Page 163: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/163.jpg)
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra Large
1024x1536 2x 1,745kb
512x768 1x 503kb
Large640x960 2x 746kb
320x480 1x 223kb
Medium500x750 2x 485kb
250x375 1x 145kb
![Page 164: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/164.jpg)
<img src="rock-climber.jpg" alt="" />
One Image, One IMG
![Page 166: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/166.jpg)
![Page 167: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/167.jpg)
![Page 169: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/169.jpg)
<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/
![Page 171: [funka] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022013013/58f9b387760da3da068bd700/html5/thumbnails/171.jpg)
THANK YOU! CHRISTOPHER SCHMITT