Juicy lil' bytes

Six-Four | Base64 Encode and Embed Your Images in HTML, Markdown, and CSS Files

Six-Four is a command line tool that performs base64 encoding of image files and optionally embeds the data, with appropriate data URI formatting, into a user determined HTML, Markdown, or CSS file location.

Dependencies

Six-Four was developed in Python and will run in versions 2 or 3. I have tested it in versions 2.7.5 and 3.3.2.

Install

If you use pip for Python package management, you can use the following install command:

1
pip install sixfour

Skip the remainder of this section if you use the above command.

If you don’t use pip, you can clone the source from the GitHub repository with the following command:

1
git clone https://github.com/chrissimpkins/six-four.git

or, alternatively, download a tar.gz or .zip compressed archive from GitHub.

Decompress the source and navigate to the top level of the directory. Then run the following install command:

1
python setup.py install

This will install a script named sixfour in your PATH so that you can run the application with the following command:

1
sixfour

To confirm that it worked, give it a try with this command:

1
sixfour --version

If the version number is displayed, you are good to go.

How to Embed a base64 Encoded Image in HTML or Markdown

Insert the tag {{64}} at the site where you want to embed the base64 encoded image tag in your Markdown or HTML file. My preformatted code block formatting chokes with that tag syntax so imagine the 64 below actually looks like this —> {{64}} (or feel free to head over to the documentation to view the appropriate syntax).

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
    <!-- snip -->
    <body>
        <div class="main-container">
            <div class="main wrapper clearfix">
            64
            </div>
        </div>
    <!-- snip -->
    </body>
</html>

Include both the -i flag with an image file path and the -o flag with a HTML or Markdown file path in your command:

1
sixfour -i 'path/to/coolimage.png' -o 'path/to/index.html'

and here is what you get (with the sweetmeat logo as the encoded file in this example):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
    <!-- snip -->
    <body>
        <div class="main-container">
            <div class="main wrapper clearfix">
            <img src="data:image/png;base64, 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
            YII=" alt='coolimage' />
            </div>
        </div>
    <!-- snip -->
    </body>
</html>

The image filename is included as the alt attribute in the img tag.

How to Embed a base64 Encoded Image in CSS

In order to embed a base64 encoded image URI in a CSS document, insert the {{64}} tag in a CSS file element at the location where you would like the data URI to be embeded. Then, use the -c or --css flags (with the CSS file as an argument) rather than the -o or --html flags that were used above for Markdown and HTML files.

Again, imagine that the 64 in the preformatted code below actually looks like this {{64}}.

1
2
3
.base64test {
    background: #fff 64 repeat-x;
}

then run a command with the following syntax:

1
sixfour -i 'img/coolimage.png' -c 'css/main.css'

and the CSS file will have the data URI embedded like this:

1
2
3
.base64test {
    background: #fff url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAAOElEQVQ4y2N4Qz3AAMSfP73DJCEIPxuNZBh112Bz14cPEISPjdVdg9Ws0fAaDa8hHF6j5dcQcxcA3DHODs/IAR8AAAAASUVORK5CYII=) repeat-x;
}

Get Help

The documentation is available here and you can view the help documentation in the application with the command:

1
sixfour --help