Images embedding into HTML

Currently known image use in HTML do not have a support of reusing:

• IMG tag do not refetch the file, but still issues http request
• CSS background-image keeps the image in backround. Still it is the most powerful since it allows to reuse the image, pick the tiles, associate with CSS rule switch animation.
• SVG embedding allow to reuse the image only by reusing its source text. Each image will have own instance in browser.

JS has a powerful gears for image reusing. The cloning image node will keep the same image reference. Unfortunately this optimization did not sneaked into JS libraries I am using.

Q. How to make image reusing convenient and still efficient on browser side?

Will be the preprocessor of HTML template the proper answer?

1. It could strip off the URLs from IMG tags. Say by renaming src attribute.
2. Load the image say in hidden node, keep it in global url to img map
3. Upon image load and when widget dom is ready, roll over all IMG-es in DOM and swap with clone of cached one; apply all original attributes and CSS.

This method should work as compiler layer + runtime patch to DTK templated widgets;

PS. This note is just a response on multiple attempts around on image use optimization. As plain idea it is not worth anything, so bug me if you see the need for code or help there.