Base64 Toolbox

Encode and decode text, files and images locally with Base64, Base64URL, MIME and Data URI support

Image to Base64

Drop, browse or paste an image. Nothing is uploaded.

Leave empty for original dimensions. GIF and SVG are kept unchanged.

90%

Preview

Your image preview will appear here.

No image selected

Examples

Encode a 1×1 transparent PNG to a Data URI

Input
image: 1×1 transparent PNG (67 bytes)
Output
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGNgAAAAAgABXuWotAAAAABJRU5ErkJggg==

The image grows from 67 bytes to 100 bytes once Base64-encoded (+49.3% overhead), with the standard data:<media-type>;base64,<payload> prefix prepended.

Generate the HTML snippet for the same PNG

Input
data URI: data:image/png;base64,iVBORw0KGgo…g==
alt: logo
Output
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGNgAAAAAgABXuWotAAAAABJRU5ErkJggg==" alt="logo" />

The HTML tab wraps the Data URI in an `<img>` tag and HTML-escapes the alt attribute (&, ", <, > are encoded so the markup stays safe).

Generate the CSS snippet

Input
data URI: data:image/png;base64,iVBORw0KGgo…g==
Output
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGNgAAAAAgABXuWotAAAAABJRU5ErkJggg==");

The CSS tab emits a `background-image` rule; double quotes around the URL match the snippets used by the JS escapeAttribute helper.

About this tool

The Base64 Image Encoder opens the Image workspace of Base64 Toolbox — drag, paste or browse for an image up to 10 MB and the tool returns a Base64 Data URI together with ready-to-paste HTML, CSS, Markdown and JavaScript snippets. The whole pipeline runs locally: nothing is uploaded, and image bytes are never sent off the device.

For raster images (PNG, JPEG, WebP) you can optionally resize the longest edge and adjust JPEG/WebP quality. SVG and GIF files are kept unchanged regardless of those settings so vector fidelity and animation are preserved. The preview panel reports the original and processed sizes, the encoded size overhead as a percentage, and the new dimensions when the image was resized.

The five snippet tabs cover the common cases: a raw Data URI for embedding directly in HTML; an `<img>` tag with the alt text you typed; a `background-image: url(...)` CSS rule; a Markdown `![alt](data:...)` image; and a `const imageDataUri = "…";` JavaScript assignment ready to drop into a module.

How to use

  1. Drop, paste or browse an image

    Use the upload card to drag-and-drop, paste from the clipboard, or pick a file. PNG, JPEG, SVG, WebP and GIF are supported up to 10 MB.

  2. Optionally resize and tune quality

    Set the longest-edge limit (leave empty for the original size) and, for JPEG/WebP, drag the quality slider between 40 and 100%. SVG and GIF bypass these settings.

  3. Set the alt text

    Edit the alt field — the value is used verbatim in the HTML, Markdown and accessibility annotations of the generated snippets.

  4. Copy the snippet you need

    Pick the Data URI, HTML, CSS, Markdown or JavaScript tab and copy the corresponding block, or use Download URI to save the full Data URI to a file.

Use cases

Embedding small icons inline in HTML or CSS

Encode a logo or icon and inline the Data URI in an HTML email or a single-file CSS so the asset travels with the document.

Keeping prototypes self-contained

Skip a separate image request when prototyping — paste the Data URI into a static mockup and the asset renders without any server.

Pasting images into Markdown without uploading

Use the Markdown snippet to embed an image in a README, blog post or issue tracker that supports data: URLs.

Reducing the number of requests in a SPA

Inline tiny UI images (favicons, sprites, button states) to remove extra HTTP round-trips on slow connections.

Common mistakes

Mistake:Inlining very large images (>100 KB) as Data URIs.

Fix:Data URIs cost roughly +33% over the binary and block HTML parsing while decoding. Use them only for icons and small UI graphics; serve larger assets as separate files.

Mistake:Expecting GIF animation or SVG fidelity to survive a forced resize.

Fix:The tool refuses to resize SVG and GIF files — vector paths and frame timing would be destroyed. Pass them through unchanged or resize manually with a vector tool.

Mistake:Forgetting to update the alt text.

Fix:The alt field defaults to the file name minus its extension. Replace it with a meaningful description before copying the HTML or Markdown snippet so screen readers announce useful content.

Mistake:Treating the Data URI as encrypted.

Fix:Base64 is an encoding, not encryption — anyone can decode it back to the original image bytes. Do not use it to hide sensitive assets.

Frequently asked questions

Related guides

Base64 Encoding Explained: What It Is and When to Use It

What Base64 actually does, why it exists, and when you should (and shouldn't) use it — covering the alphabet, padding, Base64URL, Data URIs, and common mistakes.

References & standards

Related tools

Aspect Ratio Calculator

Calculate dimensions and ratios for images and videos.

Barcode Generator

Generate barcodes in 8 formats (CODE128, EAN13, UPC, and more) — configure line width, height, and text display, then download as SVG or PNG.

Border Radius Generator

Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.

CSS Grid Generator

Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.

Cubic Bezier / Easing Generator

Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.

Dummy Avatar Generator

Generate unique SVG avatars for mockups and placeholders using various illustration styles