Multiple base64 files in one

Question

Can you combine these 2 images into one external file on this JS fiddle and link to them as images?

Something like

Answer 1

It is possible to put all resources (JavaScript, CSS, fonts, images) together in one big (cacheable) JavaScript file. The file will look messy (because of some lengthy CSS and Base64 strings), but don't let that put you off; you can use code generation to compile the JavaScript file from its separate components (see below).

Demo: http://jsfiddle.net/PgdXd/

CSS

Put your entire stylesheet in a single string literal (do not forget to escape quotes and line breaks) and embed that inside a JavaScript statement that dynamically creates a style element.

$('head').append("");

Note: I am using jQuery here, but plain JavaScript will do just as well.

The statement above may have no effect in older web browser versions. For alternatives, see: How to dynamically create CSS class in JavaScript and apply?

Fonts

Embed your Base64-encoded font files inside your stylesheet, as explained here: http://sosweetcreative.com/2613/font-face-and-base64-data-uri

@font-face {
    font-family: 'latoregular';
    src: url(data:application/x-font-woff;charset=utf-8;base64,........) format('woff');
    font-weight: normal;
    font-style: normal;
}

As shown earlier, this should be embedded within the JavaScript statement that holds your stylesheet:

$('head').append("");

Images

There are two flavors. Background images can be specified in the stylesheet, just like we did with fonts:

.logo1 { background-image: url(data:image/png;base64,.......); }

The second flavor are regular images. In the HTML file, use img tags with an empty src attribute.

Use javascript to populate the src attribute. The entire Base64 string is a string literal embedded inside the JavaScript statement.

$('.icon1').attr('src', 'data:image/png;base64,.......');
$('.icon2').attr('src', 'data:image/png;base64,.......');

The CSS class determines which data belongs in which img tag(s). It is alright for a certain class to be unused in one or more HTML pages that will be including this JavaScript file. The Base64 string just gets passed around a bit; the same negligible overhead is involved in other JavaScript-based approaches.

Code generation

Here's a simple example using bash scripts. But feel free to use Perl or T4 or whatever language or tool you like instead.

gendatauri.sh: outputs a data URI; parameters are filename and (optionally) MIME type.

#!/bin/bash
echo "data:${2:-$(file -bi $1)};base64,$(base64 -w0 $1)"

genimgsrc.sh: generates the jQuery statement to populate the src attribute of elements; parameter is filename.

#!/bin/bash
filename=$1
basename=${filename##*/}
classname=${basename%.*}
echo "\$('.$classname').attr('src','$(./gendatauri.sh $filename)');"

gencss.sh: your stylesheet; use $(./gendatauri.sh FILENAME [MIMETYPE]) to inject file data. Example:

#!/bin/bash
cat << EOF
@font-face {
    font-family: 'latoregular';
    src: url($(./gendatauri.sh latoregular.woff "application/x-font-woff;charset=utf-8")) format('woff');
    font-weight: normal;
    font-style: normal;
}
.logo1 {
    background-image: url($(./gendatauri.sh icon1.png));
}
EOF

genjs.sh: combines all the different components into a single JavaScript file. Example:

#!/bin/bash

# CSS, including fonts and background images
(
    echo '$("head").append("");'
) | tr '\n' ' '
echo

# images
./genimgsrc.sh icon1.png
./genimgsrc.sh icon2.png

# JavaScript
cat YourOwnFunctions.js

Run it and redirect its output to generate the final JavaScript file. Make sure the .png, .woff and other resource files are present when you do.

./genjs.sh > GeneratedJavaScriptFile.js

Included the JavaScript file in each HTML file:

Just for clarity: on the web server, you only need GeneratedJavaScriptFile.js and the .html files; the original resource files do not need to be present there.