How To Embed Images Directly Into Your HTML

When you code a web page, you’ll oftentimes want to include images. In almost every case you’ll throw down a line of code that looks something like this:

alternative text

But did you know that you can embed your image directly into the HTML without having to link to an external file? Yep, but first, why would you want to? In a word, portability. In certain cases, you may want to be able to pick up your page and simply relocate it without worrying about whether linked images are going to transfer correctly as well. How do we do this? Observe.

Let’s say you have an image that you want to include in your markup — when you link to it, the browser interprets it as encoded data in a format dictated by your tag. In theory, you can convert the image directly to encoded data and put it directly into the src parameter, right? Let’s find out.

A Blue Star is a tool for converting data, including images to Base64 encoding. It allows you to upload an image and then spits out the Base64 conversion for you. After uploading an image, you’re left with an image tag that has a stream of Base64 code instead of an image location.


beastie.png

Cute, right? It’s not exactly reader friendly, but look below to see how the browser interprets it — cool, that’s eight-bit me! And no linked image required!

beastie.png

If you’re interested in trying this on your own without a pre-made base64 conversion tool, pay special attention to data:image/png;base64, which precedes your converted string in the src of your image tag.

Whether you’re creating a Read Me or streamlining your file structure, embedding images directly into your HTML may be just the thing you need. This isn’t practical for day-to-day decide, but at least now you have the option.