Image Base64

Base64 encoding turns an image into a plain text string that can be embedded directly inside HTML, CSS, or JSON — no separate file request needed. Drop in an image and this tool outputs the ready-to-use Base64 string, along with a formatted `data:` URI you can paste straight into a `src` or `background-image` property. Also works in reverse: paste a Base64 string in and preview the decoded image. Useful for inlining small icons, avoiding extra HTTP requests, or embedding images in email templates where external images get blocked.

Select Image
OR ENTER URL
Image Preview
Preview
Dimensions:
File Size:
Base64 Length:
No image loaded yet
Upload an image file or insert a remote image URL to generate Base64 code.
Base64 Data URI
HTML <img> Source
CSS Background Property

Image to Base64 Examples

Click a card to load the image and its ready-made options.

Click to load

Encode an Illustration

Convert a WebP illustration into a Base64 data URI ready for HTML or CSS.

Encode an Illustration input
Required options

These options are applied automatically when this example is selected.

Input format
WebP
Output
Data URI, HTML, CSS
Click to load

Encode a Product Photo

Generate reusable Base64, HTML image, and CSS background code from a coffee photo.

Encode a Product Photo input
Required options

These options are applied automatically when this example is selected.

Input format
WebP
Output
Data URI, HTML, CSS

Convert Images to Data URIs and Back

Encoding images into Base64 strings converts binary media into clean, plain-text data. This allows you to embed graphics directly within HTML markup, CSS stylesheets, or JSON payloads, eliminating the need for external asset hosting or extra HTTP requests.

The Image Base64 converter converts image files to Base64 data: URIs and reverses the process to decode strings back into previewable images instantly.

Key Features

  • Two-Way Conversion: Encode local image files into Base64 text, or paste an existing Base64 string to decode and render the original image.

  • Ready-to-Use Snippets: Copy formatted data streams formatted specifically for standard implementation:

  • HTML: <img src="data:image/png;base64,..." />

  • CSS: background-image: url("data:image/png;base64,...");

  • Raw Base64: Clean, unformatted string for API payloads, database storage, or JSON configurations.

  • Broad Format Support: Convert all standard web image formats, including PNG, JPEG, WebP, SVG, GIF, and ICO.

  • Payload Impact Estimator: Compare original file sizes against the resulting Base64 string length to monitor memory and bundle size impact.

  • Client-Side Processing: All conversion and decoding happen locally in your browser to maintain complete data privacy.

Common Use Cases

  • Inline Web Assets: Embed critical UI icons, logos, or SVGs directly into HTML/CSS to eliminate extra HTTP network requests and prevent layout shifts.
  • HTML Email Development: Inline graphics inside email templates to bypass external image blocking rules enforced by email clients.
  • API & JSON Payloads: Send image data directly inside API JSON requests or store small graphics within database entries without managing separate file storage.

Drag and drop an image or paste a Base64 string above to convert and generate implementation code immediately.