More Related Content Similar to [CSSDevConf] Adaptive Images in Responsive Web Design 2014 (20) More from Christopher Schmitt (11) [CSSDevConf] Adaptive Images in Responsive Web Design 201424. 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
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
25. 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/
(cc) flic.kr/p/vUBHv
29. 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
30. 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/
31. 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) { ... }
41. [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
51. Testing for speed of an internet
connection is like stepping in
front of a car to see how fast it
is.”
“
(cc) flic.kr/p/4DziUN
52. 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) flic.kr/p/4DziUN
55. 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
59. Basic Image Swap
<img src="headshot_500px.jpg"
srcset="headshot_650px.jpg 1.5x,
headshot_1000px.jpg 2x"
width="500" alt="Headshot">
60. 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/
61. 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/
62. 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/
63. 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/
64. 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/
66. BUT YOU WILL USE
THESE ATTRIBUTES
1,000% OF THE TIME*
* Science
69. <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+ ? ?
70. <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+ ? ?
71. <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+ ? ?
72. <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+ ? ?
74. & ONLY WHEN ALL
OTHER CSS-y OPTIONS
HAVE BEEN EXPLORED
76. GIMME THAT OLD SCHOOL IMG
1 srcset & sizes
2 <picture>
3 HiSRC and more
77. 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
78. 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>
79. 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>
81. DO NATIVE SPEED
TEST FOR MOBILE
DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
82. Check pixel density...
$.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !== undefined)
{
$.hisrc.devicePixelRatio =
window.devicePixelRatio
};
https://gist.github.com/2428356
85. BETWEEN 4G &
300 Kbps MEANS
REGULAR DESKTOP
IMAGES SWAPPED IN
86. FAST SPEED & HIGH
DENSITY, RETINA
IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
89. ALL SOLUTIONS HAVE
2x
+
http://css-tricks.com/which-responsive-
images-solution-should-
you-use/
93. 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+
103. 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
105. WORKAROUNDS TRICKS in CONTEXT
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
106. ...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.”
“
111. Font-based RWD
avg file size
40kb
http://ilovetypography.com/2012/04/11/designing-type-systems/
115. 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>
116. WORKAROUNDS &
TRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
4 compressed JPEGs
(cc) flic.kr/p/64fGf6
121. 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
122. X Lion!
" ←
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
↑
iCloud iOS 5 OSX Lion iPad 2 iPhone
123. X Lion! ↙
" ← ←
↗ ↑ ↖
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
↑ ↖
iCloud iOS 5 OSX Lion iPad 2 iPhone
127. 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
128. 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
140. IMG GIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
#rwdimg
141. IMG GIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
same, several formats
#rwdimg
148. Mobile iOS Bookmarks
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed"
href="apple-touch-icon-precomposed.png" />
#rwdimg