Casos de usoEjemplos prácticos

Cómo usar imágenes Base64

Aquí encontrarás los escenarios más comunes con ejemplos listos para copiar y probar

Obtendrás dos formatos: Data URL (con prefijo MIME) y Base64 sin prefijo

Data URL (recomendado)

data:image/png;base64,QUJDZA==

Base64 sin prefijo

QUJDZA==

Mostrar directamente en la web (HTML)

Ideal para vistas rápidas, páginas estáticas o escenarios sin hosting adicional

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

Usar como fondo (CSS)

Perfecto para iconos, placeholders y gráficos pequeños, reduciendo solicitudes HTTP

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

Transmisión por API / JSON

Útil para pruebas, prototipos o envíos temporales. No recomendado para imágenes grandes en producción

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

Si el backend solo necesita el Base64 sin prefijo, envía QUJDZA== y el MIME por separado.

Uso en móvil / multiplataforma (ejemplos)

Cualquier entorno compatible con Base64 puede usarlo. Aquí tienes ejemplos comunes

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

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

¿Cuándo no usar Base64?

Imágenes grandes incrustadas a largo plazo (aumentan el tamaño y afectan la carga)
Recursos estáticos reutilizables que requieren caché CDN
Imágenes críticas para el rendimiento inicial de la página

Base64 es ideal para flujo de datos y entrega rápida, no para reemplazar sistemas completos de recursos estáticos