Base64 in HTML
HTML attributes that take a URL (src, href, data, poster) can take a data URI instead. This keeps a page self-contained, which is useful for e-mails, single-file reports and offline demos.
<img>Display a Base64-encoded image in HTML using the <img> tag and a data URI in the src attribute.<a>Link to a Base64-encoded file with the <a> tag and a data URI, and force a download with the download attribute.<audio>Embed Base64-encoded sound (MP3, WAV, Ogg) in a web page with the HTML5 <audio> tag and a data URI.<video>Embed a Base64-encoded MP4 or WebM video using the HTML5 <video> tag and a data URI.<source>Provide Base64-encoded media alternatives with the <source> tag inside <audio>, <video> or <picture>.<picture>Serve Base64-encoded images in different formats with the <picture> element and data URIs.<iframe>Embed a Base64-encoded HTML document, PDF or SVG inside an <iframe> with a data URI.<embed>Display Base64-encoded PDFs and other media with the <embed> tag and a data URI.<object>Embed Base64-encoded media and documents with the <object> tag, including fallback content.<input>Use a Base64-encoded image as a graphical submit button with <input type="image"> and a data URI.<link>Load a Base64-encoded stylesheet or favicon with the <link> tag and a data URI.<script>Execute Base64-encoded JavaScript with the <script> tag and a data URI, and why CSP may block it.<style>Embed Base64 images inside a <style> block using CSS url() with data URIs.
Comments (0)
Questions, ideas or a bug in “Base64 in HTML”? Leave a comment, rate the tool, or reply to others.
No comments yet. Be the first to share your feedback!