- 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.
Q. How to make image reusing convenient and still efficient on browser side?Will be the preprocessor of HTML template the proper answer?
- It could strip off the URLs from IMG tags. Say by renaming src attribute.
- Load the image say in hidden node, keep it in global url to img map
- 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.
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.