Base Image
|
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
|
|
Overlay Image
|
iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABGdBTUEAALGPC/xhBQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAABy0lEQVQ4T82R30vTURjGH23q1AayfS1/UdiSDWYXIQTOKSkW2iAMSi8yFUFhIoyg8BdaBCo6J5tCRRczHGNRRNgImuKPBpMtwxsRu/HeG/HCP+DpPVs3wqJbH3g457zv+Zz38L44l8qyulBV7UaPWtU5Hf6PrnbB3Okzrcx9tbPTb1q50g3z39S/VfYIl+9P5UaXtxz8ErNx+Yedbd7cqPUpNJXPsvSh5oYbm7ZB9Mo5WwVFOscokh+S9XwTyeFMGFzbd/Dhop4oQwsq2lHZ5sk+Wj108nm4/OR6PzoEyrEMIB45aOJCBJz9DIaTFRwIatTu4qXkLWh8AX4/vEmPXAjtlND13sBbQ+Cn/ZpUzPsNDGwbORg0nubXYVSgSrEetc+w9zZRyoUtcC4KLv0q4sffZvrWBVoDX8fz6A4Zjo3NeCXANXG+WDqrQ0P9EBLTG3n0xwXeBD1irzy0mABdQd2x8Q4m5bLqZkEaSkvDJbQ2jCA2LhX8P8H5bYF2wScBnBqaUpXU/C6Kz8xQJy6WTjntw4hNbIDvDsDHAVBvx5jkFFQozjj4NFyM1rphJO55QNPtVCXViDPfyyQFa7iARhThgeytYr04AwT8AbItnnPVuaPiAAAAAElFTkSuQmCC
|
How to use Base64 Image Text with an 'img' Tag.
<img src="data:image/png;base64,[base64text]" />
By embedding Base64 image strings directly into your html
you will reduce the number of round trips required to load
your page.
This means sending the entire image with the markup - But
use with caution. Do not use with large images.
Do not use with images
you want to change often, unless the markup is created dynamically
with server code.
Base64 image strings are really handy for creating offline apps and
you want to reduce the number of files you need to manage.
Another way that I use them is to embed images inside javascript.
This allows
me to create a single javascript file, that incorporates images,
without the need of managing a list of files. If you have the js file,
you have everything required.
Richard
|