Post on 21-Apr-2017
FUNKA 2015
ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
CHRISTOPHER SCHMITT@teleject
@teleject
y
x
alert("User-agent header sent: " + navigator.userAgent);
alert("User-agent header sent: " + navigator.userAgent);
Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
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/
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
FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2
3
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
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/
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) { ... }
BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3
72 points-per-inch = 72 pixels-per-inch
96PPIIF A
72 points-per-inch x [1+(1/3)] = 96 PPI
[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
72 PPI
240
240 PPI
240 PPI
72 PPI
RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
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
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
Speed test image
https://github.com/adamdbradley/foresight.js
Speed test image
+50k
https://github.com/adamdbradley/foresight.js
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
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
1 HiSRC and others
2
3
GIMME THAT OLD SCHOOLIMG
SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) {
$.hisrc.devicePixelRatio = window.devicePixelRatio
};
Check pixel density...
https://gist.github.com/2428356
+50k
https://github.com/adamdbradley/foresight.js
Force speed test
LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
BETWEEN 4G &300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
BRINGING PROBLEMSBRINGING THE PAIN
1
2
3
BRINGING PROBLEMS1 Double Taxation
2
3
BRINGING THE PAIN
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
24+http://css-tricks.com/which-responsive-images-solution-
should-you-use/
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
ALL SOLUTIONS HAVE 2x +
http://css-tricks.com/which-responsive-images-solution-
should-you-use/
2x = MORE TIME COSTS
https://github.com/crdeutsch/hisrc/tree/v2
BRINGING THE PAIN1 Double Taxation
2 Browser Preloader
3
BRINGING THE PAIN
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.”
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html
http://www.stevesouders.com/blog/2013/04/26/i/
MODERN BROWSERS NOW USE PRELOADER
http://www.stevesouders.com/blog/2013/04/26/i/
PRELOADS IMAGES BEFORE PAGE FULLY DOWNLOADS
BRINGING PROBLEMS1 Double Taxation
2
One Image, Still Not Ready3
Browser Preloader
BRINGING THE PAIN
#rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />
Favicon
#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
1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
srcset
Basic Image Swap
<img src="swing-400.jpg" alt="Kettlebell Swing">
https://dev.opera.com/articles/native-responsive-images/
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/
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/
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/
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/
1
2
3
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
srcset attribute
sizes attribute
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/
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/
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/
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/
IT’S STILL UP TO BROWSER TO PICK WHICH IMAGE TO USE
1
2
3 <picture>
srcset attribute
sizes attribute
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
<picture>
<img src="small.jpg" alt=“That awesome Saints’ touchdown.">
<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>
<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>
<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>
<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>
<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>
<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>
USE <PICTURE> FOR FINER CONTROL, ART DIRECTION
OTHERWISE, KEEP USING SRCSET & SIZES
http://responsivedesign.is/resources/images/picture-fill
https://wordpress.org/plugins/ricg-responsive-images/
1
2
3 <picture>
srcset attribute
sizes attribute
RWD IMAGESMEET THE NEW IMAGE ELEMENTS
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+
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3
&
(cc) flic.kr/p/64fGf6
SVG
Native SVG
http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
PNG SVG
9+5+9+ 11.6+17+
http://petercollingridge.appspot.com/svg-optimiser
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>
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
https://wordpress.org/plugins/scalable-vector-graphics-svg/
WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
...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.”
“
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
avg file size 40kb
http://css-tricks.com/examples/IconFont/
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>
WORKAROUNDS TRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf64 compressed JPEGs
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
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!
" ←↑
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↑
← "!
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! ↙
" ← ←↗ ↑ ↖
↑ ↖
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↑ ↗
← " "↙ ! ↘
! ↘
<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/
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
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
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
<img src="rock-climber.jpg" alt="" />
One Image, One IMG
<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/
THANK YOU! CHRISTOPHER SCHMITT