christopher schmitt, "adaptive images for responsive web design"
DESCRIPTION
The open web doesn't stop at our desktop. Smart phones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy, they have better displays. Presented at WebVisions Barcelona 2013.TRANSCRIPT
![Page 1: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/1.jpg)
#WVBCN
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
![Page 2: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/2.jpg)
#WVBCN
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @telejectWhat Bruce Said!
![Page 3: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/3.jpg)
CHRISTOPHER SCHMITT@teleject
![Page 4: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/4.jpg)
@teleject
http://nonbreakingspace.tv/
![Page 5: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/5.jpg)
@teleject
http://dwmgbook.com/
![Page 6: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/6.jpg)
@teleject
http://CSSsummit.com/
![Page 7: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/7.jpg)
@teleject
http://cssdevconf.com/
![Page 8: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/8.jpg)
![Page 9: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/9.jpg)
![Page 10: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/10.jpg)
![Page 11: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/11.jpg)
![Page 12: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/12.jpg)
![Page 13: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/13.jpg)
y
x
![Page 14: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/14.jpg)
![Page 15: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/15.jpg)
![Page 16: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/16.jpg)
![Page 18: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/18.jpg)
alert("User-agent header sent: " + navigator.userAgent);
![Page 19: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/19.jpg)
alert("User-agent header sent: " + navigator.userAgent);
![Page 20: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/20.jpg)
Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
![Page 21: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/21.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 22: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/22.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 23: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/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.3http://webaim.org/blog/user-agent-string-history/
(cc) flic.kr/p/vUBHv
![Page 24: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/24.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3
![Page 25: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/25.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2
3
![Page 26: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/26.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 27: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/27.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 28: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/28.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 29: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/29.jpg)
(cc) flic.kr/p/8Lo5Gk
![Page 30: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/30.jpg)
BROWSER WIDTHGIVES US FRAME, NOT THE CANVAS
![Page 31: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/31.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3
![Page 33: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/33.jpg)
72 points-per-inch =72 pixels-per-inch
![Page 34: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/34.jpg)
96PPIIF A WINDOWS USER
![Page 35: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/35.jpg)
72 points-per-inch x [1+(1/3)] = 96 PPI
![Page 36: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/36.jpg)
78μm
goo.gl/zpkFy 78μm
“RETINA” DISPLAYS300ppi at 12 inches from the eyes
![Page 37: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/37.jpg)
![Page 38: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/38.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 39: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/39.jpg)
72 PPI
![Page 40: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/40.jpg)
240
![Page 41: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/41.jpg)
240 PPI
![Page 42: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/42.jpg)
240 PPI
![Page 43: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/43.jpg)
72 PPI
![Page 44: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/44.jpg)
![Page 45: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/45.jpg)
RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
![Page 46: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/46.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
![Page 47: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/47.jpg)
(cc) flic.kr/p/4DziUN
SPEED TESTSHINDER SPEED,USER EXPERIENCE
![Page 48: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/48.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 49: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/49.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 50: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/50.jpg)
Speed test image
https://github.com/adamdbradley/foresight.js
![Page 51: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/51.jpg)
Speed test image
+50k
https://github.com/adamdbradley/foresight.js
![Page 52: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/52.jpg)
Native speed test
// @Modernizr's network-connection.jsconnection = 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 53: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/53.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
![Page 54: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/54.jpg)
IMGGIMME THAT OLD SCHOOL
1
2
3
![Page 55: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/55.jpg)
1 .htaccess
2
3
IMGGIMME THAT OLD SCHOOL
![Page 56: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/56.jpg)
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 tempRewriteCond %{QUERY_STRING} full=(.*)&?RewriteRule (.*)rwd-router/.*\.(jpe?g|png|gif|webp) $1%1 [L]# ignore trap for non-image requests, rewrite URL without trap segmentRewriteRule (.*)rwd-router/(.*)$ $1$2# //End Responsive Images
https://github.com/filamentgroup/Responsive-Images
![Page 57: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/57.jpg)
Filament .htaccess
<script src="responsiveimgs.js"></script>
<img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />
8+4+
![Page 58: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/58.jpg)
...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/
![Page 59: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/59.jpg)
http://adaptive-images.com/
![Page 60: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/60.jpg)
ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
![Page 61: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/61.jpg)
1 .htaccess
2 <picture> and/or srcset
3
GIMME THAT OLD SCHOOLIMG
![Page 62: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/62.jpg)
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/
![Page 63: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/63.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 64: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/64.jpg)
ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
![Page 65: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/65.jpg)
@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
![Page 66: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/66.jpg)
1 .htaccess
2 <picture> and/or srcset
3 HiSRC
GIMME THAT OLD SCHOOLIMG
![Page 67: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/67.jpg)
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
![Page 68: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/68.jpg)
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>
![Page 69: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/69.jpg)
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>
![Page 70: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/70.jpg)
SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
![Page 71: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/71.jpg)
DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
![Page 72: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/72.jpg)
$.hisrc.devicePixelRatio = 1;if(window.devicePixelRatio !== undefined) {
$.hisrc.devicePixelRatio = window.devicePixelRatio
};
Check pixel density...
https://gist.github.com/2428356
![Page 73: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/73.jpg)
+50k
https://github.com/adamdbradley/foresight.js
Force speed test
![Page 74: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/74.jpg)
LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
![Page 75: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/75.jpg)
BETWEEN 4G &300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
![Page 76: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/76.jpg)
FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
![Page 77: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/77.jpg)
2 TRICK PONY
![Page 78: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/78.jpg)
CSS IS CORE.WE USE CSS MEDIA QUERIES FOR DESIGN
![Page 79: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/79.jpg)
http://mediaqueri.es/
![Page 80: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/80.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 81: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/81.jpg)
Single pixel GIF
![Page 82: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/82.jpg)
Single pixel GIF
![Page 83: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/83.jpg)
Single pixel GIF
![Page 84: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/84.jpg)
Single pixel GIF
![Page 85: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/85.jpg)
$.hisrc.defaults = { useTransparentGif: true,
http://www.w3.org/community/respimg/2012/04/06/responsive-content-images-using-a-spacer-png-and-background-image/
Single pixel GIF
![Page 86: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/86.jpg)
$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http://example.com/spg.gif',
6+5+9+ 11.6+17+
Single pixel GIF
![Page 87: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/87.jpg)
$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
8+5+9+ 11.6+17+
Single pixel GIF
![Page 88: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/88.jpg)
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
![Page 89: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/89.jpg)
24+http://css-tricks.com/which-responsive-images-solution-
should-you-use/
![Page 90: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/90.jpg)
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
ALL SOLUTIONS HAVE2x HTTP REQUESTS+ JAVASCRIPT
![Page 91: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/91.jpg)
WORKAROUNDS TRICKS in CONTEXT
1
2
3
&
(cc) flic.kr/p/64fGf6
![Page 92: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/92.jpg)
WORKAROUNDS TRICKS
1 background-size: 100%
2
3
&
(cc) flic.kr/p/64fGf6
![Page 93: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/93.jpg)
http://fittextjs.com/
![Page 94: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/94.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 95: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/95.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3
&
(cc) flic.kr/p/64fGf6
![Page 96: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/96.jpg)
SVG
![Page 97: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/97.jpg)
![Page 98: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/98.jpg)
![Page 99: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/99.jpg)
Native SVG
http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
![Page 100: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/100.jpg)
PNG 16kbSVG 7kb
9+5+9+ 11.6+17+
![Page 101: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/101.jpg)
http://petercollingridge.appspot.com/svg-optimiser
![Page 102: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/102.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 103: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/103.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG (Clown Car)
3
&
(cc) flic.kr/p/64fGf6
![Page 104: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/104.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
![Page 105: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/105.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 106: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/106.jpg)
![Page 107: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/107.jpg)
![Page 108: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/108.jpg)
![Page 109: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/109.jpg)
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
![Page 110: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/110.jpg)
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
avg file size 40kb/per font
![Page 111: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/111.jpg)
http://css-tricks.com/examples/IconFont/
![Page 112: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/112.jpg)
http://fontello.com/
![Page 113: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/113.jpg)
http://icomoon.io
![Page 114: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/114.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 115: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/115.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf64 compressed JPEGs
![Page 116: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/116.jpg)
![Page 117: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/117.jpg)
![Page 118: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/118.jpg)
![Page 119: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/119.jpg)
![Page 120: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/120.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 121: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/121.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 122: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/122.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 123: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/123.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 125: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/125.jpg)
![Page 127: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/127.jpg)
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra Large
1024x1536 2x 1,745kbExtra Large 512x768 1x 503kb
Large640x960 2x 746kb
Large320x480 1x 223kb
Medium500x750 2x 485kb
Medium250x375 1x 145kb
![Page 128: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/128.jpg)
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra Large
1024x1536 2x 1,745kbExtra Large 512x768 1x 503kb
Large640x960 2x 746kb
Large320x480 1x 223kb
Medium500x750 2x 485kb
Medium250x375 1x 145kb
![Page 129: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/129.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 130: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/130.jpg)
<img src="rock-climber.jpg" alt="" />
One Image, One IMG
![Page 132: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/132.jpg)
![Page 133: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/133.jpg)
![Page 134: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/134.jpg)
![Page 135: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/135.jpg)
Clown Car SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style></svg>
https://github.com/estelle/clowncar
![Page 136: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/136.jpg)
Clown Car SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style></svg>
https://github.com/estelle/clowncar
![Page 137: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/137.jpg)
http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-
web-design/
![Page 138: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/138.jpg)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style></svg>
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
![Page 139: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/139.jpg)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> <foreignObject> <!--[if lte IE 8]> <img src="../images/mobile-first.png" width="375" height="231" alt="put alt attribute text here"/> <![endif]--> </foreignObject></svg>
http://codepen.io/teleject/pen/KlzBe
![Page 140: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/140.jpg)
svg { background-size: 100% 100%; background-repeat: no-repeat; }
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
![Page 141: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/141.jpg)
svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url("http://s.cdpn.io/168/[email protected]"); outline: green solid 5px; } }
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
![Page 142: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/142.jpg)
@media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1.75) { svg { background-image: url("http://s.cdpn.io/168/pic-Extreme-2276x1400-72ppi.jpg"); outline: red solid 5px; } }
http://codepen.io/teleject/pen/KlzBe
Combo Move: Compressed JPEG
![Page 143: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/143.jpg)
@media screen and (max-width: 400px) { svg { width: 375px; height: 231px; } }@media screen and (min-width: 401px) { svg { width: 750px; height: 462px; } }svg { outline: 5px solid black; }
http://codepen.io/teleject/pen/KlzBe
Combo Move: CSS
![Page 144: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/144.jpg)
http://codepen.io/teleject/pen/KlzBe
![Page 145: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/145.jpg)
http://codepen.io/teleject/pen/KlzBe
![Page 146: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/146.jpg)
http://codepen.io/teleject/pen/KlzBe
![Page 147: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/147.jpg)
COMBO MOVEDON’T BLAME THE PLAYER
1
2
3
No additional HTTP request1
Min. # of images = 2
No JavaScript
http://codepen.io/teleject/pen/KlzBe
![Page 148: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/148.jpg)
![Page 149: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/149.jpg)
![Page 150: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/150.jpg)
IMGGIMME THAT NEW SCHOOL
1
2
3
![Page 151: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/151.jpg)
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
#rwdimg
1
![Page 152: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/152.jpg)
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
#rwdimg
2
![Page 153: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/153.jpg)
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
same, several formats
#rwdimg
3
![Page 154: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/154.jpg)
#rwdimg
![Page 156: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/156.jpg)
#rwdimg
![Page 157: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/157.jpg)
#rwdimg
![Page 158: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/158.jpg)
#rwdimg
![Page 159: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/159.jpg)
#rwdimg
![Page 160: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/160.jpg)
#rwdimg
![Page 161: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/161.jpg)
#rwdimg
![Page 162: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/162.jpg)
#rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />
Favicon
![Page 163: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/163.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 164: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/164.jpg)
#rwdimg
![Page 165: Christopher Schmitt, "Adaptive Images for Responsive Web Design"](https://reader037.vdocuments.mx/reader037/viewer/2022103016/554bc67ab4c90530298b55c3/html5/thumbnails/165.jpg)
THANK YOU!CHRISTOPHER SCHMITT @teleject
The Non Breaking Space Podcast - http://nonbreakingspace.tv/