christopher schmitt, "adaptive images for responsive web design"

#WVBCN

ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN

CHRISTOPHER SCHMITT @teleject

#WVBCN

ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN

CHRISTOPHER SCHMITT @telejectWhat Bruce Said!

CHRISTOPHER SCHMITT@teleject

@teleject

http://nonbreakingspace.tv/

http://davidbcalhoun.com/2010/using-navigator-connection-android


@teleject

http://dwmgbook.com/



@teleject

http://CSSsummit.com/



@teleject

http://cssdevconf.com/



WHY DON’T WE ASK THE BROWSER?

(cc) flic.kr/p/vUBHv

http://flic.kr/p/vUBHv


alert("User-agent header sent: " + navigator.userAgent);

Mozilla/1.0 (Win3.1)

http://www.useragentstring.com/


http://webaim.org/blog/user-agent-string-history/




Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)







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.3http://webaim.org/blog/user-agent-string-history/






FEATURE TESTINGvs. BROWSER SNIFFING

1

2

3


1 Browser width

2

3

A scripting approach var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement &&

( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

//IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; }

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow



The jQuery approach

// returns width of browser viewport$(window).width(); // returns height of browser viewport$(window).height();

// returns width of HTML document $(document).width(); // returns height of HTML document$(document).height();

http://api.jquery.com/width/ & http://api.jquery.com/height/



http://api.jquery.com/height/

http://api.jquery.com/height/

CSS media queries

// default, mobile-1st CSS rules devices go here

@media screen and (min-width: 480px) { ... }




(cc) flic.kr/p/8Lo5Gk

BROWSER WIDTHGIVES US FRAME, NOT THE CANVAS


1 Browser width

2 Screen resolution

3

72PPIHAS SERVED US WELL

(cc) flic.kr/p/6tjjRP



72 points-per-inch =72 pixels-per-inch

96PPIIF 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://liliputing.com/2012/04/intel-retina-laptop-desktop-displays-coming-in-2013.html





72 PPI

240 PPI

72 PPI

RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES


1 Browser width

2 Screen resolution

3 Bandwidth

(cc) flic.kr/p/4DziUN

SPEED TESTSHINDER SPEED,USER EXPERIENCE



Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.”

“




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.”“




Speed test image

https://github.com/adamdbradley/foresight.js



Speed test image

+50k




Native speed test

// @Modernizr's network-connection.jsconnection = navigator.connection || {

type: 0 }, // polyfill

isSlowConnection = connection.type == 3|| connection.type == 4

| /^[23]g$/.test(connection.type);





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, Scott Jehl, Filament Group, Inc # Dual licensed under the MIT or GPL Version 2 licenses. # //Start Responsive Images RewriteEngine On# direct image requests to tempRewriteCond %{QUERY_STRING} full=(.*)&?RewriteRule (.*)rwd-router/.*\.(jpe?g|png|gif|webp) $1%1 [L]# ignore trap for non-image requests, rewrite URL without trap segmentRewriteRule (.*)rwd-router/(.*)$ $1$2# //End Responsive Images

https://github.com/filamentgroup/Responsive-Images



Filament .htaccess

<script src="responsiveimgs.js"></script>

<img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />

8+4+

...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/



http://adaptive-images.com/



ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>

1 .htaccess

2 <picture> and/or srcset

3

GIMME THAT OLD SCHOOLIMG

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"> </video>

http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/

<picture> patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">  <source src="small.jpg">  <source src="medium.jpg" media="(min-width: 400px)">  <source src="large.jpg" media="(min-width: 800px)">  <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript></picture>

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, banner-phone-HD.jpeg 100w 2x">

</h1>

http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset





1 .htaccess

2 <picture> and/or srcset

3 HiSRC

GIMME THAT OLD SCHOOLIMG

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

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js






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>

SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...

DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...


$.hisrc.devicePixelRatio = 1;if(window.devicePixelRatio !== undefined) {

$.hisrc.devicePixelRatio = window.devicePixelRatio

};

Check pixel density...

https://gist.github.com/2428356



+50k


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

2 TRICK PONY

CSS IS CORE.WE USE CSS MEDIA QUERIES FOR DESIGN

http://mediaqueri.es/



CSS media queries

// default, mobile-1st CSS rules devices go here





Single pixel GIF

$.hisrc.defaults = { useTransparentGif: true,

http://www.w3.org/community/respimg/2012/04/06/responsive-content-images-using-a-spacer-png-and-background-image/

Single pixel GIF





$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http://example.com/spg.gif',

6+5+9+ 11.6+17+

Single pixel GIF

http://example.com/spg.gif'




$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',

8+5+9+ 11.6+17+

Single pixel GIF

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 HAVE2x HTTP REQUESTS+ JAVASCRIPT







WORKAROUNDS TRICKS in CONTEXT

1

2

3

&

(cc) flic.kr/p/64fGf6



WORKAROUNDS TRICKS

1 background-size: 100%

2

3

&




http://fittextjs.com/



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+


1 background-size: auto

2 SVG

3

&




Native SVG

http://caniuse.com/#search=SVG%20in%20HTML%20img%20element



PNG 16kbSVG 7kb

9+5+9+ 11.6+17+

http://petercollingridge.appspot.com/svg-optimiser



Modernizr checkif(!Modernizr.svg){ var images = document.getElementsByTagName("img"); for(var i = 0; i < images.length; i++){ var src = images[i].src.split("."); images[i].src = src[0] + ".png"; }}

http://stackoverflow.com/questions/12846852/svg-png-extension-switch







2 SVG (Clown Car)

3

&






2 SVG

3 font-based solutions

&




...if you use <meta charset="utf-8"> (you should be for HTML5), you’re adding common Unicode characters like ♫ and ✆, and you don’t need a specific font’s version... just copy and paste them into your HTML.”

“

Font-based RWD

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



Font-based RWD

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

avg file size 40kb/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://example.com/cloud/save/"> <span data-icon="C" aria-hidden="true"></span> Save to Cloud</a>


1 background-size: 100%

2 SVG

3 font-based solutions

&

(cc) flic.kr/p/64fGf64 compressed JPEGs



iCloud iOS 5 OSX Lion iPad 2 iPhone

OSThe world’s most advanced desktop operating system advances even further.With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever.

Learn More

X Lion



Learn More

X Lion!

" ←↑



Learn More

X Lion! ↙

" ← ←↗ ↑ ↖

↑ ↖



Learn More

X Lion↑ ↗

← " "↙ ! ↘

! ↘

446kb < 8,755.2kb


0% vs 100%



Size Type Dimensions Display Px Density File Size

Extreme 2276x1400 1x & 2x 446kb

Extra Large

1024x1536 2x 1,745kbExtra Large 512x768 1x 503kb

Large640x960 2x 746kb

Large320x480 1x 223kb

Medium500x750 2x 485kb

Medium250x375 1x 145kb

<picture> Patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">  <source src="small.jpg">  <source src="medium.jpg" media="(min-width: 400px)">  <source src="large.jpg" media="(min-width: 800px)">  <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript></picture>

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

One Image, One IMG


EXTREMELYCOMPRESSED PROBLEMS



Clown Car SVG<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) { svg {background-image: url(images/huge.png);} } </style></svg>

https://github.com/estelle/clowncar

http://www.w3.org/2000/svg




http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-

web-design/







svg { background-size: 100% 100%; background-repeat: no-repeat; }


Combo Move: SVG



svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url("http://s.cdpn.io/168/[email protected]"); outline: green solid 5px; } }


Combo Move: SVG

http://s.cdpn.io/168/[email protected]






@media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1.75) { svg { background-image: url("http://s.cdpn.io/168/pic-Extreme-2276x1400-72ppi.jpg"); outline: red solid 5px; } }


Combo Move: Compressed JPEG

http://s.cdpn.io/168/pic-Extreme-2276x1400-72ppi.jpg






@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; }


Combo Move: CSS



COMBO MOVEDON’T BLAME THE PLAYER

1

2

3

No additional HTTP request1

Min. # of images = 2

No JavaScript




IMGGIMME THAT NEW SCHOOL

1

2

3


1

2

3

simple design for users

#rwdimg

1




1

2

3


browser, server handshake

#rwdimg

2




1

2

3


browser, server handshake

same, several formats

#rwdimg

3



#rwdimg



http://telejec.tv/12uYOC4



#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 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



#rwdimg



THANK YOU!CHRISTOPHER SCHMITT @teleject

The Non Breaking Space Podcast - http://nonbreakingspace.tv/

http://nonbreakingspace.tv

http://nonbreakingspace.tv

christopher schmitt, "adaptive images for responsive web design"

Technology