A presentation at Funka Accessibility Days 2015 in in Stockholm, Sweden by Christopher Schmitt
FUNKA 201 5 ADAPTIVE IM A G ES IN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT
@teleject
CHRISTOPHER SCHMITT @teleject
@teleject
@teleject Responsive Media Course http://goo.gl/fKgZ6I
@teleject http://CSSDevConf.com/
y x
http://cssspecificity.com
http://cssspecificity.com
http://cssspecificity.com
WHY DON’T WE ASK
THE BROWSER?
(cc) flic.kr /p/vUBHv
alert("User-agent header sent: " + navigator.userAgent );
alert("User-agent header sent: " + navigator.userAgent );
Mozilla/1.0 (Win3.1) http://www.useragentstring.com/
(cc) flic.kr /p/vUBHv
Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/
Mozilla/1.0 (Win3.1)
(cc) flic.kr /p/vUBHv
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://www.useragentstring.com/
(cc) flic.kr /p/vUBHv
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
FEATURE TESTING vs. BROWSER SNIFFING 1 2 3
FEATURE TESTING vs. BROWSER SNIFFING 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
$(d
ocument
).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
:
480
px) { ... }
@media
screen and (
min-width
:
600
px) { ... }
@media
screen and (
min-width
:
768
px) { ... }
@media
screen and (
min-width
:
910
px) { ... }
(cc) flic.kr /p/8Lo5Gk
BROWSER
WIDTH
GIVES US
FRAME
,
NOT
THE CANVAS
FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
72
PPI HAS
(cc) flic.kr /p/6tjjRP
72 pixels -per-inch
96
PPI IF A
72
points
-per-inch
x
[1+(1/3)]
= 96 PPI
78 μ m 78 μ m “RETINA” DISPLAYS 300ppi at 12 inches from the eyes
goo.gl /zpkFy
[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
240 PPI
240 PPI
72 PPI
RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
SPEED TESTS HINDER SPEED, U SER E X PERIENCE
(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.”
“ (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.” But, Christopher, you only have to test it once .”
“
“ (cc) flic.kr /p/4DziUN
Speed test image https://github.com/adamdbradley/foresight.js
Speed test image https://github.com/adamdbradley/foresight.js
+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
FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
1 HiSRC and others 2 3 GIMME THAT OLD SCHOOL IMG
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 !== undefined)
{
$.hisrc.devicePixelRatio =
window.devicePixelRatio
}; Check pixel density... https://gist.github.com/2428356
https://github.com/adamdbradley/foresight.js 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
BRINGING PROBLEMS BRINGING THE PAIN 1 2 3
BRINGING PROBLEMS 1 Double Taxation 2 3 BRINGING THE PAIN
http://css-tricks.com/which- responsive-images-solution- should-you-use/
24+ http://css-tricks.com/which- responsive-images-solution- should-you-use/
http://css-tricks.com/which- responsive-images-solution- should-you-use/
ALL SOLUTIONS HAVE 2x +
http://css-tricks.com/which- responsive-images-solution- should-you-use/
2x = MORE TIME COSTS
https://github.com/crdeutsch/hisrc/tree/v2 BRINGING THE PAIN 1 Double Taxation 2 Browser Preloader 3 BRINGING THE PAIN
http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4 “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. ”
https://developer.yahoo.com/blogs/ydn/high-performance-sites- rule-6-move-scripts-bottom-7200.html
https://developer.yahoo.com/blogs/ydn/high-performance-sites- rule-6-move-scripts-bottom-7200.html
http://www.stevesouders.com/blog/2013/04/26/i/ MODERN BROWSERS NOW USE PRELOADER
http://www.stevesouders.com/blog/2013/04/26/i/ PRELOADS IMAGES BEFORE PAGE FULLY DOWNLOADS
BRINGING PROBLEMS 1 Double Taxation 2 One Image, Still Not Ready 3 Browser Preloader BRINGING THE PAIN
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#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" 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" /> Mobile iOS Bookmarks#rwdimg
https://github.com/igrigorik/http-client-hints
1 2 3 RWD IMAG ES MEET THE NEW IMAGE ELEMENTS
1 2 3 RWD IMAG ES MEET THE NEW IMAGE ELEMENTS srcset
Basic Image Swap <img
src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
Image Fuel <img
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/
Image Fuel <img
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/
Image Fuel <img
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/
Image Fuel <img
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/
1 2 3 RWD IMAG ES MEET THE NEW IMAGE ELEMENTS srcset attribute sizes attribute
Basic Image Swap <img sizes="(min -width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
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=" (min-width: 30em) 100vw ,
(min-width: 50em) 50vw, 200px"
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="(min-width: 30em) 100vw,
(min-width: 50em) 50vw , 200px"
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="(min-width: 30em) 100vw,
(min-width: 50em) 50vw , 200px "
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
1 2 3 <picture> srcset attribute sizes attribute RWD IMAG ES MEET THE NEW IMAGE ELEMENTS
srcset="cropped.jpg">
<img src="small.jpg" alt=“That awesome Saints’
touchdown ."> </picture>
USE <PICTURE>
POWER TO SOLVE ART DIRECTION
OTHERWISE,
KEEP USING
SRCSET & SIZES
http://responsivedesign.is/resources/images/picture-fill
https://wordpress.org/plugins/ricg-responsive-images/
1 2 3 <picture> srcset attribute sizes attribute RWD IMAG ES MEET THE NEW IMAGE ELEMENTS
y x
THANK YOU ! Newsletter - http://eepurl.com/TQAer
CHRISTOPHER SCHMITT
Smartphones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy. They also have better displays, which demands more of us when we use images. This session will work through tips and tricks to develop future friendly images in our sites and apps.
for free. You
can too.