A brief overview how to encode an Image as Base64 in a Markdown File. Keep in mind that Base64 encoding increases the file size by approximately 33% due to the conversion process.

The Basics

Base64 encoding is a binary-to-text encoding scheme that converts any binary data into a series of ASCII characters. It is widely used in various applications, including HTML, CSS, JavaScript, and even Markdown files. Markdown is a lightweight markup language used for formatting text, making it an ideal choice for creating and documenting various types of content.

So, how can we encode Base64 in a Markdown file? Well, it’s quite simple. There are several ways to achieve this, and I’ll walk you through two common methods.

Method 1: Online Base64 Encoder/Decoder Tools

The easiest way to encode Base64 in a Markdown file is by using online Base64 encoder/decoder tools. These tools allow you to encode any text or file into Base64 format and vice versa. You can find numerous reliable options with a quick internet search.

Method 2: Command-line Tools

If you prefer working offline or have more technical expertise, you can utilize command-line tools to encode Base64 directly in your Markdown file. Most operating systems provide built-in tools or third-party libraries to achieve this.

Here’s a step-by-step guide, worded in somewhat more general terms:

1. Open your preferred command-line interface (e.g., Terminal on macOS or Command Prompt on Windows).
2. Ensure you have the required tools installed. For macOS users, you can use the built-in base64 command. Windows users may need to install third-party tools like GNU core utilities or use PowerShell commands.
3. Navigate to the location where your Markdown file is saved using the cd command.
4. Use the appropriate command-line tool to encode your desired text into Base64. For example, on macOS, you can use the command base64 -i input.txt -o output.txt to encode the contents of input.txt file into Base64 and save it in output.txt.
5. Open your Markdown file using a text editor, and include the Base64 encoded content wherever necessary.
6. Save the Markdown file.

The example

How to use a picture normally in markdown:

![Keyboard](example.jpg)`

How to use a picture with base64 endocing in markdown:

![Keyboard](data:image/png;base64,/9j/4AAQSkZJ....Base64 Encoding)

The (Simple) Conclusion

It’s technical possible to enclude a Base64 image in your markdownfile but not really worthhwile.

One reaseon is you dont’t save space the file size just increases:

File size without the base64 image around 3 KByte.

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----

-a----        10.12.2023    10:01           2758 index.md

File size with the base64 image around 371 KByte

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----

-a----        10.12.2023    10:01          371355 index.md

Another reason is the readbilty for humans. This is how image from above looks in the markdown file: