Image to Base64 & Data URI Generator

What does the Image to Base64 & Data URI Generator do?

The Image to Base64 Generator encodes local image files (PNG, JPEG, WebP, SVG, GIF, ICO, AVIF) and raw SVG markup into standard Base64 strings and RFC 2397 Data URIs (data:image/...;base64,...). It enables frontend developers and web performance engineers to embed vector icons, favicon assets, and small images directly inside HTML <img> elements and CSS background-image stylesheets, eliminating unnecessary HTTP roundtrips.

Core Concepts

• RFC 2397 Data URIs: Data URIs prefix the Base64 payload with media type metadata (e.g. data:image/svg+xml;base64,...), allowing browsers to render binary assets inline without fetching external server URLs.
• Latency Optimization: Inlining small vector icons (under 10KB) reduces TCP handshake latency and DNS lookup overhead for critical Above-the-Fold website components.
• URL-Safe Encoding: Standard Base64 strings contain + and / characters. URL-safe Base64 converts them to - and _ so the data can be embedded in URL query parameters or HTTP header tokens without percent-encoding.

How to use the tool?

1. Upload File or Paste SVG: Drag & drop an image file (PNG, JPG, SVG, WebP, GIF) or paste raw SVG XML markup into the input editor.
2. Select MIME & URL-Safe Options: Choose your preferred MIME type and toggle URL-safe encoding if needed in real time.
3. Live Encode & Copy Snippets: The tool encodes instantly in real time. Copy the Complete Data URI, Raw Base64 string, HTML <img> tag, or CSS background declaration with 1 click.

Related Developer Utilities

• Base64 to Image: Decode Base64 strings and Data URIs back to renderable image files and downloads.
• Base64 Encoder: Encode UTF-8 plain text strings into standard or URL-safe Base64.
• Base64 Decoder: Decode Base64 payloads back to UTF-8 text or formatted JSON.
• Base64 to Hex: Convert Base64 strings into formatted hexadecimal byte representations.

REST API Integration

blueutils.com provides a free REST API endpoint (POST https://blueutils.com/api/base64/image-to-base64) for programmatic integration into build systems, image processing microservices, and AI agent pipelines.

API Request Parameters

API Request Payload Examples

cURL

curl -X POST https://blueutils.com/api/base64/image-to-base64 \
  -H "Content-Type: application/json" \
  -d '{ "rawText": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#2563EB\"/></svg>", "mimeType": "image/svg+xml" }'

Python

import requests

url = "https://blueutils.com/api/base64/image-to-base64"
payload = {
    "rawText": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#2563EB\"/></svg>",
    "mimeType": "image/svg+xml"
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = "{\"rawText\": \"<svg width=\\\"10\\\" height=\\\"10\\\"></svg>\", \"mimeType\": \"image/svg+xml\"}";
        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/base64/image-to-base64"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();
        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "dataUri": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMyNTYzRUIiLz48L3N2Zz4=",
  "base64": "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMyNTYzRUIiLz48L3N2Zz4=",
  "mimeType": "image/svg+xml",
  "filename": "icon.svg",
  "byteLength": 105,
  "formattedSize": "105 B",
  "isImage": true,
  "snippets": {
    "html": "<img src=\"data:image/svg+xml;base64,...\" alt=\"icon.svg\" />",
    "css": "background-image: url('data:image/svg+xml;base64,...');",
    "markdown": "![icon.svg](data:image/svg+xml;base64,...)"
  }
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid input: File or string content cannot be empty."
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Native Usage

Convert image files to Base64 strings locally without external dependencies using native OS tools:

Windows (PowerShell)

# Convert image to Base64 string in PowerShell
$bytes = [System.IO.File]::ReadAllBytes("icon.png")
$b64 = [System.Convert]::ToBase64String($bytes)
Write-Output "data:image/png;base64,$b64"

Linux / Unix (Bash)

# Convert image to Base64 Data URI in Bash
echo "data:image/png;base64,$(base64 -w 0 icon.png)"

Python

import base64

with open("icon.png", "rb") as f:
    b64_str = base64.b64encode(f.read()).decode("utf-8")
print(f"data:image/png;base64,{b64_str}")

Java

import java.nio.file.Files;
import java.nio.file.Path;
import java.util.Base64;

public class ImageToBase64 {
    public static void main(String[] args) throws Exception {
        byte[] bytes = Files.readAllBytes(Path.of("icon.png"));
        String b64 = Base64.getEncoder().encodeToString(bytes);
        System.out.println("data:image/png;base64," + b64);
    }
}