Base64 turns an image's bytes into text so it can sit inside HTML or CSS as a data URI, for example src="data:image/png;base64,...". The text is about a third larger than the file. Drop an image below to get the data URI, ready-made img and CSS snippets, and advice on whether inlining it is worth it.
| Image | Inline it? | Why |
|---|---|---|
| Icon under 4 kB | Usually yes | Saves a request at little cost |
| SVG logo or icon | Yes, URL-encoded | Smaller than Base64 and still readable |
| Above-the-fold image, 4 to 20 kB | Sometimes | Only if it appears on one page |
| Photo or anything over 20 kB | No | Bloats every load and cannot be cached alone |
Updated
Drop one image or several. Each gets its Base64 data URI and, for SVG files, a URL-encoded version that is usually smaller. Copy any of them as an img tag, a CSS background or a JSON value. Files never leave your device.
A data URI has three parts: the data: scheme, the media type such as image/png, and the content. For binary images the content is Base64 and the type is followed by ;base64. For text formats like SVG, the content can be the markup itself with a handful of characters percent-encoded.
Browsers treat a data URI like any other image source. It decodes in memory, so there is no extra request, but there is also no separate cache entry: the image is downloaded again every time the page or stylesheet holding it is.
For anything bigger than an icon, a normal file served over HTTP/2 or HTTP/3 is almost always faster. Several requests share one connection, the image is cached on its own, and the browser can load it lazily or at the right size with srcset.
Inlining still earns its place for tiny icons in a single component, for placeholders shown while a real image loads, and for self-contained HTML files such as reports or offline demos.
Base64 uses four text characters for every three bytes, so the output is about 33% larger, plus a few bytes of padding and the data: prefix. Gzip or Brotli compression on the page claws some of that back, but rarely all of it.
Usually not. SVG is already text, so it can go in a data URI with only a few characters escaped. That version is typically smaller than Base64 and stays readable. Use Base64 only if a tool you are pasting into rejects the URL-encoded form.
Support is patchy. Several major email clients block or strip data URI images, so for newsletters host the image and link to it, or attach it with a content ID.
Current browsers accept very long data URIs in img tags and CSS, far beyond any sensible image. The practical limit is performance: large inline images slow down the file that contains them. Some older tools and email clients do cut them off.
Related: Base64 text encoder and decoder, Image compressor, SVG viewer and editor, File size converter, HTML images guide.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.