Search DevTools

Jump to any tool or page

Image to Base64

Encode any image to a Base64 data URI, raw payload, CSS background, HTML tag, or Markdown — entirely in your browser.

Source

Encoded

Choose or drop an image and its Base64 encoding appears here.

About Base64 image encoding

Base64 rewrites arbitrary binary data using only 64 printable ASCII characters (A–Z, a–z, 0–9, + and /). It reads the file three bytes at a time — 24 bits — and splits them into four 6-bit groups, each mapped to one character. Three bytes in, four characters out, so the payload always grows by exactly one third. When the file length is not a multiple of three, the final group is padded with = so the output stays a multiple of four. A data URI adds a little more on top: the data:image/png;base64, prefix.

When inlining is worth it

  • Tiny assets — icons, spinners, 1×1 spacers, gradient stops — where the HTTP request costs more than the bytes.
  • Critical above-the-fold CSS that must paint without a second round trip.
  • Single-file deliverables: email templates, exported reports, offline HTML, embedded documentation.
  • JSON or database columns where a binary blob would be awkward to carry.

When it hurts

  • A data URI is not a separate cacheable resource. It is re-downloaded with every copy of the HTML or CSS that contains it, and it cannot be served from a CDN edge on its own.
  • Inlined bytes sit in the parse path. Large data URIs in a stylesheet delay first paint because the whole file must be parsed before any rule applies.
  • Compression helps less than you would hope: gzip and Brotli work poorly on already-compressed image data expanded into ASCII.
  • Photographs and anything over a few kilobytes are almost always better as a normal cached request over HTTP/2 or HTTP/3.

SVG is a special case. It is already text, so Base64 buys nothing and costs 33%. Paste the markup straight into the document, or percent-encode it for CSS with url("data:image/svg+xml,..."). URL-encoding usually produces a shorter string than Base64 and stays readable and diff-friendly.

Base64 is encoding, not encryption. Anyone can decode it in one line. Never use it to hide credentials, tokens, or private imagery — it only makes bytes safe to travel through text-only channels.

Visual Creation

About Image to Base64

Encode an image into a Base64 data URI and copy it in the form you actually need: raw payload, CSS background rule, HTML img tag, or Markdown. The tool reports the encoded size next to the original so the roughly one third overhead is visible before you paste a large string into a stylesheet.

Related Visual Creation tools

Resume BuilderChart GeneratorSVG AnimatorIndian MapColor Palette

Frequently asked questions

Why is the Base64 string larger than the file?
Because Base64 represents every three bytes as four ASCII characters, a fixed increase of about 33 percent, plus padding and the data URI prefix. A 90 KB image becomes roughly 120 KB of text. This is inherent to the encoding: it exists to move binary data safely through channels that only handle text, and it trades size for that safety. Nothing can compress it back without changing the image itself.
When is inlining an image actually worth it?
For very small, always-needed assets where avoiding a request matters more than the size penalty, such as an icon in critical CSS or a tiny placeholder in an email template. Above a few kilobytes the arithmetic turns against you. On HTTP/2 and HTTP/3 the cost of an additional request is far lower than it was under HTTP/1.1, which removed most of the original justification for inlining.
Why can inlining make a page slower?
Because a data URI is part of the document that contains it, so it cannot be cached independently. An inlined image in a stylesheet is re-downloaded whenever that stylesheet changes, and it inflates a file that is render blocking. A separate image file is cached on its own schedule, can be lazy loaded, and does not delay first paint. Inlining several images into one CSS file is a common cause of a slow first render.
What is the best way to inline an SVG?
Usually not Base64. SVG is text already, so Base64 adds a third to its size for nothing. In CSS, percent-encoding the markup directly in a url() is smaller and stays human readable. In HTML, pasting the svg element inline is better still, since it can then be styled with CSS and scripted, which a data URI cannot. Base64 for SVG is only worth it when a consumer refuses to accept anything else.
Does Base64 protect the image in any way?
No. Base64 is an encoding, not encryption, and anyone can decode it with a single function call. An image inlined into a page is exactly as visible and extractable as one served from a URL, and the metadata inside the file, including any EXIF location data on a photograph, travels with it. Strip metadata before encoding if the image is sensitive.