[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

[Timothy Hatcher]

On Nov 12, 2013, at 6:09 PM, Silvia Pfeiffer <silviapfeiffer1 at gmail.com> wrote:

> On Wed, Nov 13, 2013 at 9:56 AM, Christian Biesinger
> <cbiesinger at google.com> wrote:
>> On Tue, Nov 12, 2013 at 3:06 PM, Markus Ernst <derernst at gmx.ch> wrote:
>>> What I don't like about CSS approaches is the fact that changing the source
>>> of an image is fundamentally different from changing a dimension or color of
>>> an element. This is not "presentational" in the same way. Having to
>>> reference content images in the CSS in order to change their sources is an
>>> authoring nightmare.
>> 
>> For a bit more presentation, and while we're inventing new syntax
>> anyway, how about this:
>> 
>> <style>
>> @media (min-width: 480px) {
>>  .artdirected { content: replaced url(attr(src-small)); }
>> }
>> @media (min-width: 600px) {
>>  .artdirected { content: replaced url(attr(src-medium)); }
>> }
>> @media (min-width: 800px) {
>>  .artdirected { content: replaced url(attr(src-big)); }
>> }
>> </style>
>> ...
>> <img class="artdirected" src="foo.jpg" src-small="foo-small.jpg"
>> src-medium="foo-medium.jpg" src-big="foo-big.jpg">
> 
> I quite like this if we can make it work. It keeps the references to
> the images in the <img> tag, but makes use of media queries for the
> different constraints. It looks clean and is easy to understand.
> 
> Silvia.

This is indeed the cleanest proposal so far. It should work well with CMSs that would predefine the viewport breakpoints, leaving the user to specify only a set of images. It is also human friendly by minimizing repetition and not using arbitrary numbers.

DPR switching with viewport breakpoints might still be too complex to define. (At least you only need to do it once in the header.) An example that involves DPR would help illustrate that for everyone.

— Timothy Hatcher