Six-Four

A base64 encoder for images that embeds encoded image data in HTML, Markdown, CSS, LESS, or SASS files at the site of an embed tag.

Developed by Chris Simpkins Proudly hosted by

Description
Dependencies
Install
Usage
Help
License

Description

Six-Four is a base64 encoder for images that embeds an appropriately formatted, encoded image in HTML, Markdown, CSS, LESS, or SASS files. It will optionally stream the raw encoded image data through the standard output stream for use in other applications.

The application automatically detects the image MIME type and appropriately formats your embedded tag output according to the specifications of the target file type.

Dependencies

Six-Four is Python powered. You must have Python 2 or 3 installed on your system in order to use it.

It has been tested in Python versions 2.7.x and 3.3.x

Install

If you use pip for Python package management, you can install Six-Four with the following command:

pip install sixfour

That's it. Skip the remainder of this section if you use the above install method. You can upgrade to new releases with the command: pip install --upgrade sixfour

Otherwise, download the current source code release using one of the following methods:

Method 1: Clone the GitHub repository with Git

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

Method 2: Download a compressed archive

Use one of the buttons in the top right corner of the screen to download a compressed archive of the source files.

Once you have a decompressed source archive, navigate to the top level directory in the source distribution and enter the following command:

python setup.py install

This installs a Python script in your PATH so that you can use the application with the command:

sixfour

Give it a try with the following command to confirm your install:

sixfour --version

If you see the version number displayed in your terminal, you are good to go.

Usage

Available Options

Short Option	Long Option	Argument	Description
-c	--css	<CSS filepath>	Embed encoded data in CSS
-h	--help	None	Show help documentation
-i	--image	<Image filepath>	Input image file path
-l	--less	<LESS filepath>	Embed encoded data in LESS
-o	--html	<HTML/MD filepath>	Embed encoded data in HTML or MD
-s	--sass	<SASS filepath>	Embed encoded data in SASS
-v	--version	None	Display version number

base64 Encode and Pipe Through Standard Output Stream

sixfour -i "path/to/image.png"

To pipe the base64 encoded image data through the standard output stream, enter an image file path as the argument to the -i or --image flag.

This will print the data to your terminal by default; however, you can use the pipelining capabilities of your OS to stream the data to the standard input of another application. On Unix (including Mac OSX) and Linux systems, use the pipe ('|') symbol to pipeline the data to another application:

sixfour -i "path/to/image.png" | imageapp --processit

base64 Encode and Embed as <img> Tag in HTML or Markdown File

Insert the tag {{64}} at one or more sites in your Markdown or HTML file where you want to embed the base64 encoded image tag:

<!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:

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

The {{64}} tag in the HTML above will be replaced with a <img> tag like this:


<!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 alt attribute is filled in with the name of the image file (without the image file type suffix). This is repeated for every {{64}} tag in the document.

base64 Encode and Embed in CSS File

You can embed the base64 encoded file as a data URI in a CSS file. To do this, insert the tag {{64}} at one or more positions in your CSS file where the data URI should be embedded.

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

Then run Six-Four with your image and CSS file path information. Include the image file path as the argument to the -i or --image flag. Include the CSS file path as the argument to the -c or --css flag.

sixfour -i 'path/to/coolimage.png' -c 'path/to/main.css'

And the embedded CSS text will look like this:

.base64test {
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAAOElEQVQ4y2N4Qz3AAMSfP73DJCEIPxuNZBh112Bz14cPEISPjdVdg9Ws0fAaDa8hHF6j5dcQcxcA3DHODs/IAR8AAAAASUVORK5CYII=') repeat-x;
}

base64 Encode and Embed in LESS File

Use the -l or --less flag with a path to the LESS file. Insert the LESS variable @sixfour at the site where you would like to embed your base64 encoded image. This variable does not need to be defined in your LESS file.


        .funky {
  background: #fff @sixfour repeat-x;
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

Run Six-Four on your LESS file (before you compile it with LESS) with the following syntax:

sixfour -i 'path/to/coolimage.png' --less='less/main.less'

base64 Encode and Embed in SASS File

If you use the -s or --sass flag with the file path to a SASS file, you can use the SASS variable $sixfour as the embed tag for your data URI. Insert the variable at one or more sites in the target SASS file where you would like to embed the encoded data URI. You do not need to define this variable in your SASS file, simply insert it where you would like the data URI to be embedded.

.funky {
  background: #fff $sixfour repeat-x;
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

Then use Six-Four to embed one or more appropriately formatted base64 encoded data URI in the SASS file:

sixfour -i 'path/to/coolimage.png' --sass='sass/main.scss'

and compile the file normally with sass:

sass --update 'sass/main.scss'

Six-Four will automatically detect the image MIME type and appropriately indicate this in the embedded data URI.

Help

Help is available in the application with either of the following commands:

sixfour -h

sixfour --help

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.