[Austin WordPress Meetup] Adaptive Images in Responsive Web Design

AUSTIN WORDPRESS 2015

ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN

CHRISTOPHER SCHMITT @teleject

CHRISTOPHER SCHMITT@teleject

@teleject

@teleject

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

http://goo.gl/fKgZ6I

@teleject

http://CSSDevConf.com/

http://CSSDevConf.com/

@teleject

http://JavaScriptSummit.com/

http://JavaScript

y

x

http://cssspecificity.com

http://telejec.tv/12uYOC4





WHY DON’T WE ASK THE BROWSER?

(cc) flic.kr/p/vUBHv

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


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/




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

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

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/

CSS media queries

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

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




(cc) flic.kr/p/8Lo5Gk


BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS


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

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


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

“



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

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

Speed test image

+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);




1 Browser width

2 Screen resolution

3 Bandwidth

IMGGIMME THAT OLD SCHOOL

1

2

3

1 srcset & sizes

2

3

IMGGIMME THAT OLD SCHOOL

Basic Image Swap

<img src="headshot_500px.jpg" srcset="headshot_650px.jpg 1.5x, headshot_1000px.jpg 2x" width="500" alt="Headshot">

http://caniuse.com/#search=srcset

http://caniuse.com/#search=srcset

Basic Image Swap

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




Basic Image Swap




Basic Image Swap




Basic Image Swap

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw” srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing">



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

BUT WILL USE THESE ATTRIBUTES 1,000% OF THE TIME*

* Science

1 srcset & sizes

2 <picture>

3

GIMME THAT OLD SCHOOLIMG

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

25+38+ 33+ ? ?

<picture>


25+38+ 33+ ? ?

<picture>


25+38+ 33+ ? ?

<picture>

<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>

25+38+ 33+ ? ?

USE <PICTURE> POWER TO SOLVE ART DIRECTION

& ONLY WHEN ALL OTHER CSS-y OPTIONS HAVE BEEN EXPLORED

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


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


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


1 srcset & sizes

2 <picture>

3 HiSRC and others

GIMME THAT OLD SCHOOLIMG

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


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 +


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

&



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


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://github.com/filamentgroup/grunticon/

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



1 background-size: auto

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


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

" ← ←↗ ↑ ↖

↑ ↖



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


EXTREMELYCOMPRESSED PROBLEMS



COMBO MOVESCLOWN CAR TECHNIQUE + HIGHLY 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/




IMGGIMME THAT NEW SCHOOL

1

2

3

#rwdimg



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


#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" href="apple-touch-icon-precomposed.png" />

Mobile iOS Bookmarks


#rwdimg


THANK YOU! CHRISTOPHER SCHMITT

Sass Summit - http://SassSummit.com

http://SassSummit.com