Base64 Encoder FAQ
The most frequently asked questions
How do I use Base64 strings on my website?
Both HTML and CSS support Base64-encoded data strings. To use them, copy the code snippets below and replace "YOUR BASE64 STRING HERE" with your own Base64 string. Scroll down for implementation details on using various file types in HTML and CSS.Using Base64 in HTML
IMAGES: .yourclass {background: url('data:image/jpeg;base64,YOUR BASE64 STRING HERE');}** replace image/jpeg with image/png or image/gif if you're not using jpegs
OPENTYPE FONTS: @font-face{font-family:'yourfontname'; src: url(data:font/opentype;charset=utf-8;base64,YOUR BASE64 STRING HERE);}
WOFF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-woff;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff);}
WOFF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-woff2;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff2);}
TTF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');}
Using Base64 in CSS
IMAGES: .yourclass {background: url('data:image/jpeg;base64,YOUR BASE64 STRING HERE');}** replace image/jpeg with image/png or image/gif if you're not using jpegs
OPENTYPE FONTS: @font-face{font-family:'yourfontname'; src: url(data:font/opentype;charset=utf-8;base64,YOUR BASE64 STRING HERE);}
WOFF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-woff;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff);}
WOFF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-woff2;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff2);}
TTF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');}