Image to Base64 Encoder

Image Encoded to Base64

{{ formatNumber(outputBase64Raw.length) }} Base64 chars

Data URI is {{ formatNumber(dataUriLength) }} chars · Base64 adds {{ formatPercent(base64OverheadPercent) }} over the binary asset.

{{ outputMimeBadge }} {{ outputDimensionsLabel }} {{ outputSizeLabel }} {{ processingModeLabel }} {{ reuseRecommendation.badgeText }}

Unable to encode this image

Source image:

Accepted: PNG, JPG, WebP, GIF, SVG, or another browser-decodable image; max 5 MB.

PNG, JPG, WebP, GIF, SVG, or another browser-decodable image

Ignored {{ ignoredCount }} extra file(s). This tool processes one image at a time.

Review this payload before shipping it inline

{{ note }}

Optimize before encode:

Render an optimized image before Base64 encoding

Output format:

Quality: {{ qualityPct }}%

Max long edge (px):

JPEG background:

Base64 wrapping:

Data URI MIME override:

Alt text:

Delivery focus:

Snippet width (px):

{{ formatNumber(snippet.charCount) }} chars {{ snippet.fitBadgeText }}

Source asset

{{ sourceMimeBadge }} · {{ sourceDimensionsLabel }} · {{ sourceSizeLabel }}

Encoded asset

{{ outputMimeBadge }} · {{ outputDimensionsLabel }} · {{ outputSizeLabel }}

Context	Fit	Payload guidance	Copy
{{ row.label }} Soft {{ formatNumber(row.softLimit) }} chars · caution {{ formatNumber(row.cautionLimit) }} Focus	{{ row.badgeText }}	{{ row.summary }} {{ row.notes.join(' ') \|\| 'No extra risk flags.' }}

{{ svgInlineAlternativeLead ? svgInlineAlternativeLead.title : 'SVG inline alternative ready' }}

{{ svgInlineAlternativeLead ? svgInlineAlternativeLead.message : 'The original SVG can be shipped as a percent-encoded data URL instead of Base64.' }}

URL-encoded SVG

{{ formatNumber(svgUrlEncodedLength) }} chars

Exact vector source, percent-encoded for data:image/svg+xml,....

Vs SVG Base64

Save {{ formatNumber(svgSavingsVsSourceBase64) }} chars

Longer by {{ formatNumber(Math.abs(svgSavingsVsSourceBase64)) }} chars

Same length

Useful when you want the inline SVG form without Base64 inflation.

{{ deliveryFocusLabel }} fit

When to use this path

Use it when the source is already SVG and you want an inline asset that stays text-based, reviewable, and often shorter than a Base64 SVG. MIME override and Base64 wrapping do not apply here.

{{ formatNumber(snippet.charCount) }} chars {{ snippet.fitBadgeText }}

Variant	Payload	Fit & settings	Apply	Copy
{{ row.label }} Current Recommended	{{ mimeBadge(row.outputActualMime) }} · {{ dimensionLabel(row.width, row.height) }} {{ formatBytes(row.sizeBytes) }} · {{ row.sizeDeltaLabel }} {{ formatNumber(row.dataUriLength) }} chars · {{ row.charDeltaLabel }}	{{ row.recommendation.badgeText }} {{ row.recommendation.guidance }} {{ row.settingsLabel }}

Metric	Value	Copy
{{ row.label }}	{{ row.value }}

Export to PDF Fullscreen

Include query parameters

Embed:

Customize embed code

Include query parameters

Wrap embed in collapsible toggle

Collapse panel by default

Hide card frame (bare iframe)

Loading behavior

Width

Height

Aspect ratio (width : height)

Max height (optional)

Collapsible heading

Collapsible description (optional)

Allow fullscreen

Referrer policy

Sandbox tokens

Base64 turns binary image bytes into ASCII text so an image can be carried inside a data URI, HTML snippet, CSS value, JSON payload, or text file. The tradeoff is size: Base64 commonly expands binary data by about one third before the surrounding data URI or markup is added.

Inline images are useful for small icons, signatures, self-contained examples, and files that must travel with a single document. They are a poor fit for large photos, repeated page assets, and anything that should be cached independently.

Diagram showing image input, optional optimization, Base64 output, data URI, and embed snippets

Image format matters before encoding. PNG preserves transparency, JPEG can reduce photographic payloads but needs a background when transparency is present, and WebP can be compact where the receiving context supports it.

Technical Details:

The encoder accepts one browser-decodable image up to 5 MB. It can encode the original bytes directly or render an optimized output first using canvas resizing and format conversion. The optimized path can cap the long edge, set JPEG or WebP quality, choose PNG, JPEG, or WebP output, and apply a JPEG background color when transparency must be flattened.

Raw Base64 can be unwrapped or wrapped to PEM-style 64 columns, MIME-style 76 columns, or a custom width. Data URI and embed snippets remain single-line because line breaks can break common HTML, CSS, email, and JSON usage.

Transformation Core:

Image Base64 output surfaces
Output	What it contains	Best use
Base64 Payload	Only the encoded characters, optionally wrapped.	APIs, config, or formats that already know the MIME type.
Data URI Payload	`data:` MIME label plus Base64 marker and payload.	Direct use in HTML or CSS attributes.
Embed Snippets	HTML image, CSS background, and email HTML snippets.	Copy-ready inline usage with alt text and width.
Strategy	Candidate optimized outputs and fit warnings.	Choosing a smaller payload before copying.

SVG has a special alternative. For source SVG text, percent-encoded SVG data URLs can sometimes be shorter and more readable than Base64. The SVG alternative panel compares that path with the Base64 result instead of assuming Base64 is always the healthiest inline form.

The processing happens in the browser. Live checks and snippets should still be handled carefully because large inline payloads can bloat HTML, email, logs, local storage, and API bodies.

Everyday Use & Decision Guide:

Start without optimization when you need byte-for-byte Base64 for an existing asset. Turn on Optimize before encode when the receiving context cares more about payload size than preserving the exact original file bytes.

Use PNG for transparency and crisp UI images.
Use JPEG for photos when transparency is not needed.
Use WebP only when the target environment supports it.
Set Delivery focus to HTML, CSS, email, or JSON so the fit guidance matches the intended target.
Add Alt text before copying HTML or email snippets unless the image is decorative.

A successful preview only proves the current browser can display the output. Email clients, older browsers, content-security policies, and API limits can still reject or strip inline images.

Step-by-Step Guide:

Drop, paste, or browse one image in the image input area.
Leave Optimize before encode off for exact encoding, or turn it on and choose format, quality, long-edge limit, and JPEG background.
Choose Base64 wrapping only if the raw payload target expects wrapped text.
Set MIME override, alt text, delivery focus, and snippet width when snippets matter.
Copy from Base64 Payload, Data URI Payload, Embed Snippets, or JSON after checking Encoding Details.

If decoding fails or the file is above 5 MB, use a smaller browser-decodable image before trying again.

Interpreting Results:

The headline Base64 character count is the first size warning. The Data URI length is always longer than raw Base64 because it includes MIME syntax. Fit and Strategy are the right places to judge whether the inline payload is suitable for HTML, CSS, email, or JSON.

Do not assume optimization improved the result until the candidate table confirms output size and dimensions. A PNG conversion can grow photographic content, while JPEG can lose transparency.

Worked Examples:

A 24 KB PNG icon encoded without optimization produces a raw Base64 payload and a data URI that can be copied into a small HTML example. The Preview panel confirms the browser can render the exact output.

A 2 MB photo should usually be resized before inline use. Turning on optimization, selecting JPEG, and setting a 1200 px long edge can cut the Base64 character count substantially, but the Quality setting should be checked visually in Preview.

An SVG logo may show a shorter SVG URL Alternative than the Base64 version. If the target accepts SVG data URLs, copy that alternative instead of the Base64 data URI.

FAQ:

Why is the Base64 output larger than the file?

Base64 stores three bytes as four text characters, so size expansion is normal before any data URI prefix or HTML markup is added.

Does the MIME override change the actual image bytes?

No. It changes the MIME label used in data URIs and snippets. Use it only when you know the target expects that label.

Can I use this for large email images?

Usually avoid that. Many email clients limit, rewrite, or block large inline payloads. Use the fit guidance and test with the actual client.

Glossary:

Base64: A text encoding that represents binary bytes using a 64-character alphabet.
Data URI: A URI that embeds media type and data directly in the value.
Long edge: The larger of image width and height, used for resize limits.