CHRISTOPHER SCHMITT

@teleject

ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN

CSS DEV CONF 2013
@teleject

CHRISTOPHER SCHMITT
@teleject
@teleject

http://nonbreakingspace.tv/
@teleject

http://artifactconf.com/
y

x
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)
http://www.useragentstring.com/

(cc) flic.kr/p/vUBHv
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...
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 TESTING
vs. BROWSER SNIFFING

1
2
3
FEATURE TESTING
vs. BROWSER SNIFFING

1
2
3

Browser width
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 TESTING
vs. BROWSER SNIFFING

1

Browser width

2

Screen resolution

3
72

PPI

HAS SERVED US WELL

(cc) flic.kr/p/6tjjRP
72 points-per-inch =
72 pixels-per-inch
96

PPI

IF A WINDOWS USER
72 points-per-inch
x [1+(1/3)]
= 96 PPI
“RETINA” DISPLAYS
300ppi at 12 inches from the eyes

goo.gl/zpkFy

78μm

78μm
“

[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 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/p/4...
“

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
isSlo...
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
2
3

.htaccess
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
embed...
http://adaptive-images.com/
ADD .HTACCESS, JS,
PHP 5, GD lib*, &
THEN <IMG>
IMG

GIMME THAT OLD SCHOOL

1

.htaccess

2

<picture> and/or srcset

3
media queries in HTML
<video controls>
<source type="video/mp4" src="video/windowsill_small.mp4"
media="all and (max-width...
<picture> patch
<picture alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<!-- <source src="small.jp...
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://www.webkit.org/blog/2910/improved-support-forhigh-resolution-displays-with-the-srcset-image-attribute/
IMG

GIMME THAT OLD SCHOOL

1

.htaccess

2

<picture> and/or srcset

3

HiSRC
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
Check pixel density...
$.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !==
undefined) {
$.hisrc.devicePixelRatio =...
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/whichresponsive-images-solutionshould-you-use/
24+
http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
ALL SOLUTIONS HAVE
2x HTTP REQUESTS
+ JAVASCRIPT
http://css-tricks.com/whichresponsive-images-solutionshould-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;
background: ur...
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 16kb
SVG 7kb
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.length; i...
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...
Font-based RWD

http://ilovetypography.com/2012/04/11/designing-type-systems/
Font-based RWD

avg file size
40kb/per font
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 href="http...
WORKAROUNDS &
TRICKS in CONTEXT

1

background-size: 100%

2

SVG

3

font-based solutions

4

compressed JPEGs

(cc) flic....
OS X Lion
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
M...
!

OS X Lion

"

The world’s most advanced desktop
operating system advances even further.
With over 250 new features incl...
!

↙

OS X Lion

"

The world’s most advanced desktop
operating system advances even further.
With over 250 new features i...
(cc) flic.kr/p/64fGf6
446kb < 8,755.2kb
0% vs 100%
(cc) flic.kr/p/64fGf6
<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

1024x1536

2x

1,745kb

512x768
...
Size Type

Dimensions

Display Px Density

File Size

Extreme

2276x1400

1x & 2x

446kb

1024x1536

2x

1,745kb

512x768
...
One Image, One IMG

<img src="rock-climber.jpg" alt="" />
EXTREMELY

COMPRESSED PROBLEMS

(cc) flic.kr/p/64fGf6
COMBO MOVES

CLOWN CAR TECHNIQUE
+ HIGHLY COMPRESSED JPEGS

(cc) flic.kr/p/64fGf6
<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/clowncar-technique-solving-for-adaptive-images-in-responsiveweb-design/
Combo Move: SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
375 231" preserveAspectRatio="xMidYMid meet"
tabindex...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375
231" preserveAspectRatio="xMidYMid meet" tabindex="-1"
aria-label...
Combo Move: SVG
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}

http://codepen.io/teleject/pen/KlzBe
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {
background-...
Size Type

Dimensions

Display Px Density

File Size

Extreme

2276x1400

1x & 2x

446kb

1024x1536

2x

1,745kb

512x768
...
Combo Move:
Compressed JPEG
@media screen and (min-width: 401px),
screen and (max-width: 800px) and (-webkit-min-device-pi...
@media screen and (max-width: 400px) {
svg {
width: 375px;
height: 231px; } }
@media screen and (min-width: 401px) {
svg {...
http://codepen.io/teleject/pen/KlzBe
http://codepen.io/teleject/pen/KlzBe
http://codepen.io/teleject/pen/KlzBe
COMBO MOVE

DON’T BLAME THE PLAYER

1

No additional HTTP request

2

# of images = 2

3

No JavaScript
http://codepen.io/...
IMG

GIMME THAT NEW SCHOOL

1
2
3
#rwdimg
IMG

GIMME THAT NEW SCHOOL

1

simple design for users

2
3
#rwdimg
IMG

GIMME THAT NEW SCHOOL

1

simple design for users

2

browser, server handshake

3
#rwdimg
IMG

GIMME THAT NEW SCHOOL

1

simple design for users

2

browser, server handshake

3

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.p...
#rwdimg
THANK YOU!
CHRISTOPHER SCHMITT

@teleject

The Non Breaking Space Podcast - http://nonbreakingspace.tv/
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
Upcoming SlideShare
Loading in …5
×

[cssdevconf] Adaptive Images in Responsive Web Design

2,285 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,285
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

[cssdevconf] Adaptive Images in Responsive Web Design

  1. 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CSS DEV CONF 2013
  2. 2. @teleject CHRISTOPHER SCHMITT
  3. 3. @teleject
  4. 4. @teleject http://nonbreakingspace.tv/
  5. 5. @teleject http://artifactconf.com/
  6. 6. y x
  7. 7. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  8. 8. alert("User-agent header sent: " + navigator.userAgent);
  9. 9. alert("User-agent header sent: " + navigator.userAgent);
  10. 10. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  11. 11. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  12. 12. 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://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  13. 13. 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
  14. 14. http://telejec.tv/12uYOC4
  15. 15. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3
  16. 16. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3 Browser width
  17. 17. 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
  18. 18. 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/
  19. 19. 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) { ... }
  20. 20. (cc) flic.kr/p/8Lo5Gk
  21. 21. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  22. 22. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  23. 23. 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  24. 24. 72 points-per-inch = 72 pixels-per-inch
  25. 25. 96 PPI IF A WINDOWS USER
  26. 26. 72 points-per-inch x [1+(1/3)] = 96 PPI
  27. 27. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes goo.gl/zpkFy 78μm 78μm
  28. 28. “ [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-laptopdesktop-displays-coming-in-2013.html
  29. 29. 72 PPI
  30. 30. 240
  31. 31. 240 PPI
  32. 32. 240 PPI
  33. 33. 72 PPI
  34. 34. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  35. 35. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  36. 36. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN
  37. 37. “ 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
  38. 38. “ 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
  39. 39. Speed test image https://github.com/adamdbradley/foresight.js
  40. 40. Speed test image +50k https://github.com/adamdbradley/foresight.js
  41. 41. 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
  42. 42. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  43. 43. IMG GIMME THAT OLD SCHOOL 1 2 3
  44. 44. IMG GIMME THAT OLD SCHOOL 1 2 3 .htaccess
  45. 45. 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
  46. 46. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+
  47. 47. “ ...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/
  48. 48. http://adaptive-images.com/
  49. 49. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>
  50. 50. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3
  51. 51. 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/polyfillingpicture-without-the-overhead/
  52. 52. <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/polyfillingpicture-without-the-overhead/
  53. 53. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
  54. 54. @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
  55. 55. https://www.webkit.org/blog/2910/improved-support-forhigh-resolution-displays-with-the-srcset-image-attribute/
  56. 56. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3 HiSRC
  57. 57. 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
  58. 58. 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>
  59. 59. 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>
  60. 60. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  61. 61. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  62. 62. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  63. 63. Force speed test +50k https://github.com/adamdbradley/foresight.js
  64. 64. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  65. 65. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  66. 66. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  67. 67. http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
  68. 68. 24+ http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
  69. 69. ALL SOLUTIONS HAVE 2x HTTP REQUESTS + JAVASCRIPT http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
  70. 70. WORKAROUNDS & TRICKS in CONTEXT 1 2 3 (cc) flic.kr/p/64fGf6
  71. 71. WORKAROUNDS & TRICKS 1 background-size: 100% 2 3 (cc) flic.kr/p/64fGf6
  72. 72. http://fittextjs.com/
  73. 73. 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+
  74. 74. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6
  75. 75. SVG
  76. 76. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  77. 77. PNG 16kb SVG 7kb 17+ 9+ 11.6+ 5+ 9+
  78. 78. http://petercollingridge.appspot.com/svg-optimiser
  79. 79. https://github.com/svg/svgo-gui
  80. 80. https://github.com/svg/svgo-gui
  81. 81. 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
  82. 82. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6
  83. 83. “ ...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.”
  84. 84. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/
  85. 85. Font-based RWD avg file size 40kb/per font http://ilovetypography.com/2012/04/11/designing-type-systems/
  86. 86. http://css-tricks.com/examples/IconFont/
  87. 87. http://fontello.com/
  88. 88. http://icomoon.io
  89. 89. 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>
  90. 90. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions 4 compressed JPEGs (cc) flic.kr/p/64fGf6
  91. 91. 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
  92. 92. ! 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
  93. 93. ! ↙ 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
  94. 94. (cc) flic.kr/p/64fGf6
  95. 95. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6
  96. 96. <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/polyfillingpicture-without-the-overhead/
  97. 97. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium
  98. 98. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium
  99. 99. One Image, One IMG <img src="rock-climber.jpg" alt="" />
  100. 100. EXTREMELY COMPRESSED PROBLEMS (cc) flic.kr/p/64fGf6
  101. 101. COMBO MOVES CLOWN CAR TECHNIQUE + HIGHLY COMPRESSED JPEGS (cc) flic.kr/p/64fGf6
  102. 102. <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);} https://github.com/estelle/clowncar } @media screen and (min-width: 1001px) {
  103. 103. <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);} https://github.com/estelle/clowncar } @media screen and (min-width: 1001px) {
  104. 104. http://coding.smashingmagazine.com/2013/06/02/clowncar-technique-solving-for-adaptive-images-in-responsiveweb-design/
  105. 105. Combo Move: SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> </svg> http://codepen.io/teleject/pen/KlzBe
  106. 106. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="aria label" role="img" title="title attribute"> <title>Clown Car Technique</title> <style> </style> <foreignObject> <!--[if lte IE 8]> <img src="../images/mobile-first.png" width="375" height="231" alt=""/> <![endif]--> </foreignObject> </svg> http://codepen.io/teleject/pen/KlzBe
  107. 107. Combo Move: SVG svg { background-size: 100% 100%; background-repeat: no-repeat; } http://codepen.io/teleject/pen/KlzBe
  108. 108. svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url("http://s.cdpn.io/168/picMedium-375x231-@1x-72ppi.jpg"); outline: green solid 5px; } } http://codepen.io/teleject/pen/KlzBe
  109. 109. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium
  110. 110. Combo Move: Compressed JPEG @media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixelratio: 1.75) { svg { background-image: url("extremely-highlycompressed.jpg"); outline: red solid 5px; } } http://codepen.io/teleject/pen/KlzBe
  111. 111. @media screen and (max-width: 400px) { svg { width: 375px; height: 231px; } } @media screen and (min-width: 401px) { svg { width: 750px; height: 462px; } } svg { outline: 5px solid black; } http://codepen.io/teleject/pen/KlzBe
  112. 112. http://codepen.io/teleject/pen/KlzBe
  113. 113. http://codepen.io/teleject/pen/KlzBe
  114. 114. http://codepen.io/teleject/pen/KlzBe
  115. 115. COMBO MOVE DON’T BLAME THE PLAYER 1 No additional HTTP request 2 # of images = 2 3 No JavaScript http://codepen.io/teleject/pen/KlzBe
  116. 116. IMG GIMME THAT NEW SCHOOL 1 2 3 #rwdimg
  117. 117. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 3 #rwdimg
  118. 118. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 #rwdimg
  119. 119. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats #rwdimg
  120. 120. #rwdimg
  121. 121. #rwdimg
  122. 122. #rwdimg
  123. 123. #rwdimg
  124. 124. Favicon <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  125. 125. 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
  126. 126. #rwdimg
  127. 127. THANK YOU! CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/

×