[convergefl] Adaptive Images in Responsive Web Design

CHRISTOPHER SCHMITT @teleject

ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN

CONVERGEFL 2012

Friday, October 5, 12

WHY DON’T WE ASK
THE BROWSER?

(cc) ﬂic.kr/p/vUBHv

Mozilla/1.0 (Win3.1)

http://www.useragentstring.com/


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


FEATURE TESTING
vs. BROWSER SNIFFING

1

2

3


FEATURE TESTING

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





(cc) ﬂic.kr/p/8Lo5Gk

BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

FEATURE TESTING

1 Browser width

2 Screen resolution

3


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

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


96 PPI
IF A WINDOWS USER

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

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

78μm
goo.gl/zpkFy

240

144

72 PPI

“ [In 2013, Intel sees their
product line] oﬀer 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


240 PPI


RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

FEATURE TESTING

1 Browser width

2 Screen resolution

3 Bandwidth


SPEED TESTS
HINDER 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.”


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


IMG
GIMME THAT OLD SCHOOL

1

2

3


IMG

1 .htaccess

2

3


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 temp
RewriteCond %{QUERY_STRING} full=(.*)&?
RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L]
# ignore trap for non-image requests, rewrite URL without trap segment
RewriteRule (.*)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>

IMG

1 .htaccess

2 <picture> and/or srcset

3


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

<source src="extralarge.jpg" media="(min-width: 1000px)">

<noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in
Angkor Thom, Cambodia"></noscript>
</picture>

http://wil.to/pictureﬁll/

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


IMG

1 .htaccess

2 <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 TO
FIND OUT RESPONSIVE
PATH 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

+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


2 TRICK PONY


CSS IS CORE.
WE USE CSS MEDIA
QUERIES FOR DESIGN

http://mediaqueri.es/


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
transparentGifSrc: 'data:image/
gif;base64,R0lGODlhAQABAIAAAMz/
AAAAACH5BAEAAAAALAAAAAABAAE
AAAICRAEAOw==',

17+ 9+ 11.6+ 5+ 8+


Single pixel GIF

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

1

2

3

(cc) ﬂic.kr/p/64fGf6

WORKAROUNDS &
TRICKS

1 background-size: auto

2

3


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


2 SVG

3


Native SVG

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


PNG 16kb
SVG 7kb

17+ 9+ 11.6+ 5+ 9+


HTML5 Boilerplate
<!doctype html>



 <html class="no-js" lang="en"> 
<head>

jQuery check
var 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 &
TRICKS


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 speciﬁc font’s version...
just copy and paste them into
your HTML.”


Font-based RWD

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


IMG
GIMME THAT NEW SCHOOL

1

2

3


IMG

1 simple design for users

2

3

#rwdimg


IMG


2 browser, server handshake

3

#rwdimg


IMG


2 browser, server handshake

3 same, several formats

#rwdimg


“ JavaScript has solved a lot of
our past problems, so it’s
human nature to beseech her
to save us again.”

http://www.alistapart.com/articles/mo-pixels-mo-problems/


#rwdimg


THANK YOU!
CHRISTOPHER SCHMITT @teleject

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


[convergefl] Adaptive Images in Responsive Web Design

More Related Content

Similar to [convergefl] Adaptive Images in Responsive Web Design (20)

More from Christopher Schmitt (19)

Recently uploaded (20)

[convergefl] Adaptive Images in Responsive Web Design