Skip to main content

Image To Base64

The Image to Base64 Converter encodes any image file into a Base64 string that can be embedded directly in HTML, CSS, JavaScript, or JSON without a separate image file. Paste the Base64 string as a data URL in an img src attribute or CSS background-image to serve the image inline. Useful for small icons, reducing HTTP requests, and embedding images in email templates.

Click to upload an image

PNG, JPG, GIF, SVG up to 5MB

Preview

Base64 Output

Share this tool
Developer Tools

About the Image to Base64 Converter

The Image to Base64 Converter encodes any image file into a Base64 string that can be embedded directly in HTML, CSS, JavaScript, or JSON without a separate image file. Paste the Base64 string as a data URL in an img src attribute or CSS background-image to serve the image inline. Useful for small icons, reducing HTTP requests, and embedding images in email templates.

How to use it

  1. Upload an image file (PNG, JPG, GIF, SVG, WebP).
  2. The tool encodes it to a Base64 string instantly.
  3. Copy the full data URL (data:image/png;base64,...) or just the Base64 string.
  4. Paste into your HTML, CSS, or code where the image URL is needed.

Formula & methodology

Base64 encoding: convert each 3 bytes of binary data to 4 ASCII characters from the Base64 alphabet (A-Z, a-z, 0-9, +, /). Data URL format: data:[mime-type];base64,[base64-string]. Size increase: Base64 is ~33% larger than binary (4/3 ratio). 1KB image = ~1.37KB Base64. Padding: = characters at end if input not divisible by 3.

Common use cases

  • Embedding small icons in CSS to eliminate HTTP requests
  • Including images in email HTML without external links
  • Storing images in JSON APIs or databases as strings
  • Creating self-contained HTML files with inline images
  • Testing image display in development without a file server

Frequently asked questions

No — Base64 should only be used for small images (under ~5-10KB). The ~33% size overhead is acceptable for small files. Large Base64-encoded images bloat your HTML/CSS significantly, prevent browser caching (the data URL changes if the image changes), and increase time to first byte. For anything larger than small icons, use regular image files with proper caching headers.
In HTML: <img src="data:image/png;base64,iVBORw0KGgo..." />. In CSS: background-image: url("data:image/png;base64,..."). In JavaScript: element.src = "data:image/jpeg;base64,...". The MIME type in the data URL must match the image format. SVG images use "data:image/svg+xml;base64,..." or can be URL-encoded without Base64 for better compression.

Related tools

All Tools →
Image

Image Format Converter
Image

SVG to PNG Converter
Image

Image Compressor
Image

Base64 to Image Decoder
Image

Image Resizer

Embed this tool on your site

Free for personal and commercial use. Just copy the snippet below.