Skip to content

Image to Base64

Convert any image into a Base64 data URI, CSS background or ready-made HTML tag.

Private Instant No sign-up No daily limit

Free to use. No account, no daily limit, and no watermark on the result.

 Turn an image into Base64

Data URI · CSS · HTML
Drop an image here, or click to choose a file Any format — the bytes stay in your browser and are never uploaded

No image yet. Add one and you get a ready-to-paste data URI, CSS rule and HTML tag.

Preview

Uploaded image preview

—

Data URI length
—
Decoded size
—
Image pixels
—
Base64 overhead
—

Raw data URI

—

CSS background-image

—

HTML img tag

—

CSS background-color fallback

—
Keep the payload small. Base64 makes a file roughly 33% larger than the original, and most browsers cap a data URI at a few megabytes. For big images an ordinary file URL is faster to load.
Waiting for an image…

How to convert an image to Base64

1

Upload the image

Drop a picture into the upload zone or click it to browse. The file is read with the browser File API and never leaves your device.

2

Pick the output format

Use the tabs to switch between the raw data URI, a CSS background-image rule, a ready-made HTML img tag or a background-colour fallback.

3

Add alt text

Type a short description so the generated HTML tag stays accessible for screen readers.

4

Copy or download

Hit the Copy button on any tab, or download all four variants as a single .txt file for your code editor.

Image to Base64 converter — frequently asked questions

A data URI embeds a file directly inside a URL using the data:[media-type];base64,[payload] format. Because the whole payload travels inside the link, you can ship an image inside an HTML document, a CSS file or a JSON payload without any extra request.

Base64 encodes every three bytes into four characters, so the encoded payload is about 33% bigger than the raw file. The tool shows the exact character count, the decoded byte size and the overhead so you can decide whether embedding is worth it.

A CSS background is the better choice for decorative images, sprite-like icons and placeholder art, because you can control the repeat, position and size without adding markup. Use an HTML img tag for meaningful content, because it supports the alt attribute and modern screen readers.

Most browsers and email clients start to struggle with data URIs above roughly 2 MB, and some servers cap request or header sizes. Keep embedded images small, or host the file and reference it with a normal URL when the picture is large.

Related Image Tools

Image Compressor

Compress JPG, PNG and WEBP images with a custom quality slider and instant size comparison.

Open tool

Image Resizer & Scaler

Resize images by pixel dimensions or percentage, with ready-made social media ratios.

Open tool

Image Format Converter

Convert photos between PNG, JPG, WEBP and BMP formats without losing quality.

Open tool

Passport Photo Maker

Create compliant 2x2 in and 35x45 mm passport photos with custom backgrounds and print grids.

Open tool

Image Cropper & Rotate

Crop, rotate, flip and adjust the brightness of any picture.

Open tool

Image to Base64

Convert any image into a Base64 data URI, CSS background or ready-made HTML tag.

Open tool