FUNKA 2015

ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN

CHRISTOPHER SCHMITT @teleject

CHRISTOPHER SCHMITT@teleject

@teleject

@teleject

Responsive Media Course http://goo.gl/fKgZ6I

@teleject

http://CSSDevConf.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)

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

(cc) flic.kr/p/vUBHv

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

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) { ... }

(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

96PPIIF A

72 points-per-inch x [1+(1/3)] = 96 PPI

78μm

goo.gl/zpkFy78μ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

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/4DziUN

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

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

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

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

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

FEATURE TESTINGvs. BROWSER SNIFFING

1 Browser width

2 Screen resolution

3 Bandwidth

1 HiSRC and others

2

3

GIMME THAT OLD SCHOOLIMG

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

};

Check pixel density...

https://gist.github.com/2428356

+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

BRINGING PROBLEMSBRINGING THE PAIN

1

2

3

BRINGING PROBLEMS1 Double Taxation

2

3

BRINGING THE PAIN

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://css-tricks.com/which-responsive-images-solution-

should-you-use/

2x = MORE TIME COSTS

https://github.com/crdeutsch/hisrc/tree/v2

BRINGING THE PAIN1 Double Taxation

2 Browser Preloader

3

BRINGING THE PAIN

http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4

“A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.”

https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html

https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html

http://www.stevesouders.com/blog/2013/04/26/i/

MODERN BROWSERS NOW USE PRELOADER

http://www.stevesouders.com/blog/2013/04/26/i/

PRELOADS IMAGES BEFORE PAGE FULLY DOWNLOADS

BRINGING PROBLEMS1 Double Taxation

2

One Image, Still Not Ready3

Browser Preloader

BRINGING THE PAIN

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

https://github.com/igrigorik/http-client-hints

1

2

3

RWD IMAGESMEET THE NEW IMAGE ELEMENTS

1

2

3

RWD IMAGESMEET THE NEW IMAGE ELEMENTS

srcset

Basic Image Swap

<img src="swing-400.jpg" alt="Kettlebell Swing">

https://dev.opera.com/articles/native-responsive-images/

Image Fuel

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

Image Fuel

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

Image Fuel

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

Image Fuel

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

1

2

3

RWD IMAGESMEET THE NEW IMAGE ELEMENTS

srcset attribute

sizes attribute

Basic Image Swap

<img sizes="(min-width: 30em) 100vw, (min-width: 50em) 50vw, 200px" 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/

Basic Image Swap

<img sizes="(min-width: 30em) 100vw, (min-width: 50em) 50vw, 200px" 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/

Basic Image Swap

<img sizes="(min-width: 30em) 100vw, (min-width: 50em) 50vw, 200px" 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/

Basic Image Swap

<img sizes="(min-width: 30em) 100vw, (min-width: 50em) 50vw, 200px" 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/

IT’S STILL UP TO BROWSER TO PICK WHICH IMAGE TO USE

1

2

3 <picture>

srcset attribute

sizes attribute

RWD IMAGESMEET THE NEW IMAGE ELEMENTS

<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="cropped.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>

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

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

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

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

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

USE <PICTURE> FOR FINER CONTROL, ART DIRECTION

OTHERWISE, KEEP USING SRCSET & SIZES

http://responsivedesign.is/resources/images/picture-fill

https://wordpress.org/plugins/ricg-responsive-images/

1

2

3 <picture>

srcset attribute

sizes attribute

RWD IMAGESMEET THE NEW IMAGE ELEMENTS

THANK YOU! CHRISTOPHER SCHMITT

Newsletter - http://eepurl.com/TQAer

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: 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+

WORKAROUNDS TRICKS in CONTEXT

1 background-size: auto

2 SVG

3

&

(cc) flic.kr/p/64fGf6

SVG

Native SVG

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

PNG SVG

9+5+9+ 11.6+17+

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

https://github.com/svg/svgo-gui

https://github.com/svg/svgo-gui

HTML5 Boilerplate<!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head>

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

https://github.com/filamentgroup/grunticon/

https://wordpress.org/plugins/scalable-vector-graphics-svg/

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

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>

WORKAROUNDS TRICKS in CONTEXT

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

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!

" ←↑

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↑

← "!

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! ↙

" ← ←↗ ↑ ↖

↑ ↖

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↑ ↗

← " "↙ ! ↘

! ↘

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

Size Type Dimensions Display Px Density File Size

Extreme 2276x1400 1x & 2x 446kb

Extra Large

1024x1536 2x 1,745kb

512x768 1x 503kb

Large640x960 2x 746kb

320x480 1x 223kb

Medium500x750 2x 485kb

250x375 1x 145kb

Size Type Dimensions Display Px Density File Size

Extreme 2276x1400 1x & 2x 446kb

Extra Large

1024x1536 2x 1,745kb

512x768 1x 503kb

Large640x960 2x 746kb

320x480 1x 223kb

Medium500x750 2x 485kb

250x375 1x 145kb

Size Type Dimensions Display Px Density File Size

Extreme 2276x1400 1x & 2x 446kb

Extra Large

1024x1536 2x 1,745kb

512x768 1x 503kb

Large640x960 2x 746kb

320x480 1x 223kb

Medium500x750 2x 485kb

250x375 1x 145kb

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

One Image, One IMG

(cc) flic.kr/p/64fGf6

EXTREMELYCOMPRESSED PROBLEMS

(cc) flic.kr/p/64fGf6

COMBO MOVESHIGHLY COMPRESSED JPEGS

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

http://codepen.io/teleject/full/qpxmr/

THANK YOU! CHRISTOPHER SCHMITT