This is a novel approach to solving a problem I’ve others mention on more than one occasion.
All the various W3C html specs mandate a value for the src
attribute of the
tag. The W3C spec does not, however, specify that said value must be URI. Rather, it may be the actual encoded MIME data of the image file itself.
It’s a good way of reducing the number of orphaned files we have to worry about as one of the primary causes of the file structure expansion is the propagation of image files that are discarded during the development process.
I used it here because this is an ideal example of such an instance; I have, however, reverted the value of the src
attribute from MIME data back to a URI pointer. Sorry for not including an explanation; I didn’t realize it, but this must be an obscure subject. Please accept my humble apology for any resulting confusion.
I’ve included below the encoded MIME data for reference.
<img src="data:image/jpg;base64,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" />
It also helps me keep perspective on how big the image data is. Helpful for mobile browser development.