Skip to content
Back to blog

How to implement Base64 strings in html or CSS?

Leibniz Li


Both 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: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');

base64 decoding/base64 encoding


Learn more documentation

ARayOfSunshine provides some small and beautiful apps, including macOS, Windows, iOS, and iPadOS. Using them can make your life more convenient. If you have a better idea don't hesitate to tell us.

Learn more