Use Base64 Encoding in a Markdownfile
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:
- Open your preferred command-line interface (e.g., Terminal on macOS or Command Prompt on Windows).
- 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. - Navigate to the location where your Markdown file is saved using the
cd
command. - 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 ofinput.txt
file into Base64 and save it inoutput.txt
. - Open your Markdown file using a text editor, and include the Base64 encoded content wherever necessary.
- 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: