Image to Base64

Validate an image and export its original bytes as Base64, a data URI, HTML or CSS.

Turn a picture into an embeddable snippet

Still PNG, JPEG or WebP · 10 MiB · 12 million pixels · 8,192 pixels per side. Original bytes and metadata are preserved.

Choose an image or drop it here

Image processing stays in this browser; this tool does not upload the image. Page assets and anonymous usage events may still use the network. SVG and animated images are unsupported.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Validate a local still PNG, JPEG or WebP and create a data URL, raw Base64, HTML image or CSS background snippet from its original bytes.

How to use it

1Choose a still PNG, JPEG or WebP up to 10 MiB and 12 million pixels.
2Check its preview, verified MIME type, dimensions and encoding overhead.
3Select data URL, raw Base64, HTML or CSS output.
4Copy the complete snippet or download it as a plain-text file.

Example

Input: Built-in 1 × 1 PNG, 91 bytes
Output: 124 Base64 characters or a 146-character data URL

No recompression: original bytes and embedded metadata are retained.

What happens to your data

Selected image contents stay in this browser and are not uploaded or saved in browser storage by this tool. Assets and anonymous usage events may still use the network. Copied snippets retain image metadata.

Last updated October 2026

Encode a local PNG, JPEG or WebP as a data URL, raw Base64, an HTML image element or a CSS background-image declaration. The image preview, verified format, dimensions and exact byte count let you check what will be embedded before copying the snippet.

This tool is for small image assets and debugging an application that needs an inline image. Base64 increases the payload length to four characters for each group of up to three bytes. A normal image URL is often more practical for larger or reused assets because an inline value makes the containing HTML or CSS larger.

How it works

Choose a local file or drop it onto the picker. The tool reads its bytes, checks the PNG, JPEG or WebP signature and header dimensions, then requires the browser to decode the image successfully. A filename extension or file-picker MIME label alone is not enough. If the label disagrees with the detected format, the output uses the detected format and displays a warning.

Inputs must be non-empty and no larger than 10 MiB, 12 million pixels or 8,192 pixels on either side. Header dimensions are checked before decode and decoded dimensions are checked again. Still PNG, JPEG and WebP are supported; SVG, GIF, HEIC, animated PNG and animated WebP are not. A recognizable header can still belong to a corrupt file, so successful header detection does not by itself produce a result.

Data URL output includes data:image/png;base64, or the corresponding verified MIME type. Raw Base64 omits that prefix. The HTML option includes width and height from the browser-decoded image and an empty alt attribute; replace the empty alt with meaningful text for an informative image. CSS output is a background-image declaration that can be placed inside a CSS rule. Snippets are displayed as text. No HTML or CSS is executed by this tool.

The original image bytes are encoded without resizing, recompression or metadata removal. Transparency and embedded metadata therefore remain in the output. Dimensions describe the browser-decoded orientation, which can differ from raw JPEG header dimensions when EXIF rotation is present. The Base64 size comparison excludes the data URL prefix and snippet markup. The built-in 1 × 1 PNG example contains 91 bytes and produces 124 Base64 characters; the data URL has 146 characters.

Replacing the image clears the previous result immediately. Cancel or Clear prevents an unfinished read or decode from becoming the displayed result, although work already started by the browser may finish internally. At most the first 40,000 output characters appear in the preview; copying or downloading includes the full snippet. Downloads are plain .txt files. Selected image contents are not uploaded or stored in browser storage by this tool. Page assets and anonymous usage events may still make network requests. Treat a copied or downloaded snippet like the original image, including any embedded metadata.

Worked example: encode the built-in one-pixel image

Input: Built-in 1 × 1 red PNG, 91 bytes
Result: 124 raw Base64 characters; 146-character PNG data URL

The same original PNG bytes are included in every output format; snippet markup adds its own characters.

Common use cases

Embedding a small image in an HTML prototype
Creating a CSS background-image data URL for a small asset
Preparing a known image payload for an API test
Checking image dimensions and encoding overhead before embedding

Frequently asked questions

How do I convert an image to a Base64 data URL?＋

Choose a PNG, JPEG or WebP and wait for validation. Keep Data URL selected, then copy the complete snippet. It includes the verified image MIME type, the ;base64 marker and the encoded bytes.

What is the difference between raw Base64 and a data URL?＋

Raw Base64 contains only encoded bytes. A data URL adds a prefix such as data:image/png;base64, so an HTML image or CSS background can identify and decode the value. Some APIs want only the raw portion; check the API's expected format.

Does converting an image to Base64 reduce its quality?＋

No. Encoding preserves the original file bytes exactly. It does not redraw or recompress the image. It also preserves embedded metadata, so this is not a metadata removal tool.

Why is Base64 larger than the original image?＋

Three bytes need four Base64 characters, with padding for an incomplete final group. The exact padded length is 4 × ceil(original bytes ÷ 3). A data URL prefix, HTML attributes or CSS syntax add more characters.

Can I use SVG, GIF or an animated image?＋

This page accepts still PNG, JPEG and WebP only. It rejects SVG, GIF and detected PNG/WebP animation. Export a still raster image first if you need to use these snippets.

Why is an image with a .png extension rejected?＋

The actual bytes may not be PNG, the file may be incomplete, its dimensions may exceed the limits, or the browser may be unable to decode it. Renaming a file does not convert its format.