AnvändningsområdenExempel

Hur används Base64-bilder?

Här är de vanligaste användningsfallen med färdiga exempel som du kan kopiera och testa direkt

Du får två format: Data URL (med MIME-prefix) och rå Base64 (utan prefix)

Data URL (rekommenderad)

data:image/png;base64,QUJDZA==

Rå Base64

QUJDZA==

Visa direkt på webben (HTML)

Perfekt för snabb förhandsvisning eller statiska sidor utan extern lagring

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

Använd som bakgrundsbild (CSS)

Idealisk för ikoner, platshållare och små dekorationer

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

API / JSON-överföring

Passar för testning och prototyper. Stora bilder bör undvikas i produktion

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

Om backend endast behöver rå Base64 kan du skicka QUJDZA== och ange MIME separat

Mobil / plattformsoberoende användning

Fungerar i alla miljöer som stöder Base64. Exempel ges för snabb verifiering

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

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

När bör Base64 inte användas?

Base64 är bäst för dataöverföring och snabb leverans, inte som ersättning för resurssystem