Sunil Singh

Images using Data URI Scheme

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

<img src="images/sunil_Img.jpeg" alt="sunil_Img" />
we can do this

<img alt=" sunil_Img" src="data:image/jpeg;base64,ttdfgy0l56GODlhdfrghQBvAPfdgAGVlZbKysvH5/YEHDAo2fKqqqvX19SIiIujo6RJqfthfthhdfgDFdfjojWDdfgGthfz9/Y+51gpJm7jyuyu5h7QiUwUhIfthSC2jghgyQogh7g0iIdtft4bS5dfdIfM4BO…………. =" />

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.