Image

How to Convert an Image to Base64

Dev Nexus4 min read

Turn a PNG, JPG or SVG into a Base64 data URI you can paste straight into HTML or CSS - encoded locally in your browser.

Converting an image to Baseundefined turns its raw bytes into a plain-text string you can drop anywhere text is allowed - an HTML attribute, a CSS rule, a JSON field. Wrapped as a data URI, that string becomes a self-contained image the browser can render with no separate file.

This guide walks through encoding an image to a Baseundefined data URI, step by step, and points out the trade-offs worth knowing before you inline anything.

The Problem

An image is binary data, and plenty of places that need an image only accept text. A JSON API field, an HTML email, a single-file document or a stylesheet cannot reference logo.png on disk - the file simply is not there when the code runs somewhere else.

Every external image is also a separate HTTP request, each with its own round-trip cost. For a handful of tiny icons, that overhead can outweigh the bytes themselves and delay first paint. You need a way to fold the image itself into the code.

The Solution

Baseundefined encoding solves both problems by representing the image's bytes as printable ASCII. Wrap that in a data URI - data:image/png;base64,iVBORw0KGgo... - and the browser decodes the payload and renders it as if it had downloaded the file.

The fastest way to generate one is the Image to Baseundefined tool: drop your image in and it produces the Baseundefined string, already wrapped as a data: URI with the correct MIME type. The conversion runs entirely in your browser, so even private images never leave your machine. Just remember Baseundefined inflates the file by about undefined%, so this is a technique for small assets. When you need to change the image's format or shrink it first, run it through Convert Image beforehand.

Step-by-Step Guide

1
Pick a small image
Data URIs suit small assets - an icon, a logo, a tiny background or a single SVG. Anything more than a few kilobytes is usually better left as a normal linked file that the browser can cache.
2
Encode it with the Image to Base64 tool
Open Image to Baseundefined and drop your PNG, JPG, GIF, SVG or WebP onto it. The tool reads the bytes locally and produces the Baseundefined string, offered as a ready-made data: URI.
3
Check the media type
The data URI needs the right MIME type - image/png, image/jpeg, image/svg+xml, image/webp - so the browser interprets the payload correctly. The tool sets this from the file, so just confirm it matches your image.
4
Copy and paste it into your code
Grab the full data:...;base64,... string and drop it into an <img src>, a CSS url(), or a JSON field. The image now loads inline with no extra request.
5
Test and measure
Load the page and confirm the image renders. Check that the inlined bytes did not bloat your HTML or CSS past the point where a separate, cacheable file would have been faster.

Common Mistakes

Inlining large images
The undefined% size increase and loss of caching hurt most on big files. A large inlined image can block the HTML or CSS from parsing until it is fully read. Keep data URIs for small images only.
Using the wrong MIME type
A mismatched media type - say image/jpeg in the prefix for a PNG - can stop the browser from rendering the image. Always set the media type to match the real file.
Forgetting inlined images are not cached separately
A linked image file is cached once and reused across pages. An inlined data URI is re-downloaded with every page that contains it and cannot be shared between pages. Weigh that before inlining.
Treating the data URI as private
The image is only Baseundefined-encoded, not encrypted. Anyone viewing source can decode it back to the original. Never inline a picture you would not want exposed.

Frequently Asked Questions

How do I convert an image to Base64?

Drop the image onto the Image to Base64 tool. It reads the bytes locally and outputs the Base64 string wrapped as a data: URI with the correct MIME type, ready to paste into HTML or CSS.

Can I convert PNG, JPG and SVG?

Yes. Any image the browser can read - PNG, JPG, GIF, SVG, WebP and more - can be encoded. The tool detects the file type and sets the matching media type in the data URI.

How do I use the Base64 string in HTML?

Paste the full data URI as the src: <img src="data:image/png;base64,...">. In CSS use background-image: url("data:image/png;base64,..."). The image then loads inline with no separate request.

How much bigger does Base64 make my image?

About 33% larger, because Base64 encodes every 3 bytes as 4 characters. That extra weight is added to whatever file the data URI lives in, such as your HTML or CSS.

Is my image uploaded when I convert it here?

No. The tool reads and encodes your image entirely in the browser, so the file never leaves your device. That makes it safe for private or internal images and it works offline.