How to Embed Image Data using Data URIs

Posted by Lasantha Bandara on August 28th, 2016 File Under : html, image0 Comment

Data URIs can be used in your CSS files or inside HTML tags which saves the browser from having to make additional HTTP requests for the external resources, and can therefore increase page loading speed. Look at this image below, it is embeded into this page:

small-logo.gif

Normally, to display an image on your website you have to link to an external image file using the <img> element in HTML like this:

<img src="https://2.bp.blogspot.com/-U-ULPxt1lnk/V8JOcOAMvCI/AAAAAAAAOiU/YktrHe-n3sMNztSYe-FaIqrc2RKqakArQCLcB/s1600/favicon.gif" />

When using a Data URI inside an image tag:

<img src="data:image/gif;base64,R0lGODdhEAAQAPUAAAQCBISChERCRMzKzBwiHKymrOTm5AwSDGxqbDQyNFRSVLS2tNze3PT29BwWHAQKBJSWlERKRCwqLMzSzDw6PIyKjCwmLKyurLy+vPz+/BweHFROVAwGDCQiJOzu7BQSFDw2PGReZLy6vPz6/AwKDExKTNTS1AQGBISGhERGRMzOzHx6fDQ2NFRWVLS6tOTi5PT69BwaHJyanCwuLDw+PIyOjLSytCQeJCQmJPTy9BQWFAwODExOTNTW1AAAAAAAACwAAAAAEAAQAAAGpcDMINXR3IxIZIthkgAOn50jGY3yeBWRTZsilVzbcOlxyZiFjtL53MX1RgFDBkTLFAyGxYgSNWVqOS84CTIhHgYIEE43b2Y2UicJDR4zHEh+fg0bOhogkywxRRp+PCJ/UhSfnH0ZChgZCFI4qqIvQhkGlRoVI3BGAIaTLy1WHr25oRItKTwWVZ0RJUQaIgRPUaJUJ2o2CVQEVBQ9thi6yasfAgwwQQA7" />

To use an image as a CSS background, CSS code will be like this:

background-image: url("https://2.bp.blogspot.com/-U-ULPxt1lnk/V8JOcOAMvCI/AAAAAAAAOiU/YktrHe-n3sMNztSYe-FaIqrc2RKqakArQCLcB/s1600/favicon.gif");

When using a Data URI as a CSS Background:

background-image: url("data:image/gif;base64,R0lGODdhEAAQAPUAAAQCBISChERCRMzKzBwiHKymrOTm5AwSDGxqbDQyNFRSVLS2tNze3PT29BwWHAQKBJSWlERKRCwqLMzSzDw6PIyKjCwmLKyurLy+vPz+/BweHFROVAwGDCQiJOzu7BQSFDw2PGReZLy6vPz6/AwKDExKTNTS1AQGBISGhERGRMzOzHx6fDQ2NFRWVLS6tOTi5PT69BwaHJyanCwuLDw+PIyOjLSytCQeJCQmJPTy9BQWFAwODExOTNTW1AAAAAAAACwAAAAAEAAQAAAGpcDMINXR3IxIZIthkgAOn50jGY3yeBWRTZsilVzbcOlxyZiFjtL53MX1RgFDBkTLFAyGxYgSNWVqOS84CTIhHgYIEE43b2Y2UicJDR4zHEh+fg0bOhogkywxRRp+PCJ/UhSfnH0ZChgZCFI4qqIvQhkGlRoVI3BGAIaTLy1WHr25oRItKTwWVZ0RJUQaIgRPUaJUJ2o2CVQEVBQ9thi6yasfAgwwQQA7");

How do you get a Data URI for an image?

There are many online tools to generate Data URIs. Use this Data URL Maker Tool. It's a drag and drop one.

File Under : html, image

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.