Image to Base64: Embed Pictures Directly in Your Code
Every image on a web page is normally a separate file the browser must request, wait for and download. For a photo gallery that is fine, but for a tiny logo, an icon or a one-off graphic, each request adds overhead that can exceed the image itself. Embedding the image directly in your HTML or CSS as base64 text removes those requests entirely.
The image to base64 converter turns any image into encoded text with one click, offering four output styles: raw base64, a data URI, a CSS background-image snippet and a ready-made HTML img tag, plus a live preview and byte-size readout so you can verify before copying. Keep icons small first with the SVG optimizer or the image converter, then embed the leanest version.
What is base64 encoding and how does it work?
Base64 is a text encoding of the image's binary data, which lets the picture live inside HTML, CSS or JSON instead of as a separate file. The browser decodes it back into the image at load time. The trade is a roughly 33 percent size increase, which pays off for small icons and logos by eliminating extra HTTP requests.
Base64 is a way of representing binary data, like the bytes of a PNG file, using only plain text characters: letters, numbers, plus and slash. Because it is plain text, the encoded image can live anywhere text can live: inside an HTML attribute, inside a CSS file, inside a JSON config, even inside a database field. The browser decodes it back into the original image when the page loads.
The cost is size. Base64 inflates data by roughly a third, so a 30 KB icon becomes about 40 KB of text. That sounds bad until you compare it with the alternative: a separate HTTP request with its own connection overhead, headers and latency. For a small icon on a critical page, one slightly larger inline string usually beats one extra round trip to the server. For a 2 MB hero photo, it never does. On HTTP/2 and HTTP/3 the overhead per request is smaller than it once was, but for above-the-fold critical images every eliminated request still speeds up first paint.
Which output format should I choose: data URI, CSS or raw?
Use raw base64 when an API or config expects just the encoded data. Use the data URI in img src attributes and CSS url() values. Use the CSS background-image snippet for stylesheets, and the ready-made HTML img tag for quick pasting. The live preview renders the data URI so you can verify it works before copying.
The raw string is just the encoded characters, useful when an API field, a database column or a config value expects the image data alone. The data URI wraps that string with a prefix like data:image/png;base64, which tells the browser the format and encoding; this is the version you paste into an img src or a CSS url(). The CSS snippet gives you a complete background-image declaration, and the HTML option hands you a finished img tag.
The live preview is the part that saves you from mistakes. It renders the data URI exactly as a browser would, so a truncated copy or a wrong MIME type shows up immediately instead of breaking your page in production. The byte-size readout, original versus output, also tells you at a glance whether the 33 percent inflation is acceptable for your use case. The converter shows the output length in characters so you can sanity-check size before pasting a huge string into your stylesheet.
When should I use base64, and when should I avoid it?
Embed small graphics: logos, icons, favicons, tiny patterns and email signature images. These benefit because each one would otherwise cost a full HTTP request. Do not embed large photos: the 33 percent inflation plus the loss of separate browser caching makes big images dramatically slower as base64.
The sweet spot is small, frequently-needed graphics: site logos, favicons, UI icons, tiny repeating patterns and email signature images. These are often requested on every page load, so folding them into the HTML or CSS removes a request from the critical path. Single-file HTML documents, like exported reports or offline demos, are another perfect fit, since the images travel inside the file itself. Favicons are a textbook case: a tiny icon inlined as a data URI loads together with the HTML itself.
The anti-pattern is embedding large photos. A 3 MB photograph becomes 4 MB of text inside your HTML, which blocks parsing, cannot be cached separately by the browser and bloats every page view. Keep photos as files, ideally converted to WebP first. As a rule of thumb: if the encoded string is longer than a few paragraphs of text, the image is probably too big to embed.
How to convert an image to base64 in 4 steps
- Upload your image. Drop any image onto the converter. The original byte size appears instantly.
- Convert with one click. The tool encodes the file and shows the output length so you can judge the size cost.
- Choose your output style. Copy raw base64, a data URI, a CSS background-image snippet or a complete HTML img tag.
- Verify in the preview. The live preview renders the data URI exactly as a browser would, so confirm it looks right before pasting into your code.
6 practical tips for using base64 images
- Optimize before encoding. Shrink and compress the image first, the SVG optimizer for vectors or the compress image tool for rasters, so the 33 percent inflation applies to the smallest possible file.
- Prefer SVG for icons. Vector icons are usually a few kilobytes, making them ideal base64 candidates; a tiny SVG data URI is often shorter than the equivalent PNG.
- Keep photos as files. Large photographs should stay as separate, cacheable files. Convert them to WebP with the image converter instead of embedding them.
- Use CSS snippets for backgrounds. The ready-made background-image declaration drops straight into a stylesheet for patterns, textures and decorative graphics.
- Mind the MIME type. A data URI for a PNG must start with data:image/png;base64 and a JPEG with data:image/jpeg;base64. The tool generates this correctly, so do not hand-edit it.
- Test email clients. Most modern clients render data URIs, but a few older ones block them. If your signature must work everywhere, test before you send.
Frequently asked questions
Does base64 make the image bigger?
About 33 percent larger. Base64 encodes every 3 bytes of binary data as 4 text characters, so a 30 KB icon becomes roughly 40 KB of text. For small images the saving in HTTP requests is worth it; for large photos it is not.
Which images should I embed as base64?
Small images only: icons, logos, tiny patterns and single-use graphics under a few dozen kilobytes. Large photos become enormous strings that slow parsing and cannot be cached separately, so keep those as regular files.
Should I use a data URI or raw base64?
It depends on the context. Use data URIs inside src attributes and CSS url() values, raw base64 when an API or config field expects just the encoded string, and the ready-made img tag when pasting into HTML.
Do data URIs work in email signatures?
Mostly yes. Data URIs work in all modern browsers, in CSS, in HTML and in many email clients. Very old email clients may block them, so test your signature in the clients your recipients use.
Is my image uploaded during conversion?
No. The conversion runs in your browser with the FileReader API. Your image is read locally on your device and never uploaded to any server, stored or shared with anyone.
Ready to try it yourself? It's free, no signup required.
Try the free Image to Base64 Converter →