On 2012-05-15, at 7:23 PM, Kornel Lesiński wrote:
> On Tue, 15 May 2012 23:17:54 +0100, Chris Heilmann <code...@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="phot...@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="phot...@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="phot...@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...@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.
