Successfully reported this slideshow.
RWD SUMMIT 2014
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
CHRISTOPHER SCHMITT
@teleject
@teleject
@teleject
http://nonbreakingspace.tv/
@teleject
http://cssdevconf.com/
@teleject
http://artifactconf.com/
y
x
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...
http://telejec.tv/12uYOC4
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 SERVED US WELL
(cc) flic.kr/p/6tjjRP
72 points-per-inch =
72 pixels-per-inch
96PPI
IF A WINDOWS USER
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 .htaccess
2
3
IMGGIMME THAT OLD SCHOOL
Filament .htaccess
# Responsive Images
# Mobile-First images that scale responsively and responsibly
# Copyright 2010, Sco...
Filament .htaccess
<script src="responsiveimgs.js"></script>
<img src="sample-content/running-sml.jpg?
full=sample-content...
...the server has no way to
know what resolution the
client’s device is, so it can’t
send the appropriately sized
embeded ...
http://adaptive-images.com/
ADD .HTACCESS, JS,
PHP 5, GD lib*, &
THEN <IMG>
1 .htaccess
2 <picture> and/or srcset
3
GIMME THAT OLD SCHOOL
IMG
media queries in HTML
<video controls>
<source type="video/mp4" src="video/windowsill_small.mp4"
media="all and (max-width...
<span data-picture data-alt="A giant stone face at The
Bayon temple in Angkor Thom, Cambodia">
<span data-src="small.jpg">...
ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>
@srcset standard?
<h1><img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x,
banner-phone.jpeg 100w,
...
https://github.com/scottjehl/picturefill
https://www.webkit.org/blog/2910/improved-support-for-
high-resolution-displays-with-the-srcset-image-attribute/
<picture width="500" height="500">
<source media="(min-width: 45em)"
src="large.jpg">
<source media="(min-width: 18em)" sr...
<picture width="500" height="500">
<source media="(min-width: 45em)"
srcset="large-1.jpg 1x, large-2.jpg 2x">
<source medi...
1 .htaccess
2 <picture> and/or srcset
3 HiSRC
GIMME THAT OLD SCHOOL
IMG
Set, forget it HiSRC
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.7.2/jquery.min.js"></script>
<script src...
Set, forget it HiSRC
<div class="hisrc">
<img src="halloween-mobile-1st.png"
data-1x="halloween-x1.png"
data-2x="halloween...
Set, forget it HiSRC
<div class="hisrc">
<img src="halloween-mobile-1st.png"
data-1x="halloween-x1.png"
data-2x="halloween...
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 HTTP REQUESTS
+ JAVASCRIPT
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 16kb
SVG 7kb
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/
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 yo...
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/per font
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%
<picture> Patch
<picture alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<!-- <source src="small.jp...
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
L...
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
L...
<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
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329"
preserveAspectRatio="xMidYMid meet">
<title>Clown Car Techni...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329"
preserveAspectRatio="xMidYMid meet">
<title>Clown Car Techni...
http://coding.smashingmagazine.com/2013/06/02/clown-
car-technique-solving-for-adaptive-images-in-responsive-
web-design/
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
L...
@media screen and (min-width: 401px),
screen and (max-width: 800px) and (-webkit-min-device-pixel-
ratio: 1.75) {
svg {
ba...
http://codepen.io/teleject/pen/KlzBe
http://codepen.io/teleject/pen/KlzBe
http://codepen.io/teleject/pen/KlzBe
COMBO MOVEDON’T BLAME THE PLAYER
1
2
3
No additional HTTP request1
# of images = 2
No JavaScript
http://codepen.io/telejec...
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 @teleject
The Non Breaking Space Podcast - http://nonbreakingspace.tv/
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
Upcoming SlideShare
Loading in …5
×

[rwdsummit] Adaptive Images in Responsive Web Design

17,715 views

Published on

Published in: Design, Technology

[rwdsummit] Adaptive Images in Responsive Web Design

  1. RWD SUMMIT 2014 ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT @teleject
  2. CHRISTOPHER SCHMITT @teleject
  3. @teleject
  4. @teleject http://nonbreakingspace.tv/
  5. @teleject http://cssdevconf.com/
  6. @teleject http://artifactconf.com/
  7. y x
  8. http://cssspecificity.com
  9. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  10. alert("User-agent header sent: " + navigator.userAgent);
  11. alert("User-agent header sent: " + navigator.userAgent);
  12. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  13. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
  14. 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/
  15. 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
  16. http://telejec.tv/12uYOC4
  17. FEATURE TESTINGvs. BROWSER SNIFFING 1 2 3
  18. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 3
  19. 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
  20. 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/
  21. 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) { ... }
  22. (cc) flic.kr/p/8Lo5Gk
  23. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  24. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  25. 72PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  26. 72 points-per-inch = 72 pixels-per-inch
  27. 96PPI IF A WINDOWS USER
  28. 72 points-per-inch x [1+(1/3)] = 96 PPI
  29. 78μm goo.gl/zpkFy 78μm “RETINA” DISPLAYS300ppi at 12 inches from the eyes
  30. [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
  31. 72 PPI
  32. 240
  33. 240 PPI
  34. 240 PPI
  35. 72 PPI
  36. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  37. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  38. (cc) flic.kr/p/4DziUN SPEED TESTS HINDER SPEED, USER EXPERIENCE
  39. 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
  40. 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
  41. Speed test image https://github.com/adamdbradley/foresight.js
  42. Speed test image +50k https://github.com/adamdbradley/foresight.js
  43. 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
  44. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  45. IMGGIMME THAT OLD SCHOOL 1 2 3
  46. 1 .htaccess 2 3 IMGGIMME THAT OLD SCHOOL
  47. Filament .htaccess # Responsive Images # Mobile-First images that scale responsively and responsibly # Copyright 2010, Scott Jehl, Filament Group, Inc # Dual licensed under the MIT or GPL Version 2 licenses. # //Start Responsive Images RewriteEngine On # direct image requests to temp RewriteCond %{QUERY_STRING} full=(.*)&? RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L] # ignore trap for non-image requests, rewrite URL without trap segment RewriteRule (.*)rwd-router/(.*)$ $1$2 # //End Responsive Images https://github.com/filamentgroup/Responsive-Images
  48. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 8+4+
  49. ...the server has no way to know what resolution the client’s device is, so it can’t send the appropriately sized embeded images.” “ http://mattwilcox.net/archive/entry/id/1053/
  50. http://adaptive-images.com/
  51. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>
  52. 1 .htaccess 2 <picture> and/or srcset 3 GIMME THAT OLD SCHOOL IMG
  53. media queries in HTML <video controls> <source type="video/mp4" src="video/windowsill_small.mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/webm" src="video/windowsill_small.webm" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/mp4" src="video/windowsill.mp4"> <source type="video/webm" src="video/windowsill.webm"> <!-- proper fallback content goes here --> </video> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  54. <span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 400px)"></span> <span data-src="large.jpg" data-media="(min-width: 800px)"></span> <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span> <noscript> <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </span> https://github.com/scottjehl/picturefill
  55. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
  56. @srcset standard? <h1><img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> </h1> http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content-1.html#attr-img-srcset
  57. https://github.com/scottjehl/picturefill
  58. https://www.webkit.org/blog/2910/improved-support-for- high-resolution-displays-with-the-srcset-image-attribute/
  59. <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture> http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content-1.html#attr-img-srcset
  60. <picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> <p>Accessible text</p> </picture> http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content-1.html#attr-img-srcset
  61. 1 .htaccess 2 <picture> and/or srcset 3 HiSRC GIMME THAT OLD SCHOOL IMG
  62. 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
  63. 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>
  64. 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>
  65. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  66. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  67. $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; Check pixel density... https://gist.github.com/2428356
  68. +50k https://github.com/adamdbradley/foresight.js Force speed test
  69. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  70. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  71. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  72. http://css-tricks.com/which- responsive-images-solution- should-you-use/
  73. 24+http://css-tricks.com/which- responsive-images-solution- should-you-use/
  74. http://css-tricks.com/which- responsive-images-solution- should-you-use/ ALL SOLUTIONS HAVE 2x HTTP REQUESTS + JAVASCRIPT
  75. WORKAROUNDSTRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6
  76. WORKAROUNDSTRICKS 1 background-size: 100% 2 3 & (cc) flic.kr/p/64fGf6
  77. http://fittextjs.com/
  78. 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+
  79. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6
  80. SVG
  81. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  82. PNG 16kb SVG 7kb 9+5+9+ 11.6+17+
  83. http://petercollingridge.appspot.com/svg-optimiser
  84. https://github.com/svg/svgo-gui
  85. https://github.com/svg/svgo-gui
  86. 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
  87. https://github.com/filamentgroup/grunticon/
  88. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6
  89. ...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.” “
  90. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/
  91. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ avg file size 40kb/per font
  92. http://css-tricks.com/examples/IconFont/
  93. http://fontello.com/
  94. http://icomoon.io
  95. 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>
  96. WORKAROUNDSTRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 4 compressed JPEGs
  97. 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
  98. 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 ! " ← ↑
  99. 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 ! ↙ " ← ← ↗ ↑ ↖ ↑ ↖
  100. (cc) flic.kr/p/64fGf6
  101. 446kb < 8,755.2kb (cc) flic.kr/p/64fGf6 0% vs 100%
  102. <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/
  103. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb Large 640x960 2x 746kb Large 320x480 1x 223kb Medium 500x750 2x 485kb Medium 250x375 1x 145kb
  104. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb Large 640x960 2x 746kb Large 320x480 1x 223kb Medium 500x750 2x 485kb Medium 250x375 1x 145kb
  105. <img src="rock-climber.jpg" alt="" /> One Image, One IMG
  106. (cc) flic.kr/p/64fGf6 EXTREMELYCOMPRESSED PROBLEMS
  107. (cc) flic.kr/p/64fGf6 COMBO MOVESCLOWN CAR TECHNIQUE + HIGHLY COMPRESSED JPEGS
  108. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { https://github.com/estelle/clowncar
  109. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { https://github.com/estelle/clowncar
  110. http://coding.smashingmagazine.com/2013/06/02/clown- car-technique-solving-for-adaptive-images-in-responsive- web-design/
  111. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb Large 640x960 2x 746kb Large 320x480 1x 223kb Medium 500x750 2x 485kb Medium 250x375 1x 145kb
  112. @media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixel- ratio: 1.75) { svg { background-image: url("extremely-highly-compressed.jpg"); outline: red solid 5px; } } http://codepen.io/teleject/pen/KlzBe Combo Move: Compressed JPEG
  113. http://codepen.io/teleject/pen/KlzBe
  114. http://codepen.io/teleject/pen/KlzBe
  115. http://codepen.io/teleject/pen/KlzBe
  116. COMBO MOVEDON’T BLAME THE PLAYER 1 2 3 No additional HTTP request1 # of images = 2 No JavaScript http://codepen.io/teleject/pen/KlzBe
  117. IMGGIMME THAT NEW SCHOOL 1 2 3 #rwdimg
  118. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg 1
  119. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg 2
  120. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg 3
  121. #rwdimg
  122. #rwdimg
  123. #rwdimg
  124. #rwdimg
  125. #rwdimg <link rel="shortcut icon" href="/assets/favicon.ico" /> Favicon
  126. #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
  127. #rwdimg
  128. THANK YOU!CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/

×