[rwdsummit] Adaptive Images in Responsive Web Design

RWD SUMMIT 2014
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject

@teleject
http://nonbreakingspace.tv/

@teleject
http://cssdevconf.com/

@teleject
http://artifactconf.com/

http://cssspeciﬁcity.com

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

alert("User-agent header sent: " + navigator.userAgent);

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/

http://telejec.tv/12uYOC4

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/

CSS media queries
// default, mobile-1st CSS rules devices go here
@media screen and (min-width: 480px) { ... }

BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

1 Browser width
2 Screen resolution
3

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

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

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

78μm
goo.gl/zpkFy
78μm
“RETINA” DISPLAYS300ppi at 12 inches from the eyes

[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

RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

1 Browser width
2 Screen resolution
3 Bandwidth

(cc) ﬂic.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

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

IMGGIMME THAT OLD SCHOOL
1
2
3

1 .htaccess
2
3
IMGGIMME THAT OLD SCHOOL

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" />
8+4+

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

1 .htaccess
2 <picture> and/or srcset
3
GIMME THAT OLD SCHOOL
IMG

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/

<span data-picture data-alt="A giant stone face at The
Bayon temple in Angkor Thom, Cambodia">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width:
400px)"></span>
<span data-src="large.jpg" data-media="(min-width:
800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width:
1000px)"></span>
<noscript>
<img src="small.jpg" alt="A giant stone face at The
Bayon temple in Angkor Thom, Cambodia">
</noscript>
</span>
https://github.com/scottjehl/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

https://github.com/scottjehl/pictureﬁll

https://www.webkit.org/blog/2910/improved-support-for-
high-resolution-displays-with-the-srcset-image-attribute/

<picture width="500" height="500">
<source media="(min-width: 45em)"
src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>

<picture width="500" height="500">
srcset="large-1.jpg 1x, large-2.jpg 2x">
srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>

1 .htaccess
2 <picture> and/or srcset
3 HiSRC
GIMME THAT OLD SCHOOL
IMG

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>
https://github.com/teleject/hisrc

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

$.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !==
undeﬁned) {
$.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-
should-you-use/

http://css-tricks.com/which-
should-you-use/
ALL SOLUTIONS HAVE
2x HTTP REQUESTS
+ JAVASCRIPT

WORKAROUNDSTRICKS in CONTEXT
1
2
3
&
(cc) ﬂic.kr/p/64fGf6

WORKAROUNDSTRICKS
1 background-size: 100%
2
3
&

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
&

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

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

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

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

Modernizr check
if(!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://stackoverﬂow.com/questions/12846852/
svg-png-extension-switch

https://github.com/ﬁlamentgroup/grunticon/

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

Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
avg file size
40kb/per font

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
&
4 compressed JPEGs

iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The 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

OS
Learn More
X Lion
!
" ←
↑

OS
Learn More
X Lion
! ↙
" ← ←
↗ ↑ ↖
↑ ↖

446kb < 8,755.2kb
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="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/

Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
Large
512x768 1x 503kb
Large
640x960 2x 746kb
Large
320x480 1x 223kb
Medium
500x750 2x 485kb
Medium
250x375 1x 145kb

<img src="rock-climber.jpg" alt="" />
One Image, One IMG

EXTREMELYCOMPRESSED PROBLEMS

COMBO MOVESCLOWN CAR TECHNIQUE
+ HIGHLY COMPRESSED JPEGS

http://coding.smashingmagazine.com/2013/06/02/clown-
car-technique-solving-for-adaptive-images-in-responsive-
web-design/

@media screen and (min-width: 401px),
screen and (max-width: 800px) and (-webkit-min-device-pixel-
ratio: 1.75) {
svg {
background-image:
url("extremely-highly-compressed.jpg");
outline: red solid 5px;
}
}
http://codepen.io/teleject/pen/KlzBe
Combo Move:
Compressed JPEG

COMBO MOVEDON’T BLAME THE PLAYER
1
2
3
No additional HTTP request1
# of images = 2
No JavaScript

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

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

[rwdsummit] Adaptive Images in Responsive Web Design

Recommended

More Related Content

What's hot (20)

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

More from Christopher Schmitt (12)

Recently uploaded (20)

[rwdsummit] Adaptive Images in Responsive Web Design