Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
• Platform Architect - Mozilla
• Work on Web API team.
• We try to standardize Firefox OS API at W3C.
• Over the last year or so, been involved in W3C
RICG.
• Lead editor of use case and picture spec.
About me
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
responsiveimages.org
• Founded about 2 years ago by Mat Marquis
• Now the largest CG at W3C
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
RICG
• 300+ members
• Grass roots effort - We do all our work in
Github, and IRC
• Join us! (don’t worry, will remind you at
end of talk too!)
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Why do we care?
• Turns out images are a huge performance
and cost bottle neck on the Web
• I’m not going to ramble too long about this
• Search for Mat Marquis - who has spoken
at length about this.
• https://speakerdeck.com/wilto
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
images - over 60%
• When compared to all other resources,
images constitute, on average, +60%
• Average page size is still increasing.
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
RWD Conspiracy
• Turns out that despite people taking up the RWD
cause, we are still serving the same amount of data
to both desktop and mobile.
• Not always a bad thing! (probably a good thing!)
• This can sometimes be wasteful (too much data
for a little screen).
• And can have a performance impact (e.g., sending
all of jQuery).
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
What are responsive
images?
• Images that correspond to a particular
environment.
• “Environment” is the the browsing context that
the browser provides.
• We interact with some of that environment
through CSS and JS.
• But other parts we cannot interface with - like
user preferences.
• To understand - let’s look at use cases.
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Use cases
• Use cases is generally what we see people
doing in the wild.
• A big part of what the RICG does is collect
use cases and try to understand them.
• Having a good understanding of use cases
allows us to formulate requirements.
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Stretchy images
• The most common case is stretchy images.
• You know, images that will stretch to fit
some column of content.
• This is usually done with the old “css-max-
width” or “height”.
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Fitting different
viewports
• Can be tricky, as different viewports can
accommodate images in different ways.
• This image, by Paul Robert Lloyd, will serve
a very purpose throughout this
presentation.
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Device pixel ratio
• What’s the DPR of it iphone?
• How do we know that?
• DPR is hard.
• You need to understand the difference
between a physical pixel, a device
independent pixel, and a CSS pixel.
• Zooming also affects DPR.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Device pixel ratio 2
• Anyway, we know that having to upscale images
can sometimes lead to crappy looking images.
• We need to remember that when we are talking
about image sizes
• ![]()
are in CSS pixels.
• How those images appear on the screen depends
on DRP
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Viewport matching
• Generally means matching on width of the device
• So, if your user’s resolution is 2560, you send
something to match that size.
• On desktop, it’s easy.
• This gets funky when you add in DPR.
• Device width + DPR. 200, 2x = 400px wide.
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Matching to portrait
• This is example from the BCC
• Generally, you target images to the way you
assume your user’s prefer to consume
content.
• But this changes from one device to
another.
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Switch to landscape
• When switching to landscape, this can have
severe effects
• ... at least, if you care about image quality
and not about global warming burning
down Yosemite national park :)
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Art direction - crop
• Art direction is the party-pooper use case.
• It’s the elephant in the room.
• It comes in two forms: crop / swap
• Crop is easy to understand...
• But for a crop, you don’t want to download the big
image
• Can potentially be done with CSS? Anyone?
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Art Direction - Swap
• The more interesting case.
• Based on some constraint or
environmental. Not just landscape
(viewport is also very common).
• Used a lot of time with image + text
placement.
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Other use cases
• These are the lesser known
• Print - beautiful printed documents!
• File format support
• eInk - contrast control.
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Use cases Doc
• If you want to know more...
• http://usecases.responsiveimages.org
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Developer glass ceiling
• “Div-itis”: semantically neutral, annoying to write
and maintain.
• We’ve been trying to hack around it.
• When we use JS, we bypass the preload scanner.
• Some solutions rely heavily on server side.
• This is not great. WE’VE HACKED THE HELL
OUT OF THIS.
• We can’t go any further as devs.
• So we go cry to ...
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Standards bodies
• This is painful and time consuming
• Developers and browser vendors speak different
languages
• We both see the world differently
• Declarative vs imperative
• By the time you get here, you are probably going
to be pretty pissed off.
• 2 years, we made progress...
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Proposed solutions
• This is where we have gotten after 2 years.
• It’s been a pretty amazing journey
• It’s a story of people and perseverance.
• It’s a story of seeing the world differently.
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
The Good, bad, ugly
• There is rarely a perfect solution.
• There are always edge cases
• For each of the proposed solutions, I want
to show the good, the bad, the ugly
• You would have seen some of these
solutions before...
• let’s start with...
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
The picture element
• Dubious origins - Bruce Lawson, but we’ve
found earlier references.
• It follows the and
element.
• Relies on source and its attributes
• http://picture.responsiveimages.org/
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
picture - example
• elements, attributes
• source element and attributes
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
The good
• It covers the use cases:
• art direction, dpr selection.
• it does advanced use cases too (print,
eInk, etc.)
• Dev’s get it. Bruce designed it, right? So it’s
going to be genius.
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
The bad
• Multiple elements are hard for browsers.
• Mixes media queries and markup.
• Some media queries can’t be evaluated until
after layout.
• If the source changes the height/width
then you might end up in an infinite loop.
• Doesn’t fully solve the problem... consider...
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
The ugly
• We know picture works ok with viewport
selection, art direction...
• But can can picture be used with stretchy
layouts and flex box?
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Picture 95
• John Mellor from google tried to find out...
• Why he works at Google and we don’t :)
• Some notable things here: repetition of
sizes over and over again.
• I know what you are thinking...
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
the srcset attribute
• How did it come to this?
• Note that the media query part was not
really the problem
• “srcset” doesn’t get the problem.
• Let’s take a look at it...
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
Client Hints
• HTTP-based solution.
• It was created proposed by Ilya Grigorik.
• It’s been in the works for about a year.
• So how does it work?
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Client hints example
• Using a HTTP-based opt-in
• Sends a request for things the server can
negotiate on.
• Extensible.
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
It’s all f%^$#
• We need to go back to the drawing board
• See if we can fix this...
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Drawing board
• If we collapse picture back into and img
element..
• And retain the source order as attributes...
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
BOOM!
• Clever guys from Google: Tab Atkins and
John Mellor came up with this.
Slide 87
Slide 87 text
RESPIMG SYNTAX
• Only proposed last week
• Subject to change
• Don’t get too excited - WHATWG not
convinced.
• Let’s take a look...
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Respimg syntax
• Optional media query
• either a x-based url
• or a new “viewport URL”
• Yeah... what’s that?... saving that for the ugly
bit.
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
The ugly
• The viewport URLs are not particularly
ugly.
• Just a bit complicated to get at first.
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
viewport-ulr - simple
• for an image 100% of the available space,
pic any of the following.
• The browser then choose the best one
based on DPR, bandwidth, some other
factors.
• Bit of magic...
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
viewport
100 30EM 400 70EM
• I call this, the
Spray and Pray
algorithm!
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Spray and Pray!
• Lay down a viewport rule - then spray a
whole bunch of images sources...
• Then pray the browser pics the right one.
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
but wait
• The browser can pick the right image from
a range of images
• The browser knows it’s own DPR
• The browser knows all the things.
• So...
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
Responsive Image
Container
• Non-standard proposal...
• Proposed by Friend of the RICG, Yoav
Weiss
• Or if we lovingly know it...
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
Magic Image Format
• We also call this “the magic image format”
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
Crystal ball
• Don’t know what’s going to happen.
• Probably want all of them.
• Client hints is nice for CDNs and those
that can do con-neg
• src-n is nice as it covers most of the cases.
• but srcset is simple... Come talk to me!
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
science fiction
• ok, enough sci-fi
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
Compress your images
• Lost art - back in the 96s we used to do
this all the time.
• Transition from dial-up to broadband.
• Great tutorial on HTML5 rocks by Colt
McAnlis
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
HTML5 Rocks
compression
• http://www.html5rocks.com/en/tutorials/
speed/img-compression/
• Talks about cost to deliver images
• Has general practical advice
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
Lazy - like me
• What if you are lazy... I mean, a busy
person?
• Like me? This presentation is 20+mb!
• Sorry if viewing on mobile!
• Use a CDN or get the server to handle it
• Pagespeed, Akamai, CDNConnect, free
open source tools too (image chef).
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
Compressive images
• Originally research was done by Dann Jobsis
• See: http://blog.netvlies.nl/design-interactie/
retina-revolution/
• Popularized by Filament group
• Considered an abhorrent abomination by
some... but, it’s what we got.
• http://filamentgroup.com/lab/
rwd_img_compression/
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
Compressed image
• Yeah, I know you can’t see the artifacts on
this big screen.
• Anyway, again... careful with this.
• Again, test it on mobile.
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
Picturefill
• If you need a client side solution.
• RICG recommended.
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
Other solutions
• Chris Coyier’s CSS tricks describes a great
range of solutions.
• Discusses both client side and server side.
• http://css-tricks.com/which-responsive-
images-solution-should-you-use/
Slide 148
Slide 148 text
No content
Slide 149
Slide 149 text
Join the RICG
• If you are not happy with any solution, want to do
better, then join us!
• http://responsiveimages.org/
• We want people who are passionate about the
problem
• The RICG community is awesome! Community if
friendly, helpful, diverse.
• We do everything on GH.
• We have something for everyone to do!
• Here are some of our current projects....
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
Sizer Soze
• Latest project from Yoav Wiess.
• It tells you how many bytes you are
wasting.
• Collaboration with many folks to give this
tool a front end.
• Again, if you have ideas - it’s a good place to
hang out.
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
x-picture (x-src-n?)
• We are also trying to work on a web
components version.
• Working with the awesome guys from
national geographic
• Going to bug Angelina Fabbro to help us! :)
Slide 154
Slide 154 text
No content