A guide to how to embed Base64 stuff in your web stuff.

base64.md

HTML

Here is some code on how to embed Base64 in HTML:

JPEG

<img src="data:image/jpeg;base64,BASE64_STRING"/>

PNG

<img src="data:image/png;base64,BASE64_STRING"/>

GIF

<img src="data:image/gif;base64,BASE64_STRING"/>

JavaScript

<script type="text/javascript" src="data:text/javascript;base64,BASE64_STRING"></script>

CSS

You can also Base64 encode stuff straight in your CSS:

Images

.yourclass {
  background: url('data:image/jpeg;base64,BASE64_STRING');
}

OpenType Fonts

@font-face {
  font-family:'FONT_NAME';
  src: url(data:font/opentype;charset=utf-8;base64,BASE64_STRING);
}

WOFF Fonts

@font-face {
  font-family:'FONT_NAME';
  src: url(data:application/font-woff;charset=utf-8;base64,BASE64_STRING) format(‘woff’);
}

TrueType Fonts

@font-face {
  font-family:'FONT_NAME';
  src: url(data:application/font-ttf;charset=utf-8;base64,BASE64_STRING) format('truetype');
}