[CSSDevConf] Adaptive Images in Responsive Web Design 2014

CHRISTOPHER SCHMITT @teleject
ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN
CSS DEV CONF 2014

@teleject
CHRISTOPHER SCHMITT

@teleject
Responsive Media Course

@teleject
http://SassSummit.com/

@teleject
http://artifactconf.com/

[CSSDevConf] Adaptive Images in Responsive Web Design 2014

WHY DON’T WE ASK
THE BROWSER?
(cc) flic.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/

FEATURE TESTING vs. 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

72PPI
HAS
(cc) flic.kr/p/6tjjRP

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

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

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

[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

RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

1 Browser width
2 Screen resolution
3 Bandwidth

SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
(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.”
“

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 }, // polyfill
!
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 GIMME THAT OLD SCHOOL
1 srcset & sizes
2
3

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

Basic Image Swap
<img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
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="(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/

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

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

GIMME THAT OLD SCHOOL IMG
1 srcset & sizes
2 <picture>
3

<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>
38+ 33+ 25+ ? ?

USE <PICTURE>
POWER TO SOLVE ART
DIRECTION

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

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

GIMME THAT OLD SCHOOL IMG
1 srcset & sizes
2 <picture>
3 HiSRC and more

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

Check pixel density...
$.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !== undefined)
{
$.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

http://css-tricks.com/which-responsive-
images-solution-should-
you-use/

24+
you-use/

ALL SOLUTIONS HAVE
2x
+
you-use/

WORKAROUNDS TRICKS in CONTEXT
1
2
3
&
(cc) flic.kr/p/64fGf6

WORKAROUNDS &
TRICKS
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;
}
17+ 9+ 11.6+ 5+ 9+

1 background-size: auto
2 SVG
3
&

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

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://stackoverflow.com/questions/12846852/
svg-png-extension-switch

https://github.com/filamentgroup/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 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
avg file size
40kb
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>

WORKAROUNDS &
TRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
4 compressed JPEGs

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

X Lion!
" ←
OS
Learn More
↑

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

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
Large
640x960 2x 746kb
320x480 1x 223kb
Medium
500x750 2x 485kb
250x375 1x 145kb

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

EXTREMELY COMPRESSED PROBLEMS

COMBO MOVES CLOWN 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/

http://codepen.io/teleject/full/qpxmr/

IMG GIMME THAT NEW SCHOOL
1
2
3
#rwdimg

1
2
3
simple design for users
#rwdimg

1
2
3
browser, server handshake
#rwdimg

1
2
3
browser, server handshake
same, several formats
#rwdimg

Favicon
<link rel="shortcut icon" href="/assets/favicon.ico" />
#rwdimg

Mobile iOS Bookmarks
<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" />
#rwdimg

THANK YOU! CHRISTOPHER SCHMITT
Sass Summit - http://SassSummit.com

[CSSDevConf] Adaptive Images in Responsive Web Design 2014

Recommended

More Related Content

What's hot (20)

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

More from Christopher Schmitt (11)

Recently uploaded (20)

[CSSDevConf] Adaptive Images in Responsive Web Design 2014