Image to Base64

Convert small images into base64 strings or data URIs instantly in your browser

Related Tags

image

base64

encoder

Image to Base64 Converter

Convert JPG, PNG, GIF, BMP or ICO images under 300KB to base64 strings or data URIs. Preview and copy the output directly in your browser.

Drop an image here

or click to browse

Limit: 300KB

Supported Formats

JPG, JPEG, PNG, GIF, BMP, ICO

Only files under 300KB are allowed.

Tips

Compress larger files before converting to stay within the 300KB limit.
All encoding happens locally in your browser.
Use data URIs in HTML/CSS and raw base64 for APIs or JSON payloads.

Image Preview

No image selected yet

Select a supported image under 300KB to preview and encode.

Raw Base64

Length: 0 characters

Data URI

Length: 0 characters

Encode a small image for text-based use

Choose or drop one JPG/JPEG, PNG, GIF, BMP, or ICO file to obtain raw Base64 and a complete data URI. The image stays in your browser. The current input limit is 300 KiB (300 × 1024 bytes); files above that limit are rejected. This encoder does not resize or compress the file.

Two outputs, two uses

Output	Structure	Typical destination
Raw Base64	Encoded file bytes only	An API field that explicitly expects Base64
Data URI	`data:image/png;base64,` followed by the encoded bytes	An HTML image source or CSS URL

Both outputs represent the same original bytes. Use the format expected by the receiving system: a data URI prefix can cause an error when an API expects only the payload.

Steps

Choose a supported image or drag it onto the upload area.
Inspect the preview, file size, MIME type, and dimensions.
Copy either Raw Base64 or Data URI using the button for that output.
Paste into the destination and verify it there. Clear the tool before switching tasks if you no longer need the current result.

Only one file is processed at a time. Replacing the file replaces the current outputs. A valid file extension alone does not ensure that the browser can preview its content.

Using a data URI in HTML or CSS

After copying a complete data URI, use it as the value below. The placeholder is explanatory and must be replaced, including the angle brackets:

<img src="<paste the complete data URI here>" alt="Status icon" />

.status-icon {
  background-image: url('<paste the complete data URI here>');
}

For JSON APIs, place the copied text inside a JSON string according to the API contract. Encoding does not replace authentication, validation, or a server's own upload limits.

Size, caching, and metadata

Base64 length is 4 × ceil(file bytes / 3) characters, before the data URI prefix. A 300-byte file therefore produces 400 Base64 characters. The increase approaches one third for larger files, so encoding should not be described as compression.

Embedding many or large images can enlarge HTML/CSS and ties those bytes to the containing resource's cache lifecycle. External image files can be cached separately. Choose based on your delivery needs rather than assuming every small image should be inline.

The original file bytes, including any embedded metadata, remain encoded. This tool is not a metadata remover. A locally generated string can still disclose its image content when you share it elsewhere.

If a file is over the limit, use the image compressor first and inspect the new format. If an output will not display, check that you copied the full string and selected the correct output type. Browser or destination restrictions may also block data URIs. Use Base64 to image to decode and verify an existing payload.