![Page 1: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/1.jpg)
AUSTIN WORDPRESS 2015
ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
![Page 2: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/2.jpg)
CHRISTOPHER SCHMITT@teleject
![Page 3: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/3.jpg)
@teleject
![Page 7: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/7.jpg)
![Page 8: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/8.jpg)
![Page 9: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/9.jpg)
![Page 10: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/10.jpg)
![Page 11: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/11.jpg)
![Page 12: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/12.jpg)
y
x
![Page 13: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/13.jpg)
![Page 14: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/14.jpg)
![Page 15: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/15.jpg)
![Page 20: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/20.jpg)
alert("User-agent header sent: " + navigator.userAgent);
![Page 21: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/21.jpg)
alert("User-agent header sent: " + navigator.userAgent);
![Page 22: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/22.jpg)
Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
![Page 23: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/23.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 24: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/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.3
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
![Page 25: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/25.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 27: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/27.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3
![Page 28: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/28.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2
3
![Page 29: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/29.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 30: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/30.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 31: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/31.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 33: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/33.jpg)
BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
![Page 34: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/34.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3
![Page 36: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/36.jpg)
72 points-per-inch = 72 pixels-per-inch
![Page 37: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/37.jpg)
96PPIIF A
![Page 38: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/38.jpg)
72 points-per-inch x [1+(1/3)] = 96 PPI
![Page 40: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/40.jpg)
![Page 41: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/41.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 42: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/42.jpg)
![Page 43: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/43.jpg)
72 PPI
![Page 44: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/44.jpg)
240
![Page 45: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/45.jpg)
240 PPI
![Page 46: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/46.jpg)
240 PPI
![Page 47: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/47.jpg)
72 PPI
![Page 48: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/48.jpg)
![Page 49: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/49.jpg)
RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
![Page 50: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/50.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
![Page 52: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/52.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 53: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/53.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 54: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/54.jpg)
Speed test image
https://github.com/adamdbradley/foresight.js
![Page 55: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/55.jpg)
Speed test image
+50k
https://github.com/adamdbradley/foresight.js
![Page 56: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/56.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 57: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/57.jpg)
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
![Page 58: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/58.jpg)
IMGGIMME THAT OLD SCHOOL
1
2
3
![Page 59: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/59.jpg)
1 srcset & sizes
2
3
IMGGIMME THAT OLD SCHOOL
![Page 60: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/60.jpg)
Basic Image Swap
<img src="headshot_500px.jpg" srcset="headshot_650px.jpg 1.5x, headshot_1000px.jpg 2x" width="500" alt="Headshot">
http://caniuse.com/#search=srcset
![Page 61: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/61.jpg)
![Page 62: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/62.jpg)
Basic Image Swap
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/
![Page 63: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/63.jpg)
Basic Image Swap
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/
![Page 64: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/64.jpg)
Basic Image Swap
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/
![Page 65: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/65.jpg)
Basic Image Swap
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/
![Page 66: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/66.jpg)
Basic Image Swap
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw” srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/
![Page 67: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/67.jpg)
IT’S STILL UP TO BROWSER TO PICK WHICH IMAGE TO USE
![Page 68: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/68.jpg)
BUT WILL USE THESE ATTRIBUTES 1,000% OF THE TIME*
* Science
![Page 69: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/69.jpg)
1 srcset & sizes
2 <picture>
3
GIMME THAT OLD SCHOOLIMG
![Page 70: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/70.jpg)
![Page 71: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/71.jpg)
![Page 72: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/72.jpg)
<picture>
<img src="small.jpg" alt=“That awesome Saints’ touchdown.">
![Page 73: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/73.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>
25+38+ 33+ ? ?
![Page 74: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/74.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>
25+38+ 33+ ? ?
![Page 75: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/75.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>
25+38+ 33+ ? ?
![Page 76: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/76.jpg)
<picture>
<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>
25+38+ 33+ ? ?
![Page 77: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/77.jpg)
USE <PICTURE> POWER TO SOLVE ART DIRECTION
![Page 78: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/78.jpg)
& ONLY WHEN ALL OTHER CSS-y OPTIONS HAVE BEEN EXPLORED
![Page 79: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/79.jpg)
![Page 80: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/80.jpg)
http://responsivedesign.is/resources/images/picture-fill
![Page 81: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/81.jpg)
https://wordpress.org/plugins/ricg-responsive-images/
![Page 82: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/82.jpg)
https://wordpress.org/plugins/ricg-responsive-images/
![Page 83: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/83.jpg)
1 srcset & sizes
2 <picture>
3 HiSRC and others
GIMME THAT OLD SCHOOLIMG
![Page 84: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/84.jpg)
SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
![Page 85: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/85.jpg)
DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
![Page 86: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/86.jpg)
$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) {
$.hisrc.devicePixelRatio = window.devicePixelRatio
};
Check pixel density...
https://gist.github.com/2428356
![Page 87: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/87.jpg)
+50k
https://github.com/adamdbradley/foresight.js
Force speed test
![Page 88: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/88.jpg)
LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
![Page 89: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/89.jpg)
BETWEEN 4G &300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
![Page 90: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/90.jpg)
FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
![Page 91: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/91.jpg)
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
![Page 92: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/92.jpg)
24+http://css-tricks.com/which-responsive-images-solution-
should-you-use/
![Page 93: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/93.jpg)
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
ALL SOLUTIONS HAVE 2x +
![Page 97: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/97.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 98: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/98.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3
&
(cc) flic.kr/p/64fGf6
![Page 99: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/99.jpg)
SVG
![Page 100: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/100.jpg)
![Page 101: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/101.jpg)
![Page 102: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/102.jpg)
Native SVG
http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
![Page 103: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/103.jpg)
PNG SVG
9+5+9+ 11.6+17+
![Page 104: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/104.jpg)
http://petercollingridge.appspot.com/svg-optimiser
![Page 107: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/107.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 109: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/109.jpg)
https://wordpress.org/plugins/scalable-vector-graphics-svg/
![Page 110: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/110.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
![Page 111: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/111.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 112: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/112.jpg)
![Page 113: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/113.jpg)
![Page 114: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/114.jpg)
![Page 115: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/115.jpg)
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
![Page 116: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/116.jpg)
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
avg file size 40kb
![Page 117: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/117.jpg)
http://css-tricks.com/examples/IconFont/
![Page 120: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/120.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 121: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/121.jpg)
WORKAROUNDS TRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf64 compressed JPEGs
![Page 122: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/122.jpg)
![Page 123: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/123.jpg)
![Page 124: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/124.jpg)
![Page 125: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/125.jpg)
![Page 126: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/126.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 127: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/127.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 128: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/128.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 130: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/130.jpg)
![Page 132: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/132.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 133: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/133.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 134: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/134.jpg)
<img src="rock-climber.jpg" alt="" />
One Image, One IMG
![Page 136: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/136.jpg)
![Page 137: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/137.jpg)
![Page 138: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/138.jpg)
(cc) flic.kr/p/64fGf6
COMBO MOVESCLOWN CAR TECHNIQUE + HIGHLY COMPRESSED JPEGS
![Page 139: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/139.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 141: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/141.jpg)
![Page 142: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/142.jpg)
![Page 143: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/143.jpg)
IMGGIMME THAT NEW SCHOOL
1
2
3
#rwdimg
![Page 144: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/144.jpg)
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
#rwdimg
1
![Page 145: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/145.jpg)
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
#rwdimg
2
![Page 146: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/146.jpg)
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
same, several formats
#rwdimg
3
![Page 148: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/148.jpg)
![Page 152: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/152.jpg)
#rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />
Favicon
![Page 153: [Austin WordPress Meetup] Adaptive Images in Responsive Web Design](https://reader030.vdocuments.us/reader030/viewer/2022012916/55a5189b1a28abd07f8b4823/html5/thumbnails/153.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