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 it 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.

[adam52]

What about using a 1x image size as a low-quality-image-placeholder (LQIP) while lazy loading a 2x sized image, where retina support is detected? It looks like there are a number of javascript libraries that already offer this functionality. Here are a couple of links that seem relevant...

• Guide to Lazy Loading Images
• bLazy plugin

[gerardnico]

I have worked on this problem for the last month.

What we have generated is an image tag with:

• a ''srcset'' that use the resizing capability of Dokuwiki to defines different natural sizing at different breakpoints
• and CSS styling to constraint the width (ie ''max-width'' set to the asked width and ''width'' to ''100%'' to avoid overflow) We didn't take into account the height parameter.

You can check the generated tag on this page: https://combostrap.com/ui/raster#illustration

From a performance perspective, we came at the conclusion that the browser should do the decision, it's the only one that know the network condition and the screen resolution. And as already pointed, the user can also set this as preference.