Acuity and images

Hi Everyone,

I have a question that might lead to an additional user requirement. Or you might have covered it and I just can’t find it?

I’ve heard from a couple of LV people (including Wayne I think?) that at higher zoom levels, clear images are important.

For example, it is not useful when images pixelate as you zoom in.

My question is: Is there a user-requirement for high-DPI written down anywhere? And does it cover images?

The requirements document lists "Clarity of the device, for example, dots-per-inch (dpi)” in the functional vision section, but nothing to say why high-DPI helps.

Many people might think that it is logical that if you can’t see as well, the resolution of a device does not matter. I’ve tried to rebuff that before [1], but it would be helpful to have more evidence.

That is the short version, if you’d like the in-depth reason for my question please read on.

——————

PPK (Peter Paul Koch) has been doing some testing on the image-x attribute [2], which is where a developer can specify different images at different pixel densities.

For example, imagine (on desktop) zooming into a page, and the image increases it’s pixel density as you zoom in, making it clearer (or at least not reducing in clarity for the size).

PPK created a test-case you can try [3], although the image doesn’t actually get clearer when it’s larger, it just shows what value your browser is using.

You’ll see (in FF/Chrome/Edge) if you zoom in, the image changes it’s version, and that mechanism would normally be used to set the image to be higher resolution. In that way you don’t send large high-res images to a browser that can’t use them.

The browsers don’t currently do the same thing, so it is at the point of needing standardisation. I think Firefox deals with it best because:

  *   As soon as you go above a threshold, FF goes for the highest quality version. E.g. If there are images for 1x, 2x, 3x, then as soon as you zoom to 1.2x, it will use the 2x image.
  *   As you zoom in or out, Firefox will dynamically change the image. Chrome has some odd algorithm where you have to re-fresh the page, and it will stick with the highest level one you’ve needed. Safari doesn’t change it at all. [See 2 under ‘clown car’ heading for the different behaviours.]

A little evidence for why this is helpful could nudge the defaults in a good way, assuming you agree Firefox is taking the best approach.

Kind regards,

-Alastair

1] https://alastairc.ac/2013/12/use-case-for-high-dpi-zoom/

2] http://www.quirksmode.org/blog/archives/2016/04/responsive_imag.html

3] http://www.quirksmode.org/css/responsiveimages/imgx.html


--

Alastair Campbell

www.nomensa.com
follow us: @we_are_nomensa or me: @alastc