#embed image data

So, in current times, I'm a little apprehensive to say anything too searchable in my bio such as that I'm trans. So I didn't want to use the official emoji. But I wanted the flag there for humans to see. I have very limited knowledge of html and css but I got this to work. I embedded the image data it's self into the html code. Usually images are linked, and the address is stated in the html, but that would require uploading the image somewhere and tumblr linking to it even when my not viewing it within my tumblr themed page.

So here's what I did. First I created a file in photoshop that is 8×5 pixels. I painted it with the colors of the trans flag. As tumblr limits how many characters you can put in your bio, the smaller the image the better. As the flag is the same left to right, I reduced it to 1×5 px. Then I saved it as a gif to the desktop.

I'm sure this is easy to do on a Windows or Linux computer too but on a Mac, open the Terminal app. *See alternative option below. type:

cd desktop

Then type: (include the single space at the end after txt)

base64 -i imagename.gif -o imagename.gif.txt

It'll export a file on the desktop with a code in it that looks something like this:

R0lGODlhAQAFAKIAANUtAP+aVv///9NipKMCYgAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQEAAAAACwAAAAAAQAFAAADBAghQwkAOw==

Add the image into the html with a usual:

<img src="#" alt="text" title="text"

Replace the # with this code and the image data:

data:image/png;base64,

Add the inline css to size and position it.

style="image-rendering: pixelated; height: .8em; width: 1.2em; display: inline; position: relative; top: -.15em;">

The final html code looks like this: (remove the $, its there to let you see the code without it rendering the image)

<$img src="data:image/png;base64,R0lGODlhAQAFAKIAAFvO+tewxfWpuPvd4////wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQEAAAAACwAAAAAAQAFAAADBAhCAgkAOw==" alt="TF" title="TF" style="image-rendering: pixelated; height: .8em; width: 1.2em; display: inline; position: relative; top: -.15em;">

So that's it. It doesn't work in posts, only a tumblr bio or a webpage of your own. Let me know if it works for you and I'll try to help if you run into trouble.

BTW, tumblr only allows up to 2000 characters including spaces in your bio.

Here are some references and additional information that I used to create this.

References:

https://www.thesitewizard.com/html-tutorial/embed-images-with-data-urls.shtml

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

https://www.macworld.com/article/221277/command-line-navigating-files-folders-mac-terminal.html

https://www.w3schools.com/Css/css_positioning.asp

*this next one is a tool that lets you create the image code without the Terminal app.

https://www.coderstool.com/gif-to-base64