When is embedding an image worth it?

For assets under a few kilobytes — small icons, patterns, placeholders — where saving an HTTP request outweighs the size penalty. Above roughly 5-10KB, a normal cacheable file almost always performs better.

Why does the encoded string get so long?

Base64 adds about 33% overhead, and images are already compressed binary. A 100KB image becomes roughly 133KB of text, which is why large embedded images hurt page weight badly.

Do embedded images get cached?

Not independently. They are part of the HTML or CSS file, so they are re-downloaded whenever that file changes and cannot be cached separately or served from a CDN edge on their own.

Is my image uploaded to a server?

No. The file is read directly in your browser using the File API and encoded locally, so it never leaves your device.

Encode & Decode

Base64 Image Encoder

Converts an image into a Base64 data URI that can be embedded directly in HTML or CSS, removing the need for a separate file request. The image is read and encoded in your browser — it is never uploaded anywhere.

Free, no signupRuns entirely in your browser

Input

MIME Type Class

Source Code / Text

Result

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcng9IjE1IiBmaWxsPSIjZWY0NDQ0IiAvPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjMwIiBmaWxsPSJ3aGl0ZSIgLz4KICA8dGV4dCB4PSI1MCIgeT0iNTUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiNlZjQ0NDQiPlZJQkU8L3RleHQ+Cjwvc3ZnPg==

About

What the Base64 Image Encoder does

Use this sparingly and only for small assets. Base64 inflates the data by about a third, and an embedded image cannot be cached independently of the file containing it, so a large embedded image is downloaded again with every page load. Icons and tiny placeholders are good candidates; photographs are not.

How it works

Using the Base64 Image Encoder

1Select an image file from your device.
2The file is read locally as binary data.
3The bytes are encoded as Base64.
4A data URI is assembled with the correct MIME type prefix.
5Copy the result into your HTML src or CSS url().

Use cases

What people use it for

Embedding a small icon in CSS to save a request
Inlining a logo in an HTML email
Creating a self-contained HTML file with no external assets
Adding a tiny blurred placeholder for progressive image loading

FAQ

Frequently asked questions

6 related

Related tools

All tools →

Encode & Decode

Base64 Converter

Convert text or files to/from Base64 encoding.

Runs in your browser

Encode & Decode

URL Encoder / Decoder

Encode strings into URL-safe formats or decode percent-encoded URLs.

Runs in your browser

Encode & Decode

HTML Entity Encoder / Decoder

Encode characters into HTML entities (e.g. <) to prevent rendering bugs.

Runs in your browser

Encode & Decode

JWT Decoder

Inspect Header, Payload, and signature of a JSON Web Token locally.

Runs in your browser

Encode & Decode

Morse Code Converter

Encode text to Morse code signals or decode Morse signals to text.

Runs in your browser

Encode & Decode

Caesar Cipher

Encrypt or decrypt strings using simple modular alphabet shifting.

Runs in your browser