Sometimes we want to display an image in an email or on a web page without using a label (tag) of <img>. Or in a style sheet (CSS) we just want to specify the content of the image instead of referring to it in a path.
Using Data URI Schemes, we can specify the “string” of Base64 equivalent to a graphic image. That is, we are specifying “in-line” image, data format, instead of using an img tag that involves the location of the image as an external resource.
So instead of this
Now, how to know the base64 string of an image? We can use the online tool called Image to Base64 converter.
The Data URIs also have some limitations:
Only work in Internet Explorer version 8 onwards.
The images are not cached separately, so if the HTML or CSS is downloaded again, the images too.