Convert an Image to Base64

Image to Base64: how it works

Base64 is a text encoding that represents an image's raw binary bytes using only 64 printable ASCII characters (A–Z, a–z, 0–9, + and /), so the file can travel safely through text-only places like source code, JSON, or email.

Data URI shape

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…

Size impact

Base64 turns every 3 bytes into 4 characters, so the encoded text is about 133% of the original file — a roughly one-third (~33%) size increase, before the short data:…;base64, prefix is added.

When inlining as Base64 makes sense

• You want to inline a small icon, logo, or sprite directly in a CSS or HTML file so the browser makes no extra HTTP request for it.
• You need the image to live inside a single text artifact — a JSON or YAML payload, an HTML email, a config file, or a copy-paste snippet.
• An API or webhook expects image data as a string field rather than a separate file upload.

When a normal file or URL is better

• The image is large (a photo or hero image): the ~33% overhead bloats your HTML/CSS and the bytes are parsed on every page load.
• The image is reused across many pages: a normal file URL is cached once by the browser, while an inlined copy is re-downloaded inside every file that embeds it.
• The asset changes often: editing an inlined Base64 blob means redeploying the whole file that contains it.

Practical tip

A widely used rule of thumb is to inline only assets under ~1–2 KB; above that, a cached external file usually loads faster than the inlined, un-cacheable Base64 version.