Convert an image to Base64
Encode an image as a base64 data URL and embed it directly in HTML or CSS, with no separate file to deploy. Handy for small icons and logos. The img tag and CSS rule are generated for you to copy.
What a data URL is
A data URL is `data:image/png;base64,` followed by the file’s bytes written in base64. The browser treats it as the image itself rather than a reference to one, so nothing extra needs to be fetched. Base64 encodes binary using 64 characters and grows the data by about a third.
When embedding is worth it
For a few kilobytes — an icon, a divider — you save an HTTP request and come out ahead. Past a few tens of kilobytes, the HTML or CSS bloats and loses its own cacheability, which is a net loss. Under 4 KB is a good rule of thumb.
A warning about email
Data-URL images are blocked by Gmail, Outlook and other major clients in HTML email. Use a hosted URL or a CID attachment there instead.
Frequently asked questions
How do I use the output?
In HTML as `<img src="DATA_URL">`, in CSS as `background-image: url("DATA_URL")`. Both snippets are generated on this page ready to copy.
How much bigger does it get?
Base64 writes three bytes as four characters, so about 1.33x the original. A 10 KB image becomes roughly 13.3 KB of text.
Which formats are supported?
Any of them — PNG, JPEG, WebP, GIF, SVG, AVIF, BMP. The bytes are encoded as they are, so the format is irrelevant.
Will a huge image freeze my browser?
A multi-megabyte image produces an enormous string that is slow to display. Embedding is only sensible for small images anyway.
Are my photos uploaded anywhere?
No. Everything the page needs is loaded when you open it, and your photo is processed entirely on your own device. The image never crosses the network, so there is nothing to intercept and nothing stored on a server.