[rwdsummit2012] Adaptive Images in Responsive Web Design

CHRISTOPHER SCHMITT @telejectADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN RWD SUMMIT 2012

WHY DON’T WE ASKTHE BROWSER? (cc) ﬂic.kr/p/vUBHv

Mozilla/1.0 (Win3.1)http://www.useragentstring.com/ (cc) ﬂic.kr/p/vUBHv

Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)http://www.useragentstring.com/ (cc) ﬂic.kr/p/vUBHv

Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3http://www.useragentstring.com/ (cc) ﬂic.kr/p/vUBHv

Mozilla/5.0 (Macintosh; Intel MacOS 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) ﬂic.kr/p/vUBHv

FEATURE TESTINGvs. BROWSER SNIFFING123

FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23

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) ﬂic.kr/p/8Lo5Gk

BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS

FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3

72 PPIHAS SERVED US WELL (cc) ﬂic.kr/p/6tjjRP

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

96 PPIIF A WINDOWS USER

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

“RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μmgoo.gl/zpkFy

240 14472 PPI

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

FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth

SPEED TESTSHINDER SPEED,USER EXPERIENCE (cc) ﬂic.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) ﬂic.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) ﬂic.kr/p/4DziUN

Speed test imagehttps://github.com/adamdbradley/foresight.js

Speed test image +50khttps://github.com/adamdbradley/foresight.js

Native speed test // @Modernizrs network-connection.js connection = navigator.connection || { type: 0 }, // polyﬁll isSlowConnection = connection.type == 3 || connection.type == 4 | /^[23]g$/.test(connection.type);http://davidbcalhoun.com/2010/using-navigator-connection-android

IMGGIMME THAT OLD SCHOOL123

IMGGIMME THAT OLD SCHOOL1 .htaccess23

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 ImagesRewriteEngine 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/ﬁlamentgroup/Responsive-Images

Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" /> 4+ 8+

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

IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture> and/or srcset3

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/polyﬁlling- 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>http://www.w3.org/community/respimg/2012/03/15/polyﬁlling- picture-without-the-overhead/

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

IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture>3 HiSRC

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>

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 TOFIND OUT RESPONSIVEPATH 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 !== undeﬁned) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356

Force speed test +50khttps://github.com/adamdbradley/foresight.js

LESS THAN 4G MEANSMOBILE IMAGES LEFTIN PLACE

BETWEEN 4G &300 Kbps MEANSREGULAR DESKTOPIMAGES SWAPPED IN

FAST SPEED & HIGHDENSITY, RETINAIMAGES SWAPPED INhttps://github.com/crdeutsch/hisrc/tree/v2

2 TRICK PONY

CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN

http://mediaqueri.es/

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

Single pixel GIF

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: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==, 17+ 9+ 11.6+ 5+ 8+

Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: http://example.com/spg.gif, 17+ 9+ 11.6+ 5+ 6+

2 APPROACHES,1 SIMPLE SOLUTION. https://github.com/teleject/hisrc

2 APPROACHES,1 SIMPLE SOLUTION.HEART WEB DESIGN https://github.com/teleject/hisrc

WORKAROUNDS &TRICKS123 (cc) ﬂic.kr/p/64fGf6

WORKAROUNDS &TRICKS1 background-size: auto23 (cc) ﬂic.kr/p/64fGf6

http://ﬁttextjs.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;} 17+ 9+ 11.6+ 5+ 9+

WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 (cc) ﬂic.kr/p/64fGf6

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

PNG 16kb SVG 7kb17+ 9+ 11.6+ 5+ 9+

HTML5 Boilerplate<!doctype html> <html class="no-js" lang="en"> <head>

jQuery checkvar checkBrowser = $(html).hasClass(lt-ie9);<div class="svgswap"> <img src="example.svg" data-svgswap="example.png"></div> https://github.com/teleject/svg-swap

http://raphaeljs.com/

WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 font-based solutions (cc) ﬂic.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 speciﬁc font’s version... just copy and paste them into your HTML.”

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

http://css-tricks.com/examples/IconFont/

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>

IMGGIMME THAT NEW SCHOOL123

IMGGIMME THAT NEW SCHOOL1 simple design for users23 #rwdimg

IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 #rwdimg

IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 same, several formats #rwdimg

#rwdimg

#rwdimg

THANK YOU!CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmSThe Non Breaking Space Podcast - http://nonbreakingspace.tv/

http://lanyrd.com	77
http://www.twylah.com	23
https://twitter.com	15
https://si0.twimg.com	1
http://kpcompass.com	1
http://10.75.74.3	1

[rwdsummit2012] Adaptive Images in Responsive Web Design

by Christopher Schmitt on Aug 29, 2012

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 118

Statistics