How to implement Base64 strings in html or CSS?
Leibniz Li
@leibnizliBoth HTML and CSS files support the use of Base64 data strings. Copy the codes in the tab below and replace "YOUR_BASE64_STRING" with your own Base64 string.
Usage of Base64 in HTML
- JPEG:
<img src="data:image/jpeg;base64,YOUR_BASE64_STRING"/> - PNG:
<img src="data:image/png;base64,YOUR_BASE64_STRING"/> - GIF:
<img src="data:image/gif;base64,YOUR_BASE64_STRING"/> - SVG:
<img src="data:image/svg+xml;base64,YOUR_BASE64_STRING"/> - JAVASCRIPTS:
<script type="text/javascript" src="data:text/javascript;base64,YOUR_BASE64_STRING"></script> - CSS:
<link rel="stylesheet" type="text/css" href="data:text/css;base64,YOUR_BASE64_STRING"/>
Usage of Base64 in CSS
- IMAGES:
.yourclass {background: url('data:image/jpeg;base64,YOUR_BASE64_STRING');} - FONTS:
@font-face { font-family: 'yourfontname'; src: local("yourfontname"), url(data:font/opentype;charset=utf-8;base64,YOUR_BASE64_STRING), url(data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff), url(data:application/font-woff2;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff2), url(data:application/font-ttf;charset=utf-8;base64,YOUR_BASE64_STRING) format('truetype'); }