Convert Images to Base64 for HTML, CSS & Email
Whether it is an icon in a CSS style, a logo in an email signature, or an offline demo, embedding images as Base64 data URLs is a reliable technique. This guide walks through the workflow and the rules of thumb that keep pages fast.
Choose the right input image
Start with the smallest sensible file: resize to the exact display size, prefer PNG or WebP for icons and logos, and JPEG for photos. A data URL inherits the source file’s size, so a 2 MB source means a roughly 2.6 MB string in your markup.
Convert to a data URL
The Image to Base64 tool reads the file in your browser and produces a copy-paste-ready data URL or a raw Base64 payload. Raster images get a safe preview; SVG is offered as a download to keep markup injection out.
Embed in HTML or CSS
In HTML place the value directly into an <img src="data:image/png;base64,..."> tag. In CSS use it inside url() for background-image. The MIME type travels inside the URL itself, so the browser renders it without any external fetch.
Email signatures and mail clients
Signatures are the classic use case: a Base64 logo renders in most mail clients without attachments. Keep the source image tiny — at 150 px no caption or shadow is visible — and remember some clients still block external images, which data URLs sidestep.
Performance and file size
The 33% Base64 overhead plus the string’s presence in your document means data URLs are best for a few small assets. For anything large or shared across pages, host the image as a file and let the browser cache it.
Private by construction
The whole conversion happens in your browser, so the image never leaves your device until you choose where to paste the generated string. No upload, no watermark, no account.