Add background <img>s (depending on page template)

[strarsis]

The theme uses different background images (which belong to the theme and also
adjust to different viewports (art direction)).
As the background image is quite important for the overall visual impression in
this theme, it should also be shown in the Gutenberg editor.

An <img alt=""> is used for using srcset and sizes for support of
covering background images (which occupy the height after some
viewport ratio threshold (see https://codepen.io/tigt/post/when-responsive-images-get-ugly#height-and-width-constrained-srcset)).

One approach that comes to mind would be adding these <img>s all with
display: none; to admin page footer using the admin_footer hook and
then show them using the right body class (another approach is used for this,
see #8162 (comment)).
However, the browser will still download all these background images,
even when only one background image (or even none, depending on what
page template should be used, some may use none at all) should be shown.

As already the nice PageTemplateUpdater is used (see the aforementioned link #8162 (comment)),
it could use JavaScript (React) to append the right <img> (with srcset and sizes) to
the editor page or remove it again when the template is changed.
Is this the right approach? How can the theme (server side PHP) provide the map for
template slug and the corresponding image URLs (and size) attribute?
Can the HTML be injected by the theme as a JavaScript template that can
be simply applied without the browser parsing it
(and downloading all the images unnecessarily)?

What would be the best practice approach for adding <img>
(or other decorative elements that are non-pseudo elements) to the editor page by page template?

[strarsis]

Found a working solution:
https://discourse.roots.io/t/gutenberg-body-class-elements-by-template/15310