See also: IRC log
<vhardy> Are the slides available on-line?
Art direction use case: crop image differently depending on how much space you have.
Design breakpoints: You get pixelation or JPEG artifacts at certain points. Designers adapt the design to different breakpoints and adapt the images to that.
[goals]
On printed documents, half-toned pictures look bad, while text is crisp
In print, communicating with color is meaningless
can't read a chart with any certainty
<odinho_> ScribeNick: lstorset
More aesthetically pleasing to show different image in portrait and landscape mode
media- and feature-specific responses
Most people won't notice, but good for TVs: When app is scaled up to a dimension where images don't keep up, they get badly pixelated
You want to replace image with higher quality
Another use case is APIs
Canvas, gUM(), MediaCapture
frex, on IOS 6 and Android you can take panoramas out of the box, 22 Mpix imgs
want to show specific bits to specific devices
Final case: Image formats
WebP, JPEG-XR
Not universally supported, but represents >20% of market
Opera, Chrome
With Windows 8, JPEG-XR to many clients, depending on uptake of that os
Can't target w/o server-side solution, though
Can't test whether browser supports img. format out of the box
Also for futur eformats
hard to add new formats
to the web
<video> does provide a solution, but not pretty
because codec war happen to be going on, and this solution was a fix
could be useful for imgs as well.
This is what the CG has looked on in the past year
Iterative process to define use cases
Initially heavily focused on bandwidth, but we as CG can't address that.
Responses from e.g. WHATWG with srcset
<picture> works like <video>
[btw, Marcos1 said all the above]
(code sample for <picture>)
legacy-browser fallback <img> within <picture>; accessible text
Could throw in ARIA
Questions?
Comments about use cases?
??: …
Alt has problems, e.g. with accesibility. Can't add markup structures
can't set direction of text
without Unicode points
can't express role of an image
i18n issue is a big one.
??: Why would you want additional ontent for an image?
hober: image with tabular data would need a table to reprsent it accessibly
vhardy: Slides online?
Marcos1: will be, will fix them after presenting tomorrow
vhardy: One problem with respimg. preloading, will you address this?
Marcos1: yes
krit: UC is showing different parts of img depending on screen size is solved by MQ and CSS images 3
Marcos1: You need <div> tags. We'd like proper markup
?? telecom: Reminds me of responsive videos/adaptive streaming
Marcos1: Already solved for a while is my impression
… solutions are tailored for online/offline, don't need to download 20 differet versions
… Also applicable to e-books
… videos in e-books
??: Maybe things can be ported from videos. Could select image from pbandwidth.
Cyril Concolatob: Videos can be much bigger. Can request ranges over time. 1-2 videos per page. With images, many more.
<shepazu> ♫R-E-S-P-I-M-G, Find out what it means to me, R-E-S-P-I-M-G, Take care, <img> ♫
… re: performance better to send only one request per image
… if two reqs per img – main problem is fetching.
… If we had format to represent multiple resolutions (jpeg2000), problem is still fetching mechanism
… need to fetch img. header with bytemap
… then the actual content
… May be other solutions, I am working on some things
Cyril Concolato: SVG is working on mapping and tiling images.
… Changing layouts at the same time?
Marcos1: odinho will cover the latter
chaals: Adapt to videos as they are downloadinng. imgs are single hit.
… if imgs were downloaded in stream, could use video solution
<chaals> [but they aren't]
Dong Yong?: Another UC is stereoscopic displays
odinho: Don't want lots of negotiation with server-side, doesn't scale. Want logic in client.
[slides]
Two proposals
Very different at a fundamental level, but somewhat hard to see it.
Many UCs, I'm focusing on having different size pictures and don't want huge pictures under the fold
Difference between srcset and picture, is that scset is shorter, declarative and UA may choose algorithm. The latter is important.
srcset only gives hints, does not tell the ua what to do.
picture is more powerful, has known behavior, not a hint.
… If your user is extremely interested in small image sizes due to expensive data, the page author won't send the user what the user wants
… Why don't authors like MQs?
… Telling ua exactly what to do and how.
… uas may want to do more smart stuff in the future. A small browser with specific user group may want to behave in another way than what the author thought about.
… 2x–like selection is not enough
… (from <picture>)
… NOt only about swithing resolutions. On my phone a 2x dpi display
… will fetch the big picture, even if small display doesn't benefit from it
… print customization is possible with MQs
[code sample]
<picture> <source media="min-width…">
… same with srcset
… <picture> needs an extra line for media=print
… That's a big problem. Both because it prevents innovation
… e.g. "browsing" with printer
… high dpi won't be visible
… If the ua knows which image is biggest, it can just fetch that, ignoring hints
Marcos1: I don't understand the ex. If I had a 10x img, how do I tell it to use that for printing?
odinho: An even bigger picture
?
… The 10x img won't be downloaded by desktop and mobile browser
… Proposed algorithm won't take anything bigger than it's at
marcos: Want something between mega-quality an dlow quality. (Bit of a nitpick)
… Maybe not a disconnect, but different approach for design perspective. Designers are used to pixel-level control. Maybe not ideal, but here thye do have to give up control.
… <picture> gives absolute control, srcset hints
… The risk I see in the future is that srcset gets used, devs notice that when scaling window, this hint is not responded to.
… "My image is not showing. I'm going back to javascript"
… devs might use what they perceive works
odinho: note: we now have a queue
… I think if there's an easier solution, then some people reverting to JS is ok
… We can't really stop that, not even now
… ppl are doing crazy stuff on the web. That's how it is and works. But most pages don't go crazy in every part of th epage
… As long as the responsive solution is easier than JS, most people will use the easy way out.
… Unless extremely interested, and those ppl will do whatever anyway.
hober: These features aren't being used in isolation.
… People can do something exotic in 20% case
… Also, Many of respimg challenges can be addressed with other platform features: CSS filters and shaders, svg … …
… Scope of the problem here is limited to bitmap imgs
… We might do authors a disservice by designing something that they use instead of other, omore suitable features
<Cyril> I agree with hober
krit: You said Authors will prefer <picture> over srcset, is that […] CG
Marcos: CG has express preferences and requirements. Not prescriptive of a particular solution.
… want to make cool apps and please users
krit1: Have prioritiy list?
marcos: Look at website
… are using RFC keywords
vhardy: a step back: CSS spec addresses multi-resolutions
… these are semantic images and how to describe them
… Have you had feedback from a11y people?
… Problem halfway between semantic and presentation
Marcos: Not specifically. Sent to HTML group where a11y is well-represented. Feedback from various people. Haven't gotten explicit feedback from more than from those in the CG. We are now seeking more.
… srcset bypasses the problem by just extending <img>
yoav: Not just a question of semantics and whether img in CSS or HTML
… Big difference is that HTML is content, can change day to day/minute to minute. CSs is constant and cacheable
… if you start putting content imgs in css, can no longer cache effectively.
… re: prefetching: Solution must work with preloader
… e.g. WebKit's preload scanner
… currently it does
[demo]
… demo prepared by CG
said the above
yoav: Set of imgs: mobile img, wide mobile, desktop, hi-res, fallback
… Added 2s CSS fetch time to this case
… only single wide mobile image is being preloaded before rendering kicks in
… problem with current prototype is that fallback img doesn't get preloaded, only when parsed
… a WIP
… prototype does not react to resizing event, but once resized, the right source should be chosen
MArcos: Prototype is at least functional
… not ideal, not how we envision, but making inroads
… Just To play with idaes
<hober> The srcset attribute is currently specified in http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#the-img-element and http://dev.w3.org/html5/srcset/ and comments are welcome on whatwg@whatwg.org and public-html-comments@w3.org; please email with your thoughts & suggestions.
… Want to look at hwhole problem space to find solutions. Quite helpful to have this discussion here.
… Understanding from perspective of community and browser vendors. Hopefully those weilll become one and the same.
odinho: 80%/20% concept is important
… We also need to look at those UCs. I think quite a lot of our UCs are in the 20% case
… Need something really easy and nice for 80%, but 20 % should be there too
…maybe later
yoav: not sure which are 80 % and which 20% for you, but re: preloading, all current respimg hacks suffer from lack of cacheing, disable prefetching or fetch twice
Travis: How does each proposal address art direction UC?
… Multiple copies on the server?
Marcos: yes
hober: Most cases you serve one asset and clip with CSS
Marcos: As long as you have srcset you can apply CSS to it.
[missed a question]
Marcos: ONce you have content, you can clip with CSS
??a: Must work without CSS
(time's up)
chaals: no, you're over the time!
<Marcos1> +q
<odinho_> Title: Responsive Images
<odinho_> Date: Halloween
<Marcos1> :)
This is scribe.perl Revision: 1.137 of Date: 2012/09/20 20:19:01 Check for newer version at http://dev.w3.org/cvsweb/~checkout~/2002/scribe/ Guessing input format: RRSAgent_Text_Format (score 1.00) Succeeded: s/?? telecom/Cyril Concolato/ Succeeded: s/??/Cyril Concolato/ Succeeded: s/??b/yoav/ Found ScribeNick: lstorset Inferring Scribes: lstorset WARNING: No "Present: ... " found! Possibly Present: Cyril Javi JohnAlbin MArcos Marcos1 Norbert Rossen Ryladog ScribeNick Title Travis a1zu bjkim bradee-oh cabanier chaals hellogeri hober jalvinen joined kawada krit krit1 markw_ odinho odinho_ respimg rotsuya sgodard shepazu tantek tidoust tpacbot vhardy yoav You can indicate people for the Present list like this: <dbooth> Present: dbooth jonathan mary <dbooth> Present+ amy WARNING: No meeting title found! You should specify the meeting title like this: <dbooth> Meeting: Weekly Baking Club Meeting WARNING: No meeting chair found! You should specify the meeting chair like this: <dbooth> Chair: dbooth WARNING: Date not understood: Halloween Got date from IRC log name: 31 Oct 2012 Guessing minutes URL: http://www.w3.org/2012/10/31-respimg-minutes.html People with action items: WARNING: Input appears to use implicit continuation lines. You may need the "-implicitContinuations" option.[End of scribe.perl diagnostic output]