respimg

Two proposals

@srcset
<picture> with mediaqueries

Interested mostly in not sending big pictures to the (e.g.) phone when it doesn't need it.

What's the difference?

@srcset

shorter
declarative
UA may choose algorithm

<picture>

powerful (knobs)
known syntax
"known" behaviour
possible to use new MQ features.

Why do authors/webdevs like MQs?

It's powerful. You can fix stuff as you want.

When something new comes along, you can fix it.

Perfect for what I want to do; it's possible!

What's the problem with MQs?

mediaqueries is telling the browser what to do, and how to do it.

Part of this reasoning is now known, but for some reason only restricted for DPI choosing (for 2x etc). This has to do with resource selection in general.

mobile device; want a reasonable image size

having 2x-like selection is not enough

Want to adapt the image in different resolutions

In current <picture> proposal, the screen-size selection was taken away in favour of doing it in MQ.

Author: I can always fix stuff, so it doesn't matter if it doesn't work with new device or cool feature in small UA right away.

When I learn about PrintTheWeb UA later, I can just add a media item for print (to give it the highest resolution image)!

That's not good enough!

Algorithm in the user agent

User agents should be allowed to adapt in a smart way. Having the smallest possible declarative information, allows anyone who roams the web to implement their own algorithm!

And not just for DPI.

Algorithm in the user agent

With the algorithm in the user agent, it can innovate. Do new things. Which MQ doesn't allow.

Print example

MQ, it would be something like <source media=print src=img.jpg>

But who will do that?

			    <picture>
			      <source src=img.jpg srcset="img2x.jpg 2x">
			      <source src=img-big.jpg srcset="img-big2x.jpg 2x"
			        media="(min-width: 800px)">
			      <img src=img.jpg>
			    </picture>

			    <img src=img.jpg
			       srcset="img.jpg 800w, img2x.jpg 2x 800w,
			               img-big.jpg, img-big2x.jpg 2x">

For print

With MQ, the author has to write in the rule for print. The UA

With declarative (e.g. srcset), the UA can select the biggest image, because it has the information. And because srcset is only a hint.

			    <picture>
			      <source src=img.jpg srcset="img2x.jpg 2x">
			      <source src=img-big.jpg srcset="img-big2x.jpg 2x"
			        media="(min-width: 800px)"
			      <source src=img-big2x.jpg 
			        media="print">
			      <img src=img.jpg>
			    </picture>

			    <img src=img.jpg
			       srcset="img.jpg 800w, img2x.jpg 2x 800w,
			               img-big.jpg, img-big2x.jpg 2x">