Base64 Encoder


Choose a file:


How to implement Base64 strings on my website?

Both HTML and CSS files support the use of Base64 data strings. Copy the codes in the tab below and replace "YOUR BASE64 STRING HERE"  with your own Base64 string. Click the tab link below for more information on how to implement different file types in your HTML and CSS documents:

Usage of Base64 in HTML

JPEG IMAGES: <img src="data:image/jpeg;base64,YOUR BASE64 STRING HERE"/>
PNG IMAGES:  <img src="data:image/png;base64,YOUR BASE64 STRING HERE"/>
GIF IMAGES:  <img src="data:image/gif;base64,YOUR BASE64 STRING HERE"/>
XML IMAGES: <xml><image>data:image/jpeg;base64,YOUR BASE64 STRING HERE</image></xml>
** replace image/jpeg with image/png or image/gif if you're not using jpegs
JAVASCRIPTS: <script type="text/javascript" src="data:text/javascript;base64,YOUR BASE64 STRING HERE"></script>
CSS: <link rel="stylesheet" type="text/css" href="data:text/css;base64,YOUR BASE64 STRING HERE"/>

Usage of 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');}

Want To Have The Maximum Page Speed Possible For Your Website?

We can help you with that! Over the years we have professionally optimized the speed of thousands of websites. We know how to get the best results and our prices are affordable. Get an instant price quote for our website speed optimization services now.

Maximum Possible Speed - Best Scores

We optimize the speed of a website to its maximum potential. We do this by doing our own analysis and taking the Google PageSpeed test results to fix all found issues one-by-one, resulting in the maximum possible speed scores. You can take our own website as an example.

Optimized in 1 or 2 Days - Affordable Prices

Because of years of experience we can usually optimize a website in 1 or 2 days. The methods we use are guaranteed 100% safe, resulting in no downtime or other issues.