[Feature] Use <picture> element for image fallback

[nicosemp]

I have searched the existing feature requests, both open and closed, to make sure this is not a duplicate request.

• Yes

The feature

Currently the web client requests a specific image version (original, fullsize, preview) based on the context and user/admin settings.

In case of an unsupported mime type, the browser will render a fullsize image (if enabled) or a preview. Would you consider changing this logic to always use the fullsize and preview urls, along the original, as fallbacks in a <picture> element?

Modifying the first example from MDN, the code could look like this:

<picture>
  <source
    srcset="/path/to/original"
    media="some media rule to show or hide based on the size" />
  <source
    srcset="/path/to/fullsize"
    media="some media rule to show or hide based on the size" />
  <img src="/path/to/preview" alt="" />
</picture>

All elements can be included or omitted to support the current logic:

• Respecting the alwaysLoadOriginal user setting.
• Showing the original when zooming in.
• Fullsize generation admin toggle.

This would take care of fallbacks, without manually checking compatibility for a specific mime type. It could also be potentially used to serve different image versions based on the image size (in the grid or expanded) or other parameters.

Platform

• Server
• Web
• Mobile

[nicosemp]

@alextran1502 would you be interested in this if I worked on it?

[meesfrensel]

Hey, I looked into this and concluded that, while using srcset and friends has some advantages for responsive image selection/loading (depending on screen or image size) and easy mime type checks, this doesn't work for progressive image loading (starting with low resolution for quicker loading). It's a shame, because our image loading pipeline is pretty complex and simplifying that would be nice.