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.
AUSTIN WORDPRESS 2015
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
CHRISTOPHER SCHMITT
@teleject
@teleject
@teleject
Responsive Media Course
http://goo.gl/fKgZ6I
@teleject
http://CSSDevConf.com/
@teleject
http://JavaScriptSummit.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.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...
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
htt...
https://github.com/igrigorik/http-client-hints
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 = win...
The jQuery approach
// returns width of browser viewport
$(window).width();
// returns height of browser viewport
$(window...
CSS media queries
// default, mobile-1st CSS rules devices go here
@media screen and (min-width: 480px) { ... }
@media scr...
(cc) flic.kr/p/8Lo5Gk
BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3
72PPIHAS
(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
goo.gl/zpkFy
78μm
“RETINA” DISPLAYS300ppi at 12 inches from the eyes
[In 2013, Intel sees their
product line] offer a higher
resolution experience than a
top-of-the-line 1080p HDTV.”
“
http://...
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
(cc) flic.kr/p/4DziUN
SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
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/4Dz...
Testing for speed of an internet
connection is like stepping in
front of a car to see how fast it
is.”
“
But, Christopher,...
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
isSlo...
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
IMGGIMME THAT OLD SCHOOL
1
2
3
1 srcset & sizes
2
3
IMGGIMME THAT OLD SCHOOL
Basic Image Swap
<img src="headshot_500px.jpg"
	srcset="headshot_650px.jpg 1.5x,
	 	 	 	 	headshot_1000px.jpg 2x"
	width="...
Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
		 	 (max-width: 50em) 50vw"
	srcset="swing-200.jpg 200w,
		 	 swing...
Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
		 	 (max-width: 50em) 50vw"
	srcset="swing-200.jpg 200w,
		 	 swing...
Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
		 	 (max-width: 50em) 50vw"
	srcset="swing-200.jpg 200w,
		 	 swing...
Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
		 	 (max-width: 50em) 50vw"
	srcset="swing-200.jpg 200w,
		 	 swing...
Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
		 	 (max-width: 50em) 50vw”
	srcset="swing-200.jpg 200w,
		 	 swing...
IT’S STILL UP TO
BROWSER TO PICK
WHICH IMAGE TO USE
BUT WILL USE THESE
ATTRIBUTES 1,000%
OF THE TIME*
* Science
1 srcset & sizes
2 <picture>
3
GIMME THAT OLD SCHOOL
IMG
<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="croppe...
<picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="croppe...
<picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="croppe...
<picture>
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jp...
USE <PICTURE>
POWER TO SOLVE ART
DIRECTION
& ONLY WHEN ALL
OTHER CSS-y OPTIONS
HAVE BEEN EXPLORED
http://responsivedesign.is/resources/images/picture-fill
https://wordpress.org/plugins/ricg-responsive-images/
https://wordpress.org/plugins/ricg-responsive-images/
1 srcset & sizes
2 <picture>
3 HiSRC and others
GIMME THAT OLD SCHOOL
IMG
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.devicePixelRati...
+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
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
+
WORKAROUNDSTRICKS in CONTEXT
1
2
3
&
(cc) flic.kr/p/64fGf6
WORKAROUNDSTRICKS
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;
background: ur...
WORKAROUNDSTRICKS 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
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.length; i...
https://github.com/filamentgroup/grunticon/
https://wordpress.org/plugins/scalable-vector-graphics-svg/
WORKAROUNDSTRICKS 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 ...
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/
http://fontello.com/
http://icomoon.io
Font-based icons
<style>
[data-icon]:before {
font-family: 'icon-font';
content: attr(data-icon);
}
</style>
<a href="http...
WORKAROUNDSTRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
4 compressed JPEGs
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over...
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over...
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over...
(cc) flic.kr/p/64fGf6
446kb < 8,755.2kb
(cc) flic.kr/p/64fGf6
0% vs 100%
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
512x768...
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
512x768...
<img src="rock-climber.jpg" alt="" />
One Image, One IMG
(cc) flic.kr/p/64fGf6
EXTREMELYCOMPRESSED PROBLEMS
(cc) flic.kr/p/64fGf6
COMBO MOVESCLOWN CAR TECHNIQUE 

+ HIGHLY COMPRESSED JPEGS
<img src="rock-climbing-400px.jpg"
srcset="rock-climbing-400px.jpg 400w, 

	 	 	 	 rock-climbing-compressed.jpg 600w"
size...
http://codepen.io/teleject/full/qpxmr/
IMGGIMME THAT NEW SCHOOL
1
2
3
#rwdimg
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
#rwdimg
1
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
#rwdimg
2
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
same, several formats
#rwdimg
3
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#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 ...
#rwdimg
THANK YOU!CHRISTOPHER SCHMITT
Sass Summit - http://SassSummit.com
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
Upcoming SlideShare
Loading in …5
×

[Austin WordPress Meetup] Adaptive Images in Responsive Web Design

27,468 views

Published on

Published in: Design, Internet
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[Austin WordPress Meetup] Adaptive Images in Responsive Web Design

  1. AUSTIN WORDPRESS 2015 ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT @teleject
  2. CHRISTOPHER SCHMITT @teleject
  3. @teleject
  4. @teleject Responsive Media Course http://goo.gl/fKgZ6I
  5. @teleject http://CSSDevConf.com/
  6. @teleject http://JavaScriptSummit.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. https://github.com/igrigorik/http-client-hints
  19. FEATURE TESTINGvs. BROWSER SNIFFING 1 2 3
  20. FEATURE TESTINGvs. 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 TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  27. 72PPIHAS (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 goo.gl/zpkFy 78μm “RETINA” DISPLAYS300ppi at 12 inches from the eyes
  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 TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  40. (cc) flic.kr/p/4DziUN SPEED TESTS HINDER SPEED, USER EXPERIENCE
  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 TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  47. IMGGIMME THAT OLD SCHOOL 1 2 3
  48. 1 srcset & sizes 2 3 IMGGIMME THAT OLD SCHOOL
  49. 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
  50. 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/
  51. 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/
  52. 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/
  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 WILL USE THESE ATTRIBUTES 1,000% OF THE TIME* * Science
  57. 1 srcset & sizes 2 <picture> 3 GIMME THAT OLD SCHOOL IMG
  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="cropped.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture> 25+38+ 33+ ? ?
  60. <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+ ? ?
  61. <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+ ? ?
  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> 25+38+ 33+ ? ?
  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. https://wordpress.org/plugins/ricg-responsive-images/
  67. https://wordpress.org/plugins/ricg-responsive-images/
  68. 1 srcset & sizes 2 <picture> 3 HiSRC and others GIMME THAT OLD SCHOOL IMG
  69. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  70. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  71. $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; Check pixel density... https://gist.github.com/2428356
  72. +50k https://github.com/adamdbradley/foresight.js Force speed test
  73. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  74. BETWEEN 4G &
 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  75. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  76. http://css-tricks.com/which- responsive-images-solution- should-you-use/
  77. 24+http://css-tricks.com/which- responsive-images-solution- should-you-use/
  78. http://css-tricks.com/which- responsive-images-solution- should-you-use/ ALL SOLUTIONS HAVE 2x +
  79. WORKAROUNDSTRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6
  80. WORKAROUNDSTRICKS 1 background-size: 100% 2 3 & (cc) flic.kr/p/64fGf6
  81. http://fittextjs.com/
  82. 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+
  83. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6
  84. SVG
  85. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  86. PNG SVG 9+5+9+ 11.6+17+
  87. http://petercollingridge.appspot.com/svg-optimiser
  88. https://github.com/svg/svgo-gui
  89. https://github.com/svg/svgo-gui
  90. 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
  91. https://github.com/filamentgroup/grunticon/
  92. https://wordpress.org/plugins/scalable-vector-graphics-svg/
  93. WORKAROUNDSTRICKS 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 http://ilovetypography.com/2012/04/11/designing-type-systems/ avg file size 40kb
  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. WORKAROUNDSTRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 4 compressed JPEGs
  102. iCloud iOS 5 OSX Lion iPad 2 iPhone 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 X Lion
  103. iCloud iOS 5 OSX Lion iPad 2 iPhone 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 X Lion ! " ← ↑
  104. iCloud iOS 5 OSX Lion iPad 2 iPhone 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 X Lion ! ↙ " ← ← ↗ ↑ ↖ ↑ ↖
  105. (cc) flic.kr/p/64fGf6
  106. 446kb < 8,755.2kb (cc) flic.kr/p/64fGf6 0% vs 100%
  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. <img src="rock-climber.jpg" alt="" /> One Image, One IMG
  110. (cc) flic.kr/p/64fGf6 EXTREMELYCOMPRESSED PROBLEMS
  111. (cc) flic.kr/p/64fGf6 COMBO MOVESCLOWN CAR TECHNIQUE 
 + HIGHLY COMPRESSED JPEGS
  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. IMGGIMME THAT NEW SCHOOL 1 2 3 #rwdimg
  115. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg 1
  116. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg 2
  117. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg 3
  118. #rwdimg
  119. #rwdimg
  120. #rwdimg
  121. #rwdimg
  122. #rwdimg <link rel="shortcut icon" href="/assets/favicon.ico" /> Favicon
  123. #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
  124. #rwdimg
  125. THANK YOU!CHRISTOPHER SCHMITT Sass Summit - http://SassSummit.com

×