[whatwg] So if media-queries aren't for determining the media to be used what are they for?

[D. Pitchford]

On 2012-05-15, at 7:23 PM, Kornel Lesiński wrote:

> On Tue, 15 May 2012 23:17:54 +0100, Chris Heilmann <codepo8 at gmail.com> wrote:
> 
>> The fetish for brevity is something I never understood. More understandable code is faster to write than cryptic short code.
> 
> There is significant difference in verbosity for a *very common case* of serving images for high-dpi ("Retina") display (which I suspect is only going to get more common):
> 
> <img src="lowdpi" srcset="hidpi 2x">
> 
> vs
> 
> <picture>
> <source media="(min-device-pixel-ratio: 2)" src="hidpi">
> <img src="lowdpi">
> </picture>
> 
> 
> It will get tiring when it'll have to be used for every image on the page.
> 
> Authors couldn't be bothered to type extra markup for all vendor's prefixes in CSS. Nobody bothered with verbose SVG gradient syntax which was usable before CSS gradients. HTML5 DOCTYPE is loved. Brevity matters.
> 
> -- 
> regards, Kornel Lesiński


This brings up a very good point: multiplying the number of images.

I'll go one step further and suggest a hypothetical (which is not really a hypothetical):
- Build out either proposals to include more sources so each are maxed out for all breakpoints, resolutions, etc. which have propagated throughout a large website.
- The time has come for a redesign, and based on the new design, all breakpoints have changed from 768px to 800px, a 3x resolution has been introduced by 'X Company' and add in "X" as an additional workflow variable.

As an author, am I to assume that I now need to manually update each and every <srcset> or <picture> to align with the new design?
With either proposal this does not seem like the most efficient way for anyone to spend their time, and is opening a door to a *huge* maintenance issue.

I dread the day when I have to dig through, possibly hundreds of pages, with multiple images per, to update the breakpoints and resolutions.
Surely there's a better way to manage breakpoints on a global level rather than burying the specifics within the elements or attributes themselves.

See the thread here: http://www.w3.org/community/respimg/2012/04/26/syntax-issue-with-displaying-high-resolution-images-in-the-picture-element-how-a-mole-hill-could-turn-into-a-mountain/
See example here from Brett Jankord: https://gist.github.com/2509534

I would hope than any solution to responsive images takes maintenance a little more serious than it has up to this point, as it seems more of an afterthought than anything.
Both proposals at this point regardless of semantics, syntax, verbosity or terseness will do no one any favours, and will have huge ramifications in areas nobody is talking about.

Copy/Paste from the example gist above, which I can very much see in happen in the wild:

<picture alt="Alt tag describing the image represented"> 
    <!--<source src="photo-s.jpg"/>-->
    <source src="photo-s.jpg"/> 
    <source src="photo-s at 2x.jpg" media="-webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2"/> 
    <!--<source src="photo-m.jpg" media="min-width:321px"/>-->
    <source src="photo-m.jpg" media="min-width:321px"/> 
    <source src="photo-m at 2x.jpg" media="min-width:321px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2"/> 
    <!--<source src="photo-l.jpg" media="min-width:641px"/>-->
    <source src="photo-l.jpg" media="min-width:641px"/> 
    <source src="photo-l at 2x.jpg" media="min-width:641px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2"/> 
    <!--<source src="photo-xl.jpg" media="min-width:1281px" />-->
    <source src="photo-xl.jpg" media="min-width:1281px" /> 
    <source src="photo-xl at 2x.jpg" media="min-width:1281px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2" /> 
    <noscript><img src="photo-s.jpg" /></noscript> 
</picture>

//Notes
//--------------------------------------------------
Markup based off of Scott Jehl's picturefill example.
Added commented source elements (needed for IE9, Android 2.1-2.3 and iOS 4.3 Safari) 
to demonstrate how a real life cross-browser implementation might look like. 
15 lines of code for "1" image :( 



Granted this may be better aligned to a separate topic unto itself, but thought it needed to be documented.

Cheers,
D.