[whatwg] Features for responsive Web design

[Henri Sivonen]

On Fri, Aug 10, 2012 at 11:54 AM, Florian Rivoal <florianr at opera.com> wrote:
> I wasn't debating whether or not shipping a device with a 1.5 pixel
> ratio is the best decision, but answering: "Is there a good reason
> to believe that will be something other than a power of two?"
>
> The fact that it has happened seems a pretty good reason to believe
> that it may happen.

These are different questions:
"Will someone ship a browser/device combination whose device pixel
ratio is something other than 1 or 2?"
"Will Web authors bother to supply bitmaps with sampling factors other
than 1 and 2?"

As a data point worth considering, for desktop apps on OS X Apple
makes developers supply bitmap assets for 1x and 2x and if the user
chooses a ratio between 1 and 2, the screen is painted at 2x and the
resulting bitmap is scaled down.

Another thing worth considering is if ever anyone is really going to
go over 2x, given that at normal viewing distances 2x is roughly
enough to saturate the resolution of the human eye (hence the "retina"
branding). Even for printing photos, 192 pixels per inch should result
in very good quality, and for line art, authors should use SVG instead
of bitmaps anyway.

If it indeed is the case that there are really only two realistic
bitmaps samplings for catering to differences in weeding device pixel
density (ignoring art direction), it would make sense to have simply
<img src="1xsampling.jpg" hisrc="2xsampling.jpg" alt="Text
alternative"> instead of an in-attribute microsyntax for the
non-art-directed case.

Ian Hickson wrote:
>On Wed, 16 May 2012, Henri Sivonen wrote:
>>
>> It seems to me that Media Queries are appropriate for the art-direction
>> case and factors of the pixel dimensions of the image referred to by
>> src="" are appropriate for the pixel density case.
>>
>> I'm not convinced that it's a good idea to solve these two axes in the
>> same syntax or solution. It seems to me that srcset="" is bad for the
>> art-direction case and <picture> is bad for the pixel density case.
>
> I don't really understand why

They are conceptually very different: One is mere mipmapping and can
be automatically generated. The other involves designer judgment and
is conceptually similar to CSS design where authors use MQ. Also,
having w and h refer to the browsing environment and x to the image in
the same microsyntax continues to be highly confusing.

Ignoring implementation issues for a moment, I think it would be
conceptually easier it to disentangle these axes like this:

Non-art directed:
<img src="1xsampling.jpg" hisrc="2xsampling.jpg" alt="Text alternative">

Art directed:
<picture>
<source src="1xsampling-cropped.jpg" hisrc="2xsampling-cropped.jpg"
media="max-width: 480px">
<img src="1xsampling.jpg" hisrc="2xsampling.jpg" alt="Text alternative">
</picture>

-- 
Henri Sivonen
hsivonen at iki.fi
http://hsivonen.iki.fi/