FUNKA 201 5 ADAPTIVE IM A G ES  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

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.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/

Mozilla/1.0 (Win3.1)

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

(cc) flic.kr /p/vUBHv

FEATURE TESTING vs. BROWSER SNIFFING 1 2 3

FEATURE TESTING vs. 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 $(d ocument ).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 : 480 px) { ... }
@media screen and ( min-width : 600 px) { ... }
@media screen and ( min-width : 768 px) { ... }
@media screen and ( min-width : 910 px) { ... }

(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

(cc) flic.kr /p/6tjjRP

72 points -per-inch

72 pixels -per-inch

96

PPI IF A

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

= 96 PPI

78 μ m 78 μ m “RETINA” DISPLAYS 300ppi at 12 inches from the eyes

goo.gl /zpkFy

[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 TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth

SPEED TESTS HINDER SPEED, U SER E X PERIENCE

(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/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 https://github.com/adamdbradley/foresight.js

+50k

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 TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth

1 HiSRC and others 2 3 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.devicePixelRatio

}; Check pixel density... https://gist.github.com/2428356

https://github.com/adamdbradley/foresight.js Force speed test

+50k

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 PROBLEMS BRINGING THE PAIN 1 2 3

BRINGING PROBLEMS 1 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 PAIN 1 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 PROBLEMS 1 Double Taxation 2 One Image, Still Not Ready 3 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 IMAG ES MEET THE NEW IMAGE ELEMENTS

1 2 3 RWD IMAG ES MEET 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 IMAG ES MEET 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 IMAG ES MEET 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>

USE <PICTURE>

POWER TO SOLVE 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 IMAG ES MEET THE NEW IMAGE ELEMENTS

y x

THANK YOU !  Newsletter - http://eepurl.com/TQAer

CHRISTOPHER SCHMITT