<a>

The <a> tag is one of the important elements of HTML and is designed to create links, so that users and robots can navigate to other web addresses (for example, it may be a bookmark within same web page, an external file, or even a different scheme). To specify a web address for the <a> tag, you must add the href attribute, which, among other things, accepts data URIs.

For example, to link to a one-pixel red dot image, we should specify the image URL as follows:

<a href="//static.base64.guru/uploads/images/1x1.gif">view image</a>

The same can be achieved by encoding image to Base64 and embedding it using Data URI:

<a href="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=">view image</a>

The actions of these links are identical — when you click on “view image” your browser will open the same image. The difference is that in the first case the browser sends one HTTP request to fetch the image, when in the second case the image is already loaded in the browser’s memory and it does not need to send any HTTP requests.

Of course, instead of images, you can refer to other file formats. Just remember that if you want the file to be handled by browser, you must specify the correct MIME (as example, encode file to Base64). Otherwise, if you want to force file downloading, use the following:

<a download="image.gif" href="data:application/octet-stream;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=">download image</a>

Please note that Base64 Data URIs have some limitations. In addition, like almost any unconventional solutions, it has both advantages and disadvantages. Therefore, if you plan to use it, first of all, read about Base64 Data URI.