Who????
-
- Srcset & Picture implementation
What is Responsive images?
Efficiently load properly dimensioned images that fit the page's design
Started out as
"Just send the largest possible image"
"And let the browser resize it"
EAZZZZZZY!!!
Well...
This led to
BLOAT!!!>
72% Serve same resources
guypo.com
How much can be saved?
Up to™ 72% image data savings
tkadlec.com
How can we measure?
Sizer Soze
What??
Measures the difference between current images & perfectly sized images
How does it work?
- Download a page using phantomJS
- Look at image dimensions
- Download the images
- Resize to displayed dimensions
SSAAS
sizersoze.org
So quality issues became
data plan abuse
And...
Large images?
People demanded a solution
Turned to the mailing lists
Proposals!
Moar proposals!
And the RICG was born
srcset proposal
Picture *and* srcset
Browsers weren't convinced
18 (EIGHTEEN!!!) months later
Paris!
Src-N
Then some more
And MOAR
Back to picture
Browsers were like
But Blink was like
So I got busy
And soon became
So, crowdfunding to the rescue
A group effort
It went well
And patches got landing
~60 patches later
Blink work is done
WebKit is underway
Hopefully shipping in Chrome 38
The srcset 'x' part
Use case - "Retina images"
Load hi-res images
on hi-res devices
The syntax
<img src="1x.jpg" srcset="2x.jpg 2x, 3x.jpg 3x"
alt="The president.">
Use case - Art direction
Use case #2 - MIME type fallback
The syntax
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 18em)" srcset="medium.jpg">
<img src="small.jpg" alt="The president.">
</picture>
The sizes + srcset 'w' descriptor part
http://ericportis.com/posts/2014/srcset-sizes/
use case - variable width images
The syntax
<img src="otherpic.jpg" alt="The president giving an award."
sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
srcset="pic100.jpg 100w, pic200.jpg 200w,
pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w,
pic3200.jpg 3200w">
Blink - Chrome & Opera
Implemention (almost) done!
srcset 'x' descriptor already shipped
sizes and srcset - behind a flag
picture - almost done
Hopefully shipping soon!
Firefox
Planned to ship in Firefox 33!!!
IE
Showing interest
WebKit
Implemented & shipped srcset's 'x' descriptor
Willing to accept patches behind a compile flag
I'm currently working on patches
Media Queries evaluation in the preloader
PreloadScanner requires off-main-thread MQ eval
Who's afraid of the big, bad preloader
AKA
- PreloadScanner
- Speculative parser
- Look-ahead scanner
"The greatest browser optimization of all times"
- Steve Souders
What does it do?
- Scans the document when the parser is blocked
- Figures out resources that need to be downloaded
- Adds them to the download queue
How important is that???
SmashingMag - With preloader
DCL - 2390; PLT - 3585
Using chromeHAR
SmashingMag - No preloader
DCL - 5395; PLT - 7193
BBC - With preloader
DCL - 5022; PLT - 5980
Using chromeHAR
BBC - Without preloader
DCL - 7660; PLT - 7957
MediaQueryTokenizer
MediaQueryParser
MediaValues
Intrinsic sizing
Async image loading
Required to avoid double download
Also required for img attribute setting
Worked on by Christian Biesinger (Thanks, Christian! :))
Smarter resource selection
User preference, bandwidth considerations ...
Content embedder selection policy
<advice>
To picturefill or
Source order matters
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 18em)" srcset="medium.jpg">
<img src="small.jpg" alt="The president.">
</picture>
!=
<picture>
<source media="(min-width: 18em)" srcset="medium.jpg">
<source media="(min-width: 45em)" srcset="large.jpg">
<img src="small.jpg" alt="The president.">
</picture>
Source-size order matters
sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
!=
sizes="(max-width: 50em) 50vw,
(max-width: 30em) 100vw,
calc(33vw - 100px)"
'sizes' default value
<img src="otherpic.jpg" alt="The president giving an award."
srcset="pic100.jpg 100w, pic200.jpg 200w">
is identical to
<img src="otherpic.jpg" sizes="100vw"
alt="The president giving an award."
srcset="pic100.jpg 100w, pic200.jpg 200w">
Intrinsic sizing
Moar intrinsic sizing
@viewport should be inlined!
<style>
@viewport {
width: auto;
}
</style>
src cannot be selected when 'w' is present
<img src="otherpic.jpg" alt="The president giving an award."
srcset="pic100.jpg 100w, pic200.jpg 200w">
Old 'w' syntax
Very similar, but very different
Styling
"Picture is a magical span, nothing more"
- Tab Atkins
Future compat
Feature detection FTW!
HTMLImageElement.sizes
& HTMLPictureElement
Which resource was picked?
Content images need to be in content
CSS override is not really implementable
Not a respimg specific problem
<quiz>
AKA: What's wrong with this <picture>?
<picture>
<source sizes="100vw"
srcset="pic100.jpg 100w, pic200.jpg 200w">
<img src="otherpic.jpg" sizes="100vw"
alt="The president giving an award."
srcset="pic100.jpg 100w, pic200.jpg 200w">
</picture>
Unnecessary picture
<img src="otherpic.jpg" sizes="100vw"
alt="The president giving an award."
srcset="pic100.jpg 100w, pic200.jpg 200w">
<picture>
<source media="(min-width: 18em)" srcset="medium.jpg">
<source media="(min-width: 45em)" srcset="large.jpg">
<img src="small.jpg" alt="The president.">
</picture>
Source order
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 18em)" srcset="medium.jpg">
<img src="small.jpg" alt="The president.">
</picture>
<picture>
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="medium.jpg">
<img src="small.jpg" alt="The president.">
</picture>
src is ignored on source
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 18em)" srcset="medium.jpg">
<img src="small.jpg" alt="The president.">
</picture>
sizes="(max-width: 30em) 100vw,
calc(33vw - 100px),
(max-width: 50em) 50vw"
source-size order
sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
<img src="small.jpg" alt="The president."
srcset="400x200.jpg 600w, 800x400.jpg 1200w">
Image dimensions should be accurate
<img src="small.jpg" alt="The president."
srcset="400x200.jpg 400w, 800x400.jpg 800w">
<img alt="The president." srcset="small.jpg 600w, large.jpg 1200w">
src fallback
<img alt="The president." src="fallback.jpg"
srcset="small.jpg 600w, large.jpg 1200w">
<img src="small.jpg" alt="The president."
srcset="small.jpg 1x, medium.jpg 1.5x, large.jpg 2x">
Duplicate 1x url
<img src="small.jpg" alt="The president."
srcset="medium.jpg 1.5x, large.jpg 2x">
Content negotiation based
CH-RW
Resource Width
Implicitly relies on src-N's viewport-url
DPR
Server confirmation header
Used for intrinsic image sizing
Opt-in only
Not sent on initial HTML request
Responsive Image Container
- File format approach
- A "layer" per resolution
- Both resolution switching and art-direction
Resolution switching
336x635
106x200
211x400
336x635
Art-direction
770x512
200x200
400x288
770x512
Advantages
- Markup left untouched
- A single file per image
- Better for post-download dimensions changes
disadvantages
- Touches many layers. Will take time
- Decoding performance???
- Fetching mechanism network performance???
Progressive image download
To sum it up