Am 07.08.2012 21:09 schrieb Ian Hickson:
On Tue, 22 May 2012, Markus Ernst wrote:
Am 18.05.2012 23:19 schrieb Kornel Lesiński:
If you'd like to see <picture> proposal succeed, then please help
fixing its drawbacks. Make selection and embedding of 2x images
easier. Give UA freedom to use cached higher-quality images when it
can. Give UA freedom to choose images to minimize bandwidth or
maximize quality. Reduce verbosity of most common cases.
Maybe the use cases should be solved independent from each other:
- Use <picture> for the art direction use case.
- Remove the MQ except the pixel density from @srcset, and make @srcset
available in both <img> and <source>:
<img src="normal.jpg" alt="" srcset="high.jpg 2x, normal.jpg 1x">
<picture alt="">
<source src="mobile.jpg"
srcset="low.jpg 0.5x, mobile.jpg 1x, mobile-hd.jpg 2x">
<source src="large.jpg" media="min-width: 600px"
srcset="large.jpg 1x, large-high.jpg 2x">
<img src="mobile.jpg">
</picture>
I don't understand why this is better than:
<img src="large.jpg" alt=""
srcset="low.jpg 600w 0.5x, mobile.jpg 600w 1x, mobile-hd.jpg 600w 2x,
large-high.jpg 2x">
It seems to me that srcset as specified does exactly the same thing, but
more succintly.
[...]
On Thu, 24 May 2012, Florian Rivoal wrote:
<picture>
<source srcset="normal.jpg 1x, highres.jpg 2x">
<source media="(max-width:768px)" srcset="ipad.jpg 1x, ipad3.jpg 2x">
<source media="(max-width:320px)" srcset="iphone.jpg 1x, iphone4.jpg 2x">
<img src="normal.jpg">
</picture>
I don't understand why this is better than:
<img src="normal.jpg" srcset="highres.jpg 2x,
ipad.jpg 768w 1x, ipad3.jpg 768w 2x,
iphone.jpg 320w 1x, iphone4.jpg 320w 2x"
alt="...">
...which as far as I can tell does exactly the same thing.
It is better because art direction and bandwidth use cases can be solved
differently in an appropriate manner:
- For the bandwidth use case, no MQ is needed, but only some information
on the sources available to let the UA decide which source to load.
- For the art direction use case OTOH, the <picture> element is more
intuitive to handle and also easier to script, as sources can be added
or removed via DOM.
Anyway, with your proposal, would this be valid, to address the
bandwidth-only use case?:
<img src="normal.jpg" alt="" srcset="high.jpg 2x, normal.jpg 1x">
