Slide 1
Slide 1 text
“Mo’ Pixels,
Mo’ Problems”
Dealing with Responsive Images
with Dave Rupert @davatron5000
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
shoptalkshow.com
Slide 4
Slide 4 text
atxwebshow.com
Slide 5
Slide 5 text
a11yproject.com
Slide 6
Slide 6 text
Le menu
• Outline the need for responsive images
• Examine failed paths
• Look at our approach at Paravel
• Sweet hacks, bro
Slide 7
Slide 7 text
Le Problème
Like all Americans, websites are getting
more and more obese.
#sickburn
Slide 8
Slide 8 text
HTML, CSS, JavaScript, Images, Fonts, Flash?, etc.
of page load times are
because of the front end.
80%
Slide 9
Slide 9 text
kilobytes == average page
weight in April 2013.
1,427
Up 143kb (11%) from January 2013.
Slide 10
Slide 10 text
kilobytes == images
(~56 of them)
872
Up 79kb (9%) from January 2013.
Slide 11
Slide 11 text
of page weight is images.
~60%
Source: HTTPArchive.org
Slide 12
Slide 12 text
Les Facteurs
What’s causing all this image bloat?
Slide 13
Slide 13 text
№1
Bad web performance
Websites keep getting fatter.
Slide 14
Slide 14 text
kilobytes == average page
weight in April 2013
1,427
kilobytes == size of
moto.oakley.com
87,962
cost to view moto.oakley.com on
Verizon’s smallest plan
$22
Slide 15
Slide 15 text
millisecond delay
500
reduction in tra"c
20%
Performance matters...
http://www.codinghorror.com/blog/2006/11/speed-still-matters.html
Slide 16
Slide 16 text
№2
Responsive Web Design
One website to rule them all.
Slide 17
Slide 17 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 18
Slide 18 text
“Blame the
implementation, not
the technique”
– Tim Kadlec
Slide 19
Slide 19 text
Expect RWD to add
about ~10% to your
page weight.
Unofficial findings from the
Dave Rupert Research Institute
Slide 20
Slide 20 text
№3
Retina Screens
LOL. YOUR JOB JUST GOT SOOOOoOO MUCH
MORE DIFFICULT! LOLOLOLOL
— Steve Jobs, from the grave.
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
LOL. I’m 3x!
Slide 23
Slide 23 text
Considérations
Different images at different breakpoints
Different images for different pixel densities
Different image formats
Art direction
Slide 24
Slide 24 text
Image formats
Slide 25
Slide 25 text
Strengths Weaknesses
GIF
Small graphics
Animations
Colors & alpha
PNG
Small, medium, large images
Alpha transparency
Large-ish
JPG
Photos
Selective quality
Large
Data URI Inline (no extra requests) Legacy IE
WEBP Small Chrome/Opera only :(
Slide 26
Slide 26 text
Data URI
li {
background:
url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///
yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
no-repeat
left center;
}
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Art direction use case
http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
Slide 29
Slide 29 text
Failed paths
What we’ve tried, what kinda works and what doesn’t.
Slide 30
Slide 30 text
“I’ll just use
JavaScript!”
— Everyone Ever
Slide 31
Slide 31 text
Slide 32
Slide 32 text
if($(window).width() > 960) {
$('img').each(function(){
$(this).attr(
'src', $(this).data('desktop')
);
});
}
Slide 33
Slide 33 text
“Donezo.
I am so smart.”
— Javascript Wizards
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
WONK WONK.
Double Download
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
16kb + 46kb = 62kb (Not ideal, but maybe okay)
Slide 38
Slide 38 text
@56 Images: 896kb + 2.576MB = 3.472MB
Slide 39
Slide 39 text
Other paths
spacer.gif
Elements
Servers and cookies
Background-images
Network Detection
Slide 40
Slide 40 text
So, how?
Slide 41
Slide 41 text
The Paravellian®
Approach
Use CSS and Web Fonts whenever possible
Use SVG and Icon Fonts whenever applicable
Picturefill raster graphics
Slide 42
Slide 42 text
CSS &
Web Fonts
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
@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 45
Slide 45 text
SVG &
Icon Fonts
Slide 46
Slide 46 text
SVG
Scalable Vector Graphics
Basically illustrator files
Slide 47
Slide 47 text
Ghostscript Tiger SVG: 67kb
Slide 48
Slide 48 text
Slide 49
Slide 49 text
Slide 50
Slide 50 text
9+ 3.0+ 3.2+
Source: caniuse.com
SVG support
Slide 51
Slide 51 text
Icon Fonts
Tiny monochrome vector packs.
Slide 52
Slide 52 text
a b c d e f g h i j
a b c d e f g h i j
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Source: caniuse.com
Icon font support
8+
Slide 55
Slide 55 text
Quest for a
native solution
#HOTDRAMA
Slide 56
Slide 56 text
February 2012 - #WHATWG IRC
Hi! We need a solution for responsive images. We have some ideas and we’d
like to help.
I don’t see what the big deal is, can’t you just use Javascript?
:(
Go form a community group.
... trots off to form community group
Slide 57
Slide 57 text
May, 10th 2012 - WHATWG Email List
Great! I’ll approve it this instant. Thanks best friend ;)
Uhhhh... wut?
Apple’s thing is easier vis à vis better.
We made a thing. It’s called @srcset. We want it.
Slide 58
Slide 58 text
Also, you need use cases, burden of proof of developer sentiment, and a bunch of
stuff not required for Apple.
Also, community groups aren’t a real thing we consider. You should have been
emailing the mailing list, ya dummy.
:(
End scene.
Slide 59
Slide 59 text
@srcset
Based on the CSS4 image-set() value
Proposed by Apple® on May 10th, 2012
Slide 60
Slide 60 text
Slide 61
Slide 61 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
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Proposed by the Responsive Images Community Group
on May 11th, 2012
Slide 64
Slide 64 text
Slide 65
Slide 65 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
“Hard to implement”*
* Citation needed
Slide 66
Slide 66 text
Picturefill
https://github.com/scottjehl/picturefill
Start using the picture element today!
Slide 67
Slide 67 text
Slide 68
Slide 68 text
“Got any sweet
hacks, brahski?”
— Surfer dudes
Slide 69
Slide 69 text
Server side
Sencha.io Src
WordPress.com Photon
Adaptive Images
Slide 70
Slide 70 text
Slide 71
Slide 71 text
Strengths
One image tag
Legacy sites
Weaknesses
Blackbox
What if these services shut down?
What if you switch platforms?
Slide 72
Slide 72 text
1.5x Hack
For Medium Importance images
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
Strengths
One image
Weaknesses
Penalizes small screen users
Slide 75
Slide 75 text
Compressive
Images
The following is some black effin’ magic.
Put on your robes and wizard hat...
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Strengths
One image
Weaknesses
Memory intensive, esp. on phones
Save as... pixelated
Slide 79
Slide 79 text
Clown Car
Crafted by Estelle Weyl
Slide 80
Slide 80 text
Slide 81
Slide 81 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 82
Slide 82 text
Strengths
Simple
Weaknesses
Create an SVG for every image
Slide 83
Slide 83 text
Media query based image selection... sounds familiar...
Slide 84
Slide 84 text
Media query based image selection... sounds familiar...
Picturefill
Slide 85
Slide 85 text
Lots o’ options
Above all, use your brain and pick
what’s best for your project.
Slide 86
Slide 86 text
“!anks!”
Dave Rupert
@davatron5000
github.com/davatron5000