Dokuwiki: Hi-Res Image Support

[splitbrain]

We resize all images to their displayed size. This saves bandwidth and makes pages load faster on slow connections. However modern high resolution displays have more dots per pixel available and would benefit from larger images scaled down by the browser for sub-pixel rendering.

There are multiple ways to address this (in order of difficulty):

1. we could always resize to 2x sizes
2. we could use source sets to let the browser decide which image to download based on screen resolution
3. we could use source sets and media queries to influence which image to download based on screen resolution and screen size

One problem is that phones have high resolution but may have low bandwidth. We need to find a sensible middle ground.

Obviously we will never upscale images. The question is when is 2x (or 3x or 4x) too large and should not be done?

Basically, what we need to come up with is: what should the HTML be that is generated for something like {{myimage.jpg?500}}.

[Michaelsy]

I would have an idea how to do it. I place my idea between the first and second of the three variants given above.

My approach is to essentially let the user (and/or the wiki admin) choose which image resolution is delivered by the server. That means the user and the wiki admin get the possibility to set the display size on the screen and the image resolution separately.

If desired, I can provide more concrete details.

what should the HTML be that is generated

The HTML would be the same in my solution as in the current implementation, except that the parameters for fetch and width would have different values typically.

However, I must admit that I don't know how variants 2 and 3 given above would be technically implemented and what concrete possibilities would follow from that. (I assume JavaScript is mandatory for this?).

Normally, I would now research this on the Internet. In this case, however, I can't think of what keywords to look for. A hint would be appreciated.

- Michael Sy.

---

Edit: I realise that my approach is not necessarily a sufficient solution for Hi-DPI displays. But as far as I can see, it is quite simple and would be a significant improvement over the current situation. (Keep it simple, a simple solution has elegance.)

[mprins]

the HTML5 answer is using srcset
It's an arbitrary choice on how many image densities should be provided, perhaps default to 2 and make it configurable to have more; this really depends on the expected audience of a site.
If you want to make loading on phones lighter you could use media width queries instead of image densities.

I thinkt ist should look something like this:

<a href="/_detail/wiki:dokuwiki-128.png?id=wiki%3Asyntax" class="media" title="wiki:dokuwiki-128.png">
  <img src="/_media/wiki:dokuwiki-128.png?w=128" width="128"
       srcset="/_media/marketing:hackfest.jpg?w=256&amp;tok=4b081f 2x" 
       class="mediacenter" title="This is the caption" alt="This is the caption"
  >
</a>

or this:

<a href="/_detail/wiki:dokuwiki-128.png?id=wiki%3Asyntax" class="media" title="wiki:dokuwiki-128.png">
  <img src="/_media/wiki:dokuwiki-128.png?w=128" width="128" 
       srcset="/_media/marketing:hackfest.jpg?w=256&amp;tok=4b081f 2013w" 
       class="mediacenter" title="This is the caption" alt="This is the caption"
  >
</a>

see eg. https://html.com/attributes/img-srcset/

[phy25]

One problem is that phones have high resolution but may have low bandwidth. We need to find a sensible middle ground.

We should be fine as long as we feel that respecting https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data is enough.

[gamma]

I'd offer resized images depending on the input images quality. I did a simple implementation in the nodetailsxhtml renderer - The image should always be delivered using the standard src attribute and, if available, offer additional srcset definitions.

I also think that bandwidth on mobile is not too restricted anymore and eg. iOS may request the desktop page anyway.