Open menu

Image to Base64 Converter

Choose an image to turn it into a data URI you can embed directly in HTML, CSS or Markdown without a separate file. Copy the raw data URI, a CSS background rule with the right dimensions, an HTML img tag with width, height and alt text, or Markdown. SVG files can be URL-encoded instead of Base64, which is usually smaller. A size check tells you whether inlining is a good idea, since large data URIs slow pages down. Your image is read in the browser and never uploaded.

Input

or drop it here. It stays on your device.

Output

Copy as

Choose an image, or use the sample, to get its data URI.

Data URI

Runs entirely in your browser. Nothing you paste or open here is uploaded or stored.

How to use the image to Base64 converter

  1. Choose an image or drop it on the box: PNG, JPEG, WebP, GIF, AVIF or SVG, up to 8 MB.
  2. Check the preview, file size and dimensions.
  3. Write alt text that describes the image (it’s used in the HTML and Markdown snippets).
  4. Pick the output: data URI, CSS background, HTML <img> or Markdown.
  5. For SVG files, choose URL-encoded (smaller) or Base64.
  6. Copy the snippet into your code.

Use a sample image loads a small generated picture, so you can see each output format before choosing your own image.

How data URIs work

A data URI packs a file into a URL: data: + the media type + ;base64, + the encoded bytes, for example data:image/png;base64,iVBORw0KGgo…. Browsers decode it in place, so the image appears without a request to the server. The file is read with the browser’s FileReader API. No upload happens, so it works offline and with private images.

The snippets add what each context needs:

  • CSS: background-image: url("…") with background-size: contain and the image’s width and height.
  • HTML: <img> with width and height attributes, which reserve space and prevent layout shift, plus your alt text.
  • Markdown: ![alt](data:…), supported by most Markdown renderers.

Worked examples

Example 1: a tiny icon in CSS

A 16 × 16 PNG icon of 300 bytes becomes a data URI of about 420 characters. The check is green: inlining saves a request and costs almost nothing. Paste the CSS snippet into your stylesheet.

Choose an SVG logo of 2 KB. URL-encoded, the data URI is around 2.2 KB, whereas Base64 would be about 2.7 KB. For logos used on every page, a separate cached file is still usually the better choice.

Example 3: a photo (don’t inline it)

A 180 KB JPEG becomes about 240 KB of text. The check turns red. Inlining it would delay rendering of the whole HTML or CSS file. Serve it as a normal image with loading="lazy" instead.

Performance guidance

  • Under 4 KB: inline freely.
  • 4–20 KB: inline only if the image is critical and always visible immediately.
  • Over 20 KB: use a normal file, optimised (WebP or AVIF) and cached.

Remember that data URIs in CSS are downloaded even if the rule never applies, and they’re re-downloaded whenever the stylesheet changes.

Common mistakes

  • Inlining large images, which makes HTML and CSS slower to load and parse.
  • Missing dimensions, which causes layout shift when the image renders.
  • No alt text on meaningful images.
  • Base64-encoding SVGs when URL-encoding would be smaller.

Frequently asked questions

When is a data URI a good idea?

For very small images, roughly under 4 KB, such as tiny icons, simple backgrounds or placeholders. Inlining saves an HTTP request. For anything larger, a normal image file is better because it can be cached separately and loaded lazily.

Why is the Base64 version bigger than my file?

Base64 represents every 3 bytes with 4 characters, so it's about 33% larger, plus the data: prefix. Gzip on your server recovers part of that, but not all.

Should I encode SVGs as Base64?

Usually not. SVG is text, so it can be URL-encoded with only a few characters escaped. That's typically smaller than Base64 and still works in CSS and HTML.

Do data URI images need alt text?

Yes, exactly like any other image. Describe the image in the alt attribute, or use alt="" if it's purely decorative so screen readers skip it.

Which image formats are supported?

Any image your browser can open, including PNG, JPEG, GIF, WebP, AVIF and SVG. The data URI keeps the original format and MIME type.

Sources