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:
<img src="location/of/image.png" alt="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 <img> 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.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ 0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0 NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ AAAAAElFTkSuQmCC" alt="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!
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.