<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> :)

Responsive Images\

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.