Home›Image & PDF›Image ↔ Base64

Image to Base64 Converter

Convert any image to a Base64-encoded string for embedding directly in HTML, CSS, JSON or source code — eliminating extra HTTP requests for small assets. Paste the resulting data URL straight into your img tag or CSS background property.

Drop your image here

Supports JPG, PNG, WEBP, GIF, SVG — Max 5MB

Base64 to Image Decoder

Paste a Base64 string or Data URL below to decode it back to an image.

What is Base64?

Text Encoding

Base64 encodes binary data (like images) into ASCII text characters.

Embed in HTML/CSS

Embed images directly into HTML or CSS without needing a separate file request.

Data Transfer

Useful for APIs and JSON where binary data needs to be sent as text.

Features

  • Data URL output
  • Raw Base64 string
  • HTML img tag output
  • CSS background output
  • Base64 decoder included
  • 100% browser-based

Keep in Mind

  • Base64 is ~33% larger
  • Best for small images
  • Icons & logos ideal
  • Avoid for large photos

Related Tools

Compress Image PNG to JPG Resize Image

Free Image to Base64 Converter

Convert any image to a Base64 encoded string for embedding directly in HTML, CSS or JSON. Eliminate extra HTTP requests by inlining small images as data URLs. Also includes a Base64 decoder to convert encoded strings back to viewable images.

Features

Multiple Output Formats

Get Data URL, raw Base64, HTML img tag, and CSS background-image code, ready to use.

Two-Way Conversion

Convert image to Base64 AND decode Base64 strings back to viewable/downloadable images.

100% Private

Files are read and converted locally. No upload, no server processing.

Instant Preview

See the Base64-encoded image rendered immediately to verify correctness.

One-Click Copy

Copy the output in any format with a single click.

Download Decoded

Download decoded Base64 images back as PNG files.

Who Uses This Tool?

Front-End DevelopersInline small icons, logos and sprites in CSS/HTML to eliminate extra HTTP requests.
Backend DevelopersStore image data in JSON payloads, databases or environment variables.
Email DevelopersEmbed images directly in HTML emails to avoid blocked external image issues.
API DevelopersInclude images in REST API responses or POST request bodies as Base64 strings.

Common Questions

When should I use Base64 images?
Use Base64 for small images (under 10KB) — icons, logos, sprites. For larger images, external files are more efficient because browsers can cache them separately.
Does Base64 increase file size?
Yes — Base64 encoding increases file size by approximately 33%. A 10KB image becomes roughly 13KB as Base64. This is offset by saving an HTTP request for small images.
What is a Data URL?
A Data URL is a URI scheme that includes data inline: data:[mimetype];base64,[encoded data]. Browsers can use this directly as an image src or CSS background-image value.
Can I use Base64 in CSS?
Yes — background-image: url('data:image/png;base64,[data]') is valid CSS and widely supported. It's particularly useful for small decorative elements and icons.

Pro Tip

Use Base64 for images smaller than 5–10KB. For anything larger, an external file is better because browsers can cache it. A Base64-encoded image is re-downloaded with every page load, while external images are cached after the first visit.

Did You Know?

33%
Base64 Size Overhead
Base64 encoding increases file size by exactly 33.3%. Every 3 bytes of binary data becomes 4 ASCII characters. A 100KB image becomes 133KB as Base64. This overhead is the trade-off for being able to embed binary data in text-based formats.
1987
MIME and Base64 Standardised
Base64 encoding as used today was standardised in RFC 1341 (MIME, 1992). The concept dates to 1987 when email systems needed to transmit binary attachments (images, executables) through text-only networks. The name comes from using 64 ASCII characters as the encoding alphabet.
RFC 4648
Base64 is an Open Standard
Base64 is defined in RFC 4648 (2006). The standard defines the 64-character alphabet (A-Z, a-z, 0-9, +, /) and padding rules. URL-safe Base64 replaces + with - and / with _ to avoid conflicts in URLs and filenames.

Base64 Use Cases

Use CaseRecommended?Better AlternativeNotes
Favicon in HTML✅ YesExternal .ico fileSmall enough that inline is fine
CSS background icons (<2KB)✅ YesSVG spriteSaves HTTP request for tiny icons
Email inline images✅ YesExternal URLEmail clients block external images
API image transfer✅ YesFile upload endpointCommon in REST APIs and webhooks
Hero images (>10KB)❌ NoExternal file with srcset33% overhead + no caching
Images used site-wide❌ NoExternal CDN fileBrowser caches external files
Profile photos❌ NoCloud storage URLUser-uploaded content needs CDN

You May Also Ask

What is a Data URL and how does it work?
A Data URL embeds file content directly in a URL string using the format: data:[mediatype];[encoding],[data]. For example: data:image/png;base64,iVBORw0KGgo... Browsers can use this URL directly as an image source, CSS background, or href — no separate HTTP request needed. The downside: browsers cache external files but not inline Data URLs, causing repeated re-parsing.
When is embedding Base64 images a bad idea?
Base64 is inefficient for: (1) Large images — the 33% overhead plus lack of caching compounds. (2) Images used on multiple pages — an external file is downloaded once and cached; Base64 is re-sent on every page. (3) Images above 5–10KB — the HTTP request cost is less than the encoding overhead. (4) Images that need to be updated frequently — embedded images require regenerating the entire HTML/CSS.
What is URL-safe Base64 and when do I need it?
Standard Base64 uses + and / which have special meanings in URLs. URL-safe Base64 (Base64url) replaces + with - and / with _ making the encoded string safe to use directly in URLs and filenames without encoding. Use standard Base64 for HTML/CSS embedding; use URL-safe Base64 for JWT tokens, URL parameters and filenames.

Common Mistakes

Using Base64 to "hide" an image
Base64 is easily decoded by anyone who views page source — it provides zero obfuscation or protection.
If you need to protect an image, use server-side authentication to control access, not Base64.
Embedding large images as Base64 in CSS
A CSS file with Base64 images cannot be cached separately from the images. Every CSS change requires re-downloading all embedded images.
Use external files for anything above 5KB — the caching benefit far outweighs the saved HTTP request.
Confusing Base64 with encryption
Base64 is encoding — anyone can decode it in seconds. It converts format, not protects content.
For sensitive image content, use proper authentication and authorization, not Base64.