Use CasesExamples

How to use Base64 images

Here are the most common scenarios and copy-ready examples. Replace the sample value with your converted result to test quickly.

You’ll get two formats: Data URL (with MIME prefix) and raw Base64 (without prefix)

Data URL (recommended)

data:image/png;base64,QUJDZA==

Raw Base64

QUJDZA==

Display directly on a page (HTML)

Great for quick previews, embedding in static pages, or cases where you don’t want extra asset hosting

<img
  src="data:image/png;base64,QUJDZA=="
  alt="Base64 Image"
  width="240"
/>

Use as a background image (CSS)

Ideal for icons, placeholders, and small decorative images—reduces one asset request

.banner {
  background-image: url("data:image/png;base64,QUJDZA==");
  background-size: cover;
  background-position: center;
}

API / JSON transport

Useful for debugging, prototypes, and temporary transfer. Not recommended to inline large images in production long-term.

{
  "filename": "image.png",
  "mime": "image/png",
  "dataUrl": "data:image/png;base64,QUJDZA=="
}

If the backend only needs raw Base64, send QUJDZA== and pass MIME/type separately.

Mobile / cross-platform usage (examples)

Works in any runtime that supports Base64. Common snippets are provided for quick replacement and verification.

import 'dart:convert';
import 'package:flutter/widgets.dart';

final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);

When should you avoid Base64?

Large images inline long-term (size increases significantly and hurts loading)
Static assets that need CDN cache hits and long-term reuse
Images in production where first-load performance and caching strategy are critical

Base64 is best for “data flow and fast delivery,” not as a replacement for a complete static asset pipeline