Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CHRISTOPHER SCHMITT @teleject 
ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN 
CSS DEV CONF 2014
@teleject 
CHRISTOPHER SCHMITT
@teleject
@teleject 
Responsive Media Course
@teleject 
http://SassSummit.com/
@teleject 
http://artifactconf.com/
y 
x
http://cssspecificity.com
http://cssspecificity.com
http://cssspecificity.com
WHY DON’T WE ASK 
THE BROWSER? 
(cc) flic.kr/p/vUBHv
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.c...
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 ...
Mozilla/5.0 (Macintosh; Intel Mac 
OS X 10_7_3) AppleWebKit/ 
534.55.3 (KHTML, like Gecko) 
Version/5.1.5 Safari/534.55.3 ...
http://telejec.tv/12uYOC4
FEATURE TESTING vs. BROWSER SNIFFING 
1 
2 
3
FEATURE TESTING vs. BROWSER SNIFFING 
1 Browser width 
2 
3
A scripting approach 
var myWidth = 0, myHeight = 0; 
if( typeof( window.innerWidth ) == 'number' ) { 
//Non-IE 
myWidth =...
The jQuery approach 
// returns width of browser viewport 
$(window).width(); 
// returns height of browser viewport 
$(wi...
CSS media queries 
// default, mobile-1st CSS rules devices go here 
! 
@media screen and (min-width: 480px) { ... } 
! 
@...
(cc) flic.kr/p/8Lo5Gk
BROWSER WIDTH 
GIVES US FRAME, 
NOT THE CANVAS
FEATURE TESTING vs. BROWSER SNIFFING 
1 Browser width 
2 Screen resolution 
3
72PPI 
HAS 
(cc) flic.kr/p/6tjjRP
72 points-per-inch = 
72 pixels-per-inch
96PPI 
IF A
72 points-per-inch 
x [1+(1/3)] 
= 96 PPI
78μm 
“RETINA” DISPLAYS 300ppi at 12 inches from the eyes 
goo.gl/zpkFy 78μm
[In 2013, Intel sees their 
product line] offer a higher 
resolution experience than a 
top-of-the-line 1080p HDTV.” 
“ 
h...
72 PPI
240
240 PPI
240 PPI
72 PPI
RETINA DISPLAYS = 
LARGER IMAGES, 
LARGER FILE SIZES
FEATURE TESTING vs. BROWSER SNIFFING 
1 Browser width 
2 Screen resolution 
3 Bandwidth
SPEED TESTS 
HINDER SPEED, 
USER EXPERIENCE 
(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.” 
“ 
(cc) flic.kr...
Testing for speed of an internet 
connection is like stepping in 
front of a car to see how fast it 
is.” 
“ 
But, Christo...
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 
...
FEATURE TESTING vs. BROWSER SNIFFING 
1 Browser width 
2 Screen resolution 
3 Bandwidth
IMG GIMME THAT OLD SCHOOL 
1 
2 
3
IMG GIMME THAT OLD SCHOOL 
1 srcset & sizes 
2 
3
Basic Image Swap 
<img src="headshot_500px.jpg" 
srcset="headshot_650px.jpg 1.5x, 
headshot_1000px.jpg 2x" 
width="500" al...
Basic Image Swap 
<img sizes="(max-width: 30em) 100vw, 
(max-width: 50em) 50vw, 
calc(33vw - 100px)" 
srcset="swing-200.jp...
Basic Image Swap 
<img sizes="(max-width: 30em) 100vw, 
(max-width: 50em) 50vw, 
calc(33vw - 100px)" 
srcset="swing-200.jp...
Basic Image Swap 
<img sizes="(max-width: 30em) 100vw, 
(max-width: 50em) 50vw, 
calc(33vw - 100px)" 
srcset="swing-200.jp...
Basic Image Swap 
<img sizes="(max-width: 30em) 100vw, 
(max-width: 50em) 50vw" 
srcset="swing-200.jpg 200w, 
swing-400.jp...
Basic Image Swap 
<img sizes="(max-width: 30em) 100vw, 
(max-width: 50em) 50vw" 
srcset="swing-200.jpg 200w, 
swing-400.jp...
IT’S STILL UP TO 
BROWSER TO PICK 
WHICH IMAGE TO USE
BUT YOU WILL USE 
THESE ATTRIBUTES 
1,000% OF THE TIME* 
* Science
GIMME THAT OLD SCHOOL IMG 
1 srcset & sizes 
2 <picture> 
3
<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="med...
<picture> 
<picture> 
<source media="(min-width: 45em)" srcset="large.jpg"> 
<source media="(min-width: 32em)" srcset="med...
<picture> 
<picture> 
<source media="(min-width: 45em)" srcset="large.jpg"> 
<source media="(min-width: 32em)" srcset="med...
<picture> 
<picture> 
<source media="(min-width: 45em)" srcset="large.jpg"> 
<source media="(min-width: 32em)" srcset="med...
USE <PICTURE> 
POWER TO SOLVE ART 
DIRECTION
& ONLY WHEN ALL 
OTHER CSS-y OPTIONS 
HAVE BEEN EXPLORED
http://responsivedesign.is/resources/images/ 
picture-fill
GIMME THAT OLD SCHOOL IMG 
1 srcset & sizes 
2 <picture> 
3 HiSRC and more
Set, forget it HiSRC 
<script src="https://ajax.googleapis.com/ajax/libs/ 
jquery/1.7.2/jquery.min.js"></script> 
<script ...
Set, forget it HiSRC 
<div class="hisrc"> 
<img src="halloween-mobile-1st.png" 
data-1x="halloween-x1.png" 
data-2x="hallo...
Set, forget it HiSRC 
<div class="hisrc"> 
<img src="halloween-mobile-1st.png" 
data-1x="halloween-x1.png" 
data-2x="hallo...
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
Check pixel density... 
$.hisrc.devicePixelRatio = 1; 
if(window.devicePixelRatio !== undefined) 
{ 
$.hisrc.devicePixelRa...
Force speed test 
+50k 
https://github.com/adamdbradley/foresight.js
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
http://css-tricks.com/which-responsive- 
images-solution-should- 
you-use/
24+ 
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/
WORKAROUNDS TRICKS in CONTEXT 
1 
2 
3 
& 
(cc) flic.kr/p/64fGf6
WORKAROUNDS & 
TRICKS 
1 background-size: 100% 
2 
3 
(cc) flic.kr/p/64fGf6
http://fittextjs.com/
background-size: 100% 
<a href="example.com/link">Download on Github</a> 
! 
.download a { 
padding: .095em .8em; 
backgro...
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 
17+ 9+ 11.6+ 5+ 9+
http://petercollingridge.appspot.com/svg-optimiser
https://github.com/svg/svgo-gui
https://github.com/svg/svgo-gui
Modernizr check 
if(!Modernizr.svg){ 
var images = 
document.getElementsByTagName("img"); 
for(var i = 0; i < images.lengt...
https://github.com/filamentgroup/grunticon/
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 ✆, ...
Font-based RWD 
http://ilovetypography.com/2012/04/11/designing-type-systems/
Font-based RWD 
avg file size 
40kb 
http://ilovetypography.com/2012/04/11/designing-type-systems/
http://css-tricks.com/examples/IconFont/
http://fontello.com/
http://icomoon.io
Font-based icons 
<style> 
[data-icon]:before { 
font-family: 'icon-font'; 
content: attr(data-icon); 
} 
</style> 
! 
<a ...
WORKAROUNDS & 
TRICKS in CONTEXT 
1 background-size: 100% 
2 SVG 
3 font-based solutions 
4 compressed JPEGs 
(cc) flic.kr...
OS 
X Lion 
The world’s most advanced desktop 
operating system advances even further. 
With over 250 new features includi...
X Lion! 
" ← 
OS 
The world’s most advanced desktop 
operating system advances even further. 
With over 250 new features i...
X Lion! ↙ 
" ← ← 
↗ ↑ ↖ 
OS 
The world’s most advanced desktop 
operating system advances even further. 
With over 250 new...
(cc) flic.kr/p/64fGf6
446kb < 8,755.2kb 
0% vs 100% 
(cc) flic.kr/p/64fGf6
Size Type Dimensions Display Px Density File Size 
Extreme 2276x1400 1x & 2x 446kb 
Extra 
Large 
1024x1536 2x 1,745kb 
51...
Size Type Dimensions Display Px Density File Size 
Extreme 2276x1400 1x & 2x 446kb 
Extra 
Large 
1024x1536 2x 1,745kb 
51...
One Image, One IMG 
<img src="rock-climber.jpg" alt="" />
(cc) flic.kr/p/64fGf6 
EXTREMELY COMPRESSED PROBLEMS
COMBO MOVES CLOWN CAR TECHNIQUE 
+ HIGHLY COMPRESSED JPEGS 
(cc) flic.kr/p/64fGf6
<img src="rock-climbing-400px.jpg" 
srcset="rock-climbing-400px.jpg 400w, 
rock-climbing-compressed.jpg 600w" 
sizes="100v...
http://codepen.io/teleject/full/qpxmr/
IMG GIMME THAT NEW SCHOOL 
1 
2 
3 
#rwdimg
IMG GIMME THAT NEW SCHOOL 
1 
2 
3 
simple design for users 
#rwdimg
IMG GIMME THAT NEW SCHOOL 
1 
2 
3 
simple design for users 
browser, server handshake 
#rwdimg
IMG GIMME THAT NEW SCHOOL 
1 
2 
3 
simple design for users 
browser, server handshake 
same, several formats 
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
Favicon 
<link rel="shortcut icon" href="/assets/favicon.ico" /> 
#rwdimg
Mobile iOS Bookmarks 
<link rel="apple-touch-icon-precomposed" sizes="144x144" 
href="apple-touch-icon-144x144-precomposed...
#rwdimg
THANK YOU! CHRISTOPHER SCHMITT 
Sass Summit - http://SassSummit.com
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
Upcoming SlideShare
Loading in …5
×

[CSSDevConf] Adaptive Images in Responsive Web Design 2014

17,643 views

Published on

The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.

Published in: Design, Technology

[CSSDevConf] Adaptive Images in Responsive Web Design 2014

  1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CSS DEV CONF 2014
  2. @teleject CHRISTOPHER SCHMITT
  3. @teleject
  4. @teleject Responsive Media Course
  5. @teleject http://SassSummit.com/
  6. @teleject http://artifactconf.com/
  7. y x
  8. http://cssspecificity.com
  9. http://cssspecificity.com
  10. http://cssspecificity.com
  11. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  12. alert("User-agent header sent: " + navigator.userAgent);
  13. alert("User-agent header sent: " + navigator.userAgent);
  14. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  15. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
  16. 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/
  17. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  18. http://telejec.tv/12uYOC4
  19. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3
  20. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3
  21. 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
  22. 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/
  23. 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) { ... }
  24. (cc) flic.kr/p/8Lo5Gk
  25. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  26. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  27. 72PPI HAS (cc) flic.kr/p/6tjjRP
  28. 72 points-per-inch = 72 pixels-per-inch
  29. 96PPI IF A
  30. 72 points-per-inch x [1+(1/3)] = 96 PPI
  31. 78μm “RETINA” DISPLAYS 300ppi at 12 inches from the eyes goo.gl/zpkFy 78μm
  32. [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
  33. 72 PPI
  34. 240
  35. 240 PPI
  36. 240 PPI
  37. 72 PPI
  38. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  39. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  40. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN
  41. 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
  42. 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
  43. Speed test image https://github.com/adamdbradley/foresight.js
  44. Speed test image +50k https://github.com/adamdbradley/foresight.js
  45. 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
  46. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  47. IMG GIMME THAT OLD SCHOOL 1 2 3
  48. IMG GIMME THAT OLD SCHOOL 1 srcset & sizes 2 3
  49. Basic Image Swap <img src="headshot_500px.jpg" srcset="headshot_650px.jpg 1.5x, headshot_1000px.jpg 2x" width="500" alt="Headshot">
  50. Basic Image Swap <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" 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/
  51. Basic Image Swap <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" 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/
  52. Basic Image Swap <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" 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/
  53. 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/
  54. 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/
  55. IT’S STILL UP TO BROWSER TO PICK WHICH IMAGE TO USE
  56. BUT YOU WILL USE THESE ATTRIBUTES 1,000% OF THE TIME* * Science
  57. GIMME THAT OLD SCHOOL IMG 1 srcset & sizes 2 <picture> 3
  58. <picture> <img src="small.jpg" alt=“That awesome Saints touchdown.">
  59. <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> 38+ 33+ 25+ ? ?
  60. <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> 38+ 33+ 25+ ? ?
  61. <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> 38+ 33+ 25+ ? ?
  62. <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> 38+ 33+ 25+ ? ?
  63. USE <PICTURE> POWER TO SOLVE ART DIRECTION
  64. & ONLY WHEN ALL OTHER CSS-y OPTIONS HAVE BEEN EXPLORED
  65. http://responsivedesign.is/resources/images/ picture-fill
  66. GIMME THAT OLD SCHOOL IMG 1 srcset & sizes 2 <picture> 3 HiSRC and more
  67. 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
  68. 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>
  69. 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>
  70. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  71. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  72. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  73. Force speed test +50k https://github.com/adamdbradley/foresight.js
  74. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  75. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  76. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  77. http://css-tricks.com/which-responsive- images-solution-should- you-use/
  78. 24+ http://css-tricks.com/which-responsive- images-solution-should- you-use/
  79. ALL SOLUTIONS HAVE 2x + http://css-tricks.com/which-responsive- images-solution-should- you-use/
  80. WORKAROUNDS TRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6
  81. WORKAROUNDS & TRICKS 1 background-size: 100% 2 3 (cc) flic.kr/p/64fGf6
  82. http://fittextjs.com/
  83. background-size: 100% <a href="example.com/link">Download on Github</a> ! .download a { padding: .095em .8em; background: url(../img/arrow.png) no-repeat; background-size: 100%; margin-left: .4em; -webkit-transition: margin 0.15s ease-out; -moz-transition: margin 0.15s ease-out; text-decoration: none; } 17+ 9+ 11.6+ 5+ 9+
  84. WORKAROUNDS TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6
  85. SVG
  86. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  87. PNG SVG 17+ 9+ 11.6+ 5+ 9+
  88. http://petercollingridge.appspot.com/svg-optimiser
  89. https://github.com/svg/svgo-gui
  90. https://github.com/svg/svgo-gui
  91. Modernizr check if(!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
  92. https://github.com/filamentgroup/grunticon/
  93. WORKAROUNDS TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6
  94. ...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.” “
  95. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/
  96. Font-based RWD avg file size 40kb http://ilovetypography.com/2012/04/11/designing-type-systems/
  97. http://css-tricks.com/examples/IconFont/
  98. http://fontello.com/
  99. http://icomoon.io
  100. 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>
  101. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions 4 compressed JPEGs (cc) flic.kr/p/64fGf6
  102. OS X Lion The 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 iCloud iOS 5 OSX Lion iPad 2 iPhone
  103. X Lion! " ← OS The 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 ↑ iCloud iOS 5 OSX Lion iPad 2 iPhone
  104. X Lion! ↙ " ← ← ↗ ↑ ↖ OS The 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 ↑ ↖ iCloud iOS 5 OSX Lion iPad 2 iPhone
  105. (cc) flic.kr/p/64fGf6
  106. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6
  107. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb 512x768 1x 503kb Large 640x960 2x 746kb 320x480 1x 223kb Medium 500x750 2x 485kb 250x375 1x 145kb
  108. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb 512x768 1x 503kb Large 640x960 2x 746kb 320x480 1x 223kb Medium 500x750 2x 485kb 250x375 1x 145kb
  109. One Image, One IMG <img src="rock-climber.jpg" alt="" />
  110. (cc) flic.kr/p/64fGf6 EXTREMELY COMPRESSED PROBLEMS
  111. COMBO MOVES CLOWN CAR TECHNIQUE + HIGHLY COMPRESSED JPEGS (cc) flic.kr/p/64fGf6
  112. <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/
  113. http://codepen.io/teleject/full/qpxmr/
  114. IMG GIMME THAT NEW SCHOOL 1 2 3 #rwdimg
  115. IMG GIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg
  116. IMG GIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg
  117. IMG GIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg
  118. #rwdimg
  119. #rwdimg
  120. #rwdimg
  121. #rwdimg
  122. Favicon <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  123. Mobile iOS Bookmarks <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" /> #rwdimg
  124. #rwdimg
  125. THANK YOU! CHRISTOPHER SCHMITT Sass Summit - http://SassSummit.com

×