Use cases

Zet afbeeldingen om naar Base64 use cases

Maak van lokale afbeeldingen Data URI-snippets voor HTML, CSS en e-mail. Snel, prive en in de browser.

HTMLCSSJSONEmailAPIDocs

Choose the right shape

Most mistakes come from copying the wrong form. Data URIs include the MIME type and are ready for HTML or CSS; raw Base64 is better for API fields and storage.

Data URIdata:image/png;base64,iVBORw0KGgo...Use it directly in HTML, CSS, Markdown, or anywhere a browser expects an image URL.

Raw Base64iVBORw0KGgoAAAANSUhEUg...Use it inside JSON, API payloads, config fields, or databases that store the MIME type separately.

Use cases

Common implementation patterns

Copy the pattern that matches your target surface, then replace the sample value with output from the converter.

Embed an image in HTML

Good for tiny icons, portable demos, or documentation where the image should be self-contained.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Inline preview" width="120" height="120" />

Use a Base64 image in CSS

Useful for small decorative assets, skeleton placeholders, and one-file prototypes.

.avatar-placeholder {
  width: 48px;
  height: 48px;
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
  background-size: cover;
}

Send images through JSON APIs

Use raw Base64 when the receiving service expects a text field instead of multipart upload.

{
  "fileName": "logo.png",
  "mimeType": "image/png",
  "base64": "iVBORw0KGgoAAAANSUhEUg..."
}

Inline image for email templates

Inline Data URIs can help with small fallback images, but always test client compatibility.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Brand mark" style="display:block;width:96px;height:auto;" />

Keep docs and examples self-contained

Base64 keeps screenshots, placeholders, and tiny diagrams inside one Markdown or HTML file.

![Inline diagram](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...)

Debug payloads across languages

Raw Base64 is plain text, so it can be pasted into test fixtures, cURL commands, or logs.

curl -X POST https://api.example.com/upload \
  -H "Content-Type: application/json" \
  -d '{"mimeType":"image/png","base64":"iVBORw0KGgo..."}'

When not to use Base64

Base64 increases file size and bypasses normal browser caching, so it is not the right default for every image.

Large photosUse normal image URLs, responsive sizes, and CDN caching instead.

Reusable production assetsA separate file can be cached once and reused across pages.

SEO or sharing imagesCrawlers and social platforms expect normal image URLs for previews.

Frequently changing mediaBase64 makes diffs, cache invalidation, and payload inspection harder.

A practical rule of thumb

01Use Data URI
when the output goes into HTML, CSS, Markdown, email markup, or a browser URL field.
02Use raw Base64
when the target already has separate fields for MIME type, file name, and encoded content.
03Use a normal URL
when the image is large, reused often, or should benefit from CDN and browser caching.

Convert the asset, then copy the exact shape.

Maak van lokale afbeeldingen Data URI-snippets voor HTML, CSS en e-mail. Snel, prive en in de browser.

Open converter Text tools