<img src="take-this.jpg" />
But it's also possible to put the image directly inside the web page source. This is done using a data URI:
<img src="data:image/jpeg;base64,image-data-goes-here" />
The URI contains the content-type of the image ("image/jpeg" in this case, since this image is a JPEG) and the image data encoded in base64.
This is supported by most browsers. Internet Explorer support lags behind, with only version 8 supporting it (to a limited extent).
This technique shouldn't be used on a regular basis, since it bloats the size of the web page considerably and makes it take longer to load. Including images as separate files (the typical way) lets the user explore the page while the more bandwidth intensive images are loading.
Check out my Data URI Generator to generate a data URI from an image of your choosing.
1 comment:
I always included the image using image file path I never knew that I could do this in other way as you said using a data URI
image-data-goes-here is base64 encoded.How to do that.Also if it is not recommended way to be used then where it should be
Post a Comment