Scenari d’usoEsempi pratici

Come usare le immagini Base64

Qui trovi gli scenari più comuni ed esempi pronti da copiare. Puoi sostituire i risultati convertiti per testare rapidamente

Otterrai due formati: Data URL (con prefisso MIME) e Base64 grezzo (senza prefisso)

Data URL (consigliato)

data:image/png;base64,QUJDZA==

Base64 grezzo

QUJDZA==

Visualizzazione diretta sul web (HTML)

Adatto per anteprime rapide, pagine statiche o scenari senza hosting di risorse aggiuntive

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

Uso come immagine di sfondo (CSS)

Ideale per icone, immagini segnaposto o decorazioni leggere, riduce una richiesta di rete

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

Trasmissione API / JSON

Utile per debug, prototipi e trasferimenti temporanei. Non consigliato per immagini grandi in produzione

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

Se il backend richiede solo il Base64 grezzo, invia QUJDZA== separatamente insieme al tipo MIME

Uso mobile / multipiattaforma (esempi)

Qualsiasi ambiente che supporti Base64 può utilizzarlo. Qui trovi le sintassi più comuni da testare

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

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

Quando non usare Base64?

Immagini grandi inline a lungo termine (aumentano significativamente le dimensioni)
Risorse statiche riutilizzabili che richiedono cache CDN
Immagini con elevati requisiti di prestazioni e strategia di caching

Base64 è ideale per il flusso dei dati e la consegna rapida, non per sostituire un sistema completo di risorse statiche