CenáriosExemplos

Como usar imagens Base64

Aqui estão os cenários mais comuns com exemplos prontos para copiar e testar

Você receberá duas formas: Data URL (com prefixo MIME) e Base64 bruto (sem prefixo)

Data URL (recomendado)

data:image/png;base64,QUJDZA==

Base64 bruto

QUJDZA==

Exibir diretamente na página (HTML)

Ideal para pré-visualização rápida ou páginas estáticas sem hospedagem extra

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

Usar como imagem de fundo (CSS)

Perfeito para ícones, placeholders e pequenas decorações

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

Transmissão via API / JSON

Útil para depuração e protótipos. Não recomendado para imagens grandes em produção

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

Se o backend precisar apenas do Base64 bruto, envie QUJDZA== separadamente com o MIME/type.

Uso em mobile / multiplataforma

Qualquer ambiente que suporte Base64 pode utilizá-lo. Exemplos comuns abaixo

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

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

Quando não usar Base64?

Base64 é ideal para fluxo de dados e entrega rápida, não para substituir sistemas completos de assets