logo
GeekFormat

Immagine in Base64

Trascina le immagini qui o clicca per selezionare

Supporta PNG, JPG, GIF, WebP

Strumento online gratuito per convertire immagini in Base64, compatibile con PNG/JPG/WebP/GIF/SVG/BMP/AVIF e altri formati. Elaborazione locale nel browser con Web Worker, senza upload e senza blocchi. Genera Data URL per CSS inline, HTML, template email e trasmissione API.

Raccomandazioni correlate

Casi d'uso

  • CSS Sprites: incorpora piccole icone e immagini in CSS background per ridurre richieste HTTP e accelerare il primo rendering
  • Incorporamento immagini HTML: inserisci logo, placeholder e risorse UI direttamente nei tag HTML img riducendo le richieste immagine
  • Template email: i client email bloccano spesso immagini esterne; il Base64 inline aiuta a mostrarle subito senza autorizzazione utente
  • Trasmissione API: converti dati binari immagine in stringhe Base64 e inseriscile in body JSON per chiamate API
  • Ottimizzazione performance frontend: riduci richieste HTTP incorporando risorse critiche above-the-fold
  • Estensioni browser e app single-file: incorpora tutte le immagini con Base64 quando non è possibile referenziare risorse esterne

Funzionalità

  • Supporto completo dei formati: PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF e altri formati comuni con rilevamento MIME automatico
  • Accelerazione Web Worker: la codifica di file grandi viene eseguita in un thread separato con barra di avanzamento in tempo reale, senza bloccare la UI principale
  • Elaborazione locale senza upload: le immagini vengono trasferite al Worker tramite ArrayBuffer zero-copy e i dati non passano da alcun server
  • Generazione automatica di Data URL: crea il prefisso data:image/xxx;base64, pronto per HTML img o CSS background
  • Conversione bidirezionale: supporta sia immagine in Base64 sia Base64 in immagine in modalità separate
  • Copia e download con un clic: copia Base64 puro, Data URL completo, tag HTML img oppure scarica come file .txt

Come utilizzare

  1. Seleziona o trascina il file immagine da codificare (PNG/JPG/WebP/GIF, ecc.)
  2. Lo strumento converte automaticamente l’immagine in Base64 in un Web Worker del browser e mostra l’avanzamento in tempo reale
  3. Visualizza il risultato: stringa Base64 pura, Data URL completo o tag HTML img, e copia il formato desiderato
  4. Incolla il risultato in CSS, HTML, file di configurazione JSON o richieste API

Domande frequenti

Quali formati immagine sono supportati?

Sono supportati PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF e altri formati comuni. Lo strumento rileva automaticamente il tipo MIME e genera il prefisso Data URL corrispondente, come data:image/png;base64,...

Come funziona l’accelerazione Web Worker?

Un Web Worker è un thread del browser separato dal thread UI principale. La codifica tradizionale può bloccare la pagina; questo strumento esegue la codifica nel Worker con trasferimento ArrayBuffer e callback di avanzamento, mantenendo l’interfaccia reattiva anche con file grandi.

Le immagini vengono caricate su un server?

No. La conversione avviene direttamente nel thread Worker del browser con tecnologia ArrayBuffer zero-copy. Il contenuto dell’immagine non passa da alcun server, a differenza di strumenti che dichiarano “elaborazione nel browser” ma caricano davvero i dati.

Quanto aumenta il file dopo la codifica Base64?

La codifica Base64 produce circa il 133% della dimensione binaria originale, quindi circa il 33% in più. Ogni 3 byte (24 bit) diventano 4 caratteri Base64 (6 bit ciascuno), con padding = finale se necessario. Si consiglia di mantenere ogni immagine inline sotto 10KB.

Quali immagini sono adatte all’inlining Base64?

È consigliato per icone e piccole immagini sotto 10KB. Le immagini piccole inline riducono le richieste HTTP, ma immagini grandi aumentano la dimensione di HTML/CSS e possono peggiorare il caricamento. Le immagini grandi dovrebbero usare URL separati.

Qual è la differenza tra Data URL e Base64 puro?

Un Data URL ha formato data:image/png;base64, seguito dal contenuto Base64, e può essere inserito direttamente nell’attributo src di HTML img. Il Base64 puro è solo la stringa codificata e richiede un prefisso MIME.

Posso usare questo strumento per test di integrazione API?

Sì. Dopo aver convertito un’immagine in Base64, puoi inviarla come valore di campo in un body JSON a un’API backend. Lo strumento supporta copia con un clic ed è compatibile con la maggior parte degli esempi di documentazione API.

Perché scegliere Base64 inline invece di normali riferimenti immagine?

Base64 inline è adatto a file piccoli (<10KB) perché riduce le richieste HTTP. Per immagini grandi, URL separati caricano più rapidamente perché il browser può scaricare risorse in parallelo e usare la cache.

Che cos’è Immagine in Base64?

Immagine in Base64 è una tecnica che codifica dati binari immagine in stringhe di testo ASCII. Base64 usa 64 caratteri stampabili (A-Z, a-z, 0-9, +, /) per rappresentare dati binari, converte ogni 3 byte in 4 caratteri Base64 e aggiunge = come padding finale. L’intero processo segue lo standard RFC 4648.

**Principio di codifica**: Base64 divide ogni 3 byte (24 bit) in quattro gruppi da 6 bit, ciascuno mappato a un carattere dell’alfabeto Base64. Se il numero di byte non è divisibile per 3, vengono aggiunti 1-2 caratteri = di padding. Questo spiega perché la dimensione aumenta di circa il 33% (4/3 ≈ 1.33).

**Ottimizzazione Web Worker**: questo strumento usa Web Worker per eseguire la codifica in un thread del browser separato dal thread principale. ArrayBuffer.transfer() consente il trasferimento zero-copy al Worker ed evita blocchi. Anche con immagini di diversi MB, la UI resta fluida e mostra l’avanzamento in tempo reale.

**Privacy e sicurezza**: diversamente dagli strumenti che richiedono il caricamento su server, questo strumento funziona interamente nel browser. I dati immagine non passano da server di terze parti, aspetto importante per immagini sensibili come documenti o contratti.

**Casi d’uso**: le immagini Base64 sono usate spesso per CSS Sprites (ridurre richieste HTTP), template email HTML (evitare blocchi immagini dei client email), trasmissione API di dati binari ed estensioni browser o applicazioni single-file quando non è possibile referenziare risorse esterne.