ToepassingenGebruik

Hoe Base64-afbeeldingen te gebruiken

Hier vind je de meest voorkomende scenario’s en direct kopieerbare voorbeelden. Vervang eenvoudig de resultaten om snel te testen

Je krijgt twee formaten: Data URL (met mime-prefix) en ruwe Base64 (zonder prefix)

Data URL (aanbevolen)

data:image/png;base64,QUJDZA==

Ruwe Base64

QUJDZA==

Direct tonen op webpagina’s (HTML)

Geschikt voor snelle previews, statische pagina’s of situaties zonder extra hosting

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

Gebruik als achtergrondafbeelding (CSS)

Ideaal voor iconen, placeholders en kleine decoratieve afbeeldingen om extra verzoeken te verminderen

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

API / JSON-overdracht

Geschikt voor debugging, prototyping en tijdelijke overdracht. Niet aanbevolen voor grote afbeeldingen in productie

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

Als de backend alleen ruwe Base64 nodig heeft, kun je QUJDZA== verzenden en het mime/type apart doorgeven.

Mobiel / cross-platform gebruik (voorbeelden)

Elke omgeving die Base64 ondersteunt kan dit gebruiken. Hier zijn gangbare voorbeelden om direct te testen

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

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

Wanneer Base64 niet aanbevolen is?

Grote afbeeldingen langdurig inline gebruiken (aanzienlijk grotere bestandsgrootte)
Statische resources die CDN-caching en hergebruik vereisen
Afbeeldingen met hoge eisen aan first paint en cache-strategieën

Base64 is ideaal voor datatransport en snelle levering, maar niet als vervanging voor een volledig statisch resourcesysteem