Slide 1
Slide 1 text
“Mo’ Pixels,
Mo’ Problems”
Dealing with Responsive Images
with Dave Rupert @davatron5000
Slide 2
Slide 2 text
“!is is why
Daddy drinks
at night.”
Slide 3
Slide 3 text
+ + +
(slang)
(place) (personal brand) (sound)
Slide 4
Slide 4 text
paravelinc.com
Slide 5
Slide 5 text
shoptalkshow.com
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Le menu
• Discovery of Findings: Key Issues and Data Points
• Identify Primary Blockers for the Agile Web
• Leverage the Paravel Image Biz-Strat
• Cloud-based Cutting Edge E-Solutions
• Sweet Hacks, Bro
Slide 8
Slide 8 text
Le Problème
Like all Americans, websites are getting
more and more obese.
#sickburn
Slide 9
Slide 9 text
HTML, CSS, JavaScript, Images, Fonts, Flash?, etc.
of page load times are
because of the front end.
80%
Slide 10
Slide 10 text
kilobytes == average page
weight in October 2013.
1,617
Up 333kb (25%) from January 2013.
Slide 11
Slide 11 text
kilobytes == images
(~56 of them)
988
Up 195kb (24.5%) from January 2013.
Slide 12
Slide 12 text
of page weight is images.
~60%
Source: HTTPArchive.org
Slide 13
Slide 13 text
Les Facteurs
What’s causing all this image bloat?
Slide 14
Slide 14 text
№1
Bad Web
Performance
Websites keep getting fatter.
Slide 15
Slide 15 text
kilobytes == average page
weight in April 2013
1,617
kilobytes == size of
moto.oakley.com
87,962
cost to view moto.oakley.com on
Verizon’s smallest plan
$22
Don’t worry, Oakley got the site down to 13.7 MBs (84% improvement!)
Slide 16
Slide 16 text
millisecond delay
500
reduction in tra"c
20%
http://www.codinghorror.com/blog/2006/11/speed-still-matters.html
Slide 17
Slide 17 text
№2
Responsive
Web Design
One website to rule them all.
Slide 18
Slide 18 text
“Blame the
implementation
not the technique”
– Tim Kadlec
Slide 19
Slide 19 text
of RWD sites send the same
payload to mobile and desktop.
72%
Only 6% were “much smaller”
http://www.guypo.com/?p=3374
Slide 20
Slide 20 text
Unofficial findings from the
Dave Rupert Arm Chair Research Institute
“Expect RWD to
bloat things ~10%”
Slide 21
Slide 21 text
№3
Retina Screens
LOL. YOUR JOB JUST GOT SOOOOoOO MUCH
MORE DIFFICULT! LOLOLOLOL
— Steve Jobs, from the grave.
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
LOL. I’m 3x!
Slide 24
Slide 24 text
Considérations
Breakpoints Densities Art direction
Slide 25
Slide 25 text
Breakpoints
Slide 26
Slide 26 text
Densities
Slide 27
Slide 27 text
Art direction
http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
Slide 28
Slide 28 text
The Paravellian®
Approach
Use CSS and Web Fonts whenever possible
Use SVG and Icon Fonts whenever applicable
Use a Responsive Images Solution
Slide 29
Slide 29 text
CSS &
Web Fonts
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
.pizza {
background-image: url("pizza.png");
}
!
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.pizza {
background-image: url("[email protected]");
background-size: 400px 300px;
}
}
Slide 32
Slide 32 text
SVG &
Icon Fonts
Slide 33
Slide 33 text
SVG
Scalable Vector Graphics
Basically illustrator files
Slide 34
Slide 34 text
Ghostscript Tiger SVG: 67kb
Slide 35
Slide 35 text
Slide 36
Slide 36 text
Slide 37
Slide 37 text
Slide 38
Slide 38 text
.pizza {
background-image: inline-image("pizza.svg");
background-size: 400px 300px;
.no-svg & {
background-image: inline-image("pizza.png");
}
}
Sass/Compass SVG Data URI with PNG Fallback
Slide 39
Slide 39 text
.pizza {
background-image: url(data:image/svg+xml;base64,
R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
background-size: 400px 300px;
}
.no-svg .pizza {
background-image: url("pizza.png");
}
Sass/Compass SVG Data URI with PNG Fallback
Slide 40
Slide 40 text
!
/'
//
. //
|\//7
/' " \
. . .~ ~
| ( \
_ _ - -_ | '._ '
_ __ _- \_ _/ \'-'
// \\_/
\\ | |
|| | /
/ | \ /
|VV ||--\__________/-||-/|
|| || || ||
{ } { } { }{ }
Grunticon
grumpicon.com
Slide 41
Slide 41 text
9+ 3.0+ 3.2+
Source: caniuse.com
SVG support
Slide 42
Slide 42 text
Icon Fonts
Tiny monochrome vector packs.
Slide 43
Slide 43 text
a b c d e f g h i j
a b c d e f g h i j
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Source: caniuse.com
Icon font support
8+
NO
OPERA
MINI :(
Slide 46
Slide 46 text
La quête d'une
solution d'image
sensible
Slide 47
Slide 47 text
Failed paths
What we’ve tried, what kinda works and what doesn’t.
Slide 48
Slide 48 text
“I’ll just use
JavaScript!”
— Everyone Ever
Slide 49
Slide 49 text
Slide 50
Slide 50 text
if($(window).width() > 960) {
$('img').each(function(){
$(this).attr(
'src', $(this).data('desktop')
);
});
}
Slide 51
Slide 51 text
“Donezo.
I am so smart.”
— Javascript Wizards
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
WONK WONK.
Double Download
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
16kb + 46kb = 62kb (+33% Not ideal, but maybe okay)
Slide 56
Slide 56 text
@56 Images: 896kb + 2.576MB = 3.472MB
Slide 57
Slide 57 text
Other paths
spacer.gif
Background-images
Elements
Servers and cookies
Network Detection
Slide 58
Slide 58 text
Les candidats
@srcset
Slide 59
Slide 59 text
N
CHALLENGER
APPROACHING
A new foe has appeared!
Slide 60
Slide 60 text
Les candidats
@srcset
srcN
Slide 61
Slide 61 text
@srcset
Based on the CSS4 image-set() value
Proposed by Apple® on May 10th, 2012
Slide 62
Slide 62 text
@srcset syntax
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
LATE BREAKING NEWS
IN AUGUST, WEBKIT SHIPPED @SRCSET WITHOUT THAT
WEIRD ‘600w’ SYNTAX. WILL LIKELY BE DROPPED.
Slide 65
Slide 65 text
*CURRENT* @srcset syntax
Slide 66
Slide 66 text
Strengths
Just an attribute
Strong “2x” syntax
Weaknesses
Comma delimited values
Faux-media query microsyntax
Non-intuitive px-based “w” and “h” units
Browser determination
Polyfill causes the double download
Breaks preloader
Slide 67
Slide 67 text
Proposed by the Responsive Images Community Group
on May 11th, 2012
Slide 68
Slide 68 text
syntax
Slide 69
Slide 69 text
Strengths
Audio/Video element syntax
Media-query based
Supports non-pixel values
Supports art direction
Uses @srcset’s “2x” powers
Fallbacks for unsupported types
Weaknesses
Verbose
Breaks preloader
“Hard to implement”*
* Citation needed
Slide 70
Slide 70 text
Picturefill
https://github.com/scottjehl/picturefill
Start using the picture element today!
Slide 71
Slide 71 text
BREAKING NEWS
HAS BEEN RELEGATED TO BEING A “NOTE” ON
THE NEW SRC-N PROPOSAL.
Slide 72
Slide 72 text
“It’s icky”
- Browsers
“It’s icky”
- Browsers
Slide 73
Slide 73 text
srcN
Proposed by Tab Atkins (Google)
on September 25th, 2013
Slide 74
Slide 74 text
syntax
Slide 75
Slide 75 text
srcN syntax
Slide 76
Slide 76 text
Variable sized images
Slide 77
Slide 77 text
Slide 78
Slide 78 text
Strengths
Media-query based
Supports non-pixel values
Supports art direction
@srcset’s “2x” powers
Viewport-URLs
“Easy to implement”??
Weaknesses
Ordinal Attributes?
Fallbacks for unsupported types?
Slide 79
Slide 79 text
“Sure, fuck it,
whatever…”
— A wise developer one time
Slide 80
Slide 80 text
ch
CHALLENGER
APPROACHING
A new foe has appeared!
Slide 81
Slide 81 text
Client Hints
Proposed by Ilya Grigorik (Google)
––enable-client-hints
Slide 82
Slide 82 text
GET /img.jpg HTTP/1.1
!
Accepts: image/jpg
CH-DPR: 2.0
CH-RW: 160
How a client hinted browser requests an image
Slide 83
Slide 83 text
Detects DPR >= 1.5
Slide 84
Slide 84 text
GET /img.jpg HTTP/1.1
!
Accepts: image/webp, image/jpg
CH-DPR: 2.0
CH-RW: 160
How a Blink requests an image
Slide 85
Slide 85 text
Detects WebP support
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
Slide 88
Slide 88 text
Slide 89
Slide 89 text
rif
CHALLENGER
APPROACHING
A new foe has appeared!
Slide 90
Slide 90 text
Responsive
Image Format
Proposed by Yoav Weiss
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
“Got any
sweet hacks,
Brovidence?”
— Surfer dudes (from Rhode Island)
Slide 94
Slide 94 text
Images as a Service
src.sencha.io
jetpack.me/photon
resrc.it
responsive.io
adaptive-images.com
Slide 95
Slide 95 text
Slide 96
Slide 96 text
Strengths
One image tag
Legacy sites
Weaknesses
Blackbox
What if these services shut down?
What if you switch platforms?
Slide 97
Slide 97 text
1.5x Hack
For Medium Importance images
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
Strengths
One image
Weaknesses
Penalizes small screen users
Slide 100
Slide 100 text
Compressive
Images
The following is some black effin’ magic.
Put on your robes and wizard hat...
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Strengths
One image
Weaknesses
Memory intensive, esp. on phones
Save as... pixelated
Slide 104
Slide 104 text
Clown Car
Crafted by Estelle Weyl
Slide 105
Slide 105 text
Slide 106
Slide 106 text
Clown Car Technique
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {background-image: url(pizza/small.png);}
}
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {background-image: url(pizza/medium.png);}
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
svg {background-image: url(pizza/big.png);}
}
@media screen and (min-width: 1001px) {
svg {background-image: url(pizza/huge.png);}
}
Slide 107
Slide 107 text
Strengths
Simple
Element Query
Weaknesses
Make SVG for every image set
Slide 108
Slide 108 text
Lots o’ options
Above all, use your brain and pick
what’s best for your project.
Slide 109
Slide 109 text
“!anks!”
Dave Rupert
@davatron5000
github.com/davatron5000