Ho una confessione che farà sussultare gli ingegneri delle prestazioni Su una prima versione di una dashboard WordPress per WP Adminify, ho codificato in base64 ogni icona e le ho inlineate direttamente nel CSS perché ero stanco di gestire i fogli sprite Ha funzionato Le icone sono apparse istantaneamente, nessuna richiesta extra, nessun flash di immagine mancante Poi il foglio di stile è passato a gonfie vele oltre un megabyte e la pagina sembrava più lenta al secondo caricamento, perché nessuna di quelle immagini inline poteva essere memorizzata nella cache da sola Quel progetto è dove ho imparato che & quot; immagine a base64" è una tecnica genuinamente utile che è anche facile da usare eccessivamente.
Questa guida copre entrambe le metà di quella lezione mostrerò come convertire un'immagine in base64 con il Convertitore da immagine a Base64 su Toolz.dev, come decodificare nuovamente base64 in un'immagine, cos'è realmente un URI di dati e i compromessi onesti in modo da inlineare le risorse che ne beneficiano e lasciare quelle che non lo fanno.
tl; dr: La conversione di un'immagine in base64 trasforma il suo contenuto binario in una stringa di testo, solitamente racchiusa in un URI di dati come
data:image/png;base64,iVBORw0KG.... Quella stringa è incorporata direttamente in HTML, CSS, SVG o JSON senza richiesta di file separata Il convertitore Toolz.dev codifica e decodifica in entrambe le direzioni, viene eseguito interamente nel browser in modo che nessuna immagine venga mai caricata e ti fornisce la base grezza64, un URI di dati pronto, un<img>tag, e uno snippet CSS Base64 gonfia le dimensioni di circa un terzo, quindi inline piccole risorse come icone, non foto di grandi dimensioni.
Cos'è un'immagine base64, esattamente?
Base64 è uno schema di codifica, non di compressione e non di crittografia Lo schema è definito da RFC 4648, e il data: URI che lo avvolge RFC2397. Rappresenta dati binari arbitrari utilizzando 64 caratteri ASCII stampabili: le lettere da A a Z e da a a z, le cifre da 0 a 9, più + e /, con = utilizzato per il riempimento Lo schema è definito nella RFC 4648, lo stesso standard che governa il base64 che vedi negli allegati e-mail e nei payload JSON.
Il motivo per cui esiste è che gran parte del plumbing di internet's è stato costruito per il testo, non per i byte grezzi I dati binari possono contenere valori di byte che un canale orientato al testo maciulerà Base64 elude che prendendo tre byte di input, dividendo quei 24 bit in quattro gruppi di sei e mappando ciascun gruppo su uno dei 64 caratteri Tre byte in, quattro caratteri fuori. Quel rapporto tre-quattro è esattamente il motivo per cui l'output codificato è circa il 33% più grande del sorgente, un numero che vale la pena memorizzare perché decide se l'inlining è una buona idea.
Un & quot; base64 image" è semplicemente un file immagine che è stato eseguito attraverso quella codifica Da solo la stringa è solo testo Ciò che la rende renderizzabile è avvolgerla in un URI dati.
Che cos'è un URI di dati e perché il browser lo esegue il rendering?
Un URI dati è un URL che trasporta il suo payload in linea invece di puntare a una risorsa remota La sua forma, definita nella RFC 2397, è data:[<media-type>][;base64],<data>. Per un PNG che assomiglia a data:image/png;base64,iVBORw0KGgo....
Il pezzo importante è il tipo di media, image/png in quell'esempio, dice al browser come interpretare i byte che seguono, Poiché l'URI dei dati annuncia il proprio tipo MIME, un browser può trattare data:image/png;base64,... come immagine nell'istante in cui analizza un attributo che si aspetta un URL, se questo è il src di un <img> o il url() in un CSS background-image. Non avviene alcun viaggio di andata e ritorno in rete, perché non c'è nulla da recuperare L'immagine è già lì, esplicitata nel markup.
Questa è l'intera magia e il costo totale in una frase. L'immagine è già lì, motivo per cui viene renderizzata istantaneamente e anche perché non può essere memorizzata nella cache separatamente o condivisa tra le pagine come può fare un file collegato.
Come faccio a convertire un'immagine in base64 su Toolz.dev?
la Convertitore da immagine a Base64 ha due direzioni e la codifica è quella predefinita.
Scegli l'immagine & quot; su Base64" direzione, quindi carica o rilascia la tua immagine Lo strumento legge il file localmente utilizzando l'API File del browser e, poiché tale lettura avviene nel tuo browser, l'immagine non viaggia mai su un server Una volta caricata, ottieni un'anteprima più quattro uscite, ciascuna con il proprio pulsante di copia.
La base64 raw è la stringa nuda, utile quando si ha già il proprio wrapper L'URI dei dati è il full data:... stringa pronta per essere incollata in un src oppure url(). L'HTML <img> tag è un elemento completo che puoi inserire in un modello Il CSS background-image dichiarazione è pronto per un foglio di stile Accanto a quelli si vede la dimensione del byte decodificato e il conteggio dei caratteri in base64, in modo da poter giudicare il peso prima di impegnarsi Se il numero sembra allarmante, quello è lo strumento che fa il suo lavoro: una foto da 200 KB che diventa una stringa da 270 KB nel tuo HTML è esattamente il momento di riconsiderare.
Come faccio a decodificare nuovamente base64 in un'immagine?
Passa a & quot; Base64 in Image" direzione e incolla una stringa base64 grezza o un URI dati completo Il convertitore è tollerante riguardo all'input: spoglia gli spazi bianchi e se incolli un intero data:image/png;base64,... stringa legge il tipo MIME direttamente dal prefisso Se incolli base64 nuda senza prefisso assume PNG, che è l'impostazione predefinita sicura per la maggior parte degli screenshot e delle risorse esportate.
Convalida la stringa prima Se quello che hai incollato non è plausibile base64, il che significa che contiene caratteri al di fuori dell'alfabeto RFC 4648, lo strumento ti dice piuttosto che mostrare un'immagine rotta Quando l'input viene verificato, si ottiene un'anteprima live e un pulsante di download che ricostruisce il file binario originale e lo salva con la giusta estensione Questa direzione è veramente utile quando si trova un URI di dati sepolto in un foglio di stile o una risposta API e si desidera vedere che cosa è in realtà, o estrarlo di nuovo in un file reale.
Tutto qui è lato client, che è la stessa promessa che attraversa il resto della cassetta degli attrezzi, da quella orientata al testo convertitore base64 alla codificatore URL. Se vuoi il ragionamento più ampio dietro il mantenimento di questo tipo di lavoro nel browser, il guida alla codifica Base64 va più in profondità sulla codifica stessa.
Quando dovrei inlineare un'immagine come base64 e quando no?
Questa è la decisione che lo strumento esiste per informare, quindi ecco la tabella che utilizzo effettivamente.
| situazione | In linea come base64? | perché |
|---|---|---|
| Piccola icona o logo utilizzato in tutto il sito | Spesso sì | Rimuove una richiesta, appare istantaneamente, l'overhead è minuscolo |
| Minuscolo SVG o 1 px sfondo | certo | Il sovraccarico del 33% è trascurabile su poche centinaia di byte |
| Esportazione HTML a file singolo o e-mail | certo | Il file deve essere autonomo, non sono consentite risorse esterne |
| Grande foto eroe o banner | no | Overhead è grande e l'immagine non può essere memorizzata nella cache separatamente |
| Immagine riutilizzata in molte pagine | no | Un file collegato viene memorizzato nella cache una volta ed è condiviso; l'inlining lo duplica ovunque |
| Immagine di contenuto che cambia spesso | no | Gli editori non possono scambiare un blob base64 con la stessa facilità di un file |
Il modello dietro la tabella è semplice Inlining scambia una richiesta di rete per byte nel documento Che il commercio vince quando l'asset è piccolo e la richiesta salvata è importante, che è il caso classico per le icone sopra la piega Perde quando l'asset è grande o condiviso, perché si paga la tassa del 33 per cento, si perde la memorizzazione nella cache indipendente, e si gonfia proprio il file che il browser deve analizzare prima che possa dipingere qualsiasi cosa.
Per le righe & quot; no" la mossa migliore è solitamente ottimizzare il file e servirlo normalmente. È lì che uno strumento come Comprimi immagine o il convertitore di formato guadagna il suo mantenimento, riducendo l'asset in modo che la versione collegata sia il più leggera possibile Ho scritto di più su tutto quel flusso di lavoro nel Toolkit per sviluppatori web guida.
Base64 mantiene privata la mia immagine?
Sì e no, e la distinzione conta Base64 è una codifica, quindi chiunque abbia la stringa può decodificarla nuovamente all'esatta immagine originale Fornisce segretezza zero Non trattare un URI di dati come un modo per nascondere qualcosa, perché il & quot; Base64 a Image" direzione di questo stesso strumento lo inverte in una sola pasta.
Ciò che è privato è la conversione stessa Su Toolz.dev l'immagine viene letta e codificata interamente nel tuo browser con l'API File, e non viene caricato nulla Quindi l'artwork, lo screenshot, il logo del client che stai codificando non lascia mai la tua macchina durante il processo Questa è una garanzia diversa dalla codifica che nasconde il contenuto, e cerco di essere preciso al riguardo perché & quot;private" viene gettato in giro liberamente La privacy è nell'elaborazione locale, coperta più ampiamente nel privacy dati guida, non in base64 come schema.
Alcuni consigli pratici dalla spedizione di questo
Preferisci SVG per le icone quando puoi, e inline il markup SVG direttamente piuttosto che base64-codificandolo SVG è già testo, quindi avvolgendolo in base64 aggiunge solo la tassa del 33 per cento per niente Base64 brilla per formati raster come PNG e JPEG che sono genuinamente binari.
Guarda la dimensione totale del documento, non solo la singola immagine Un'icona inline è invisibile Quaranta di loro, l'errore che ho fatto su quella dashboard di WordPress, trasformano un foglio di stile snello in un mostro Se si sta inlining più di una manciata, che è un segnale per fare un passo indietro e considerare uno sprite collegato o un carattere di icona invece.
Mantieni onesto il tipo MIME Se esporti un JPEG ma etichetti il suo URI dei dati come image/png, alcuni browser far fronte e alcuni no. Il convertitore rileva il tipo reale dal file in modo che l'output sia corretto, ma se assembli manualmente un URI di dati altrove, abbina il tipo multimediale ai byte effettivi.
E quando erediti una base di codice piena di URI di dati misteriosi, ricorda la direzione di decodifica Incollando uno nel & quot; Base64 in Image" lato e colpire il download è il modo più veloce per vedere cosa sta effettivamente spedendo un foglio di stile.
Come funziona effettivamente la codifica base64, passo dopo passo?
Aiuta a vedere la meccanica una volta, perché l'intera storia overhead del 33% ne esce naturalmente Base64 funziona su gruppi di tre byte alla volta Tre byte sono 24 bit Il codificatore taglia quei 24 bit in quattro blocchi di sei bit ciascuno Sei bit possono rappresentare 64 valori, da 0 a 63, e ciascuno di questi valori si mappa su un carattere nell'alfabeto base64: da A a Z per 0 a 25, da a z per 26 a 51, le cifre da 0 a 9 per 52 a 61, quindi + per 62 e / per 63.
Quindi tre byte di input diventano sempre quattro caratteri di output Questa è la fonte dell'aumento di dimensione Quattro caratteri portano l'informazione di tre byte, un rapporto di 4 a 3, che equivale a dire che l'output è un terzo più grande dell'input Non c'è modo di aggirarlo, perché è cotto nel funzionamento dello schema.
Il riempimento gestisce gli avanzi Se i tuoi dati non sono un multiplo pulito di tre byte, il codificatore esegue il pad del gruppo finale in modo che produca comunque un numero intero di caratteri e ne aggiunge uno o due = segni per registrare quanta imbottitura ha aggiunto Ecco perché le corde base64 finiscono così spesso in = oppure ==. Un unico finale = significa che l'ultimo gruppo conteneva due byte; un doppio == significa che ne conteneva uno Il convertitore Toolz.dev gestisce l'imbottitura automaticamente in entrambe le direzioni e durante la decodifica accetta felicemente stringhe con o senza il finale =, perché alcuni sistemi lo spogliano.
Puoi guardare questo play out con un minuscolo esempio I tre byte ASCII per le lettere & quot; Man" codificare per i quattro caratteri & quot; TWFu", un esempio famoso direttamente dalla letteratura di codifica Rilascia quegli stessi tre caratteri in un URI di dati come testo e puoi vedere il viaggio di andata e ritorno, o eseguire un'immagine reale attraverso lo strumento e notare che il conteggio dei caratteri nell'output è sempre circa quattro terzi del conteggio dei byte mostrato accanto ad esso.
Capire questo spiega anche perché base64 è una soluzione scadente per le immagini di grandi dimensioni e una misura fine per quelle minuscole Il sovraccarico è una percentuale fissa, quindi su un'icona di 300 byte ti costa 100 byte, a nessuno importa Su una foto da due megabyte ti costa due terzi di un megabyte di puro testo gonfiati nel tuo documento, e quel documento deve essere scaricato e analizzato prima che la pagina possa essere renderizzata I calcoli non cambiano con le dimensioni, ma le conseguenze sì.
Domande frequenti
Come faccio a convertire un'immagine in Base64?
Scegli la direzione Immagine su Base64, quindi carica o rilascia la tua immagine Lo strumento legge il file localmente, lo codifica e restituisce l'URI di dati raw Base64 più un URI di dati pronto all'uso, un tag img e uno snippet CSS che puoi copiare.
Che cosa è un URI dati?
Un URI di dati è una stringa che incorpora un file in linea invece di collegarsi ad esso, nei dati del modulo: [tipo mime]; base64, [dati]. Per un PNG sembra un dato: immagine/png;base64, iVBORw0KGgo... I browser lo rendono come immagine ovunque sia previsto un URL, quindi non è necessaria alcuna richiesta separata.
Posso riconvertire Base64 in un'immagine?
Sì. Passa alla direzione Base64 in Image e incolla una stringa Base64 grezza o un URI dati completo Lo strumento lo decodifica, mostra un'anteprima e ti consente di scaricare il file immagine ricostruito.
Quali formati di immagine sono supportati?
PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO e AVIF sono tutti supportati Il tipo MIME corretto viene rilevato dal file in modo che l'URI dei dati risultante venga eseguito correttamente.
Perché la stringa Base64 è più grande della mia immagine?
Base64 rappresenta tre byte di dati binari con quattro caratteri di testo, quindi l'output codificato è circa il 33% più grande della fonte. Questo sovraccarico è il motivo per cui Base64 si adatta più alle piccole icone e ai loghi che alle grandi fotografie.
È sicuro convertire le immagini qui?
Sì. Ogni immagine viene letta e codificata interamente nel browser utilizzando l'API File. Nessun file, stringa o risultato viene caricato su un server, quindi le immagini private rimangono sul dispositivo.
Dovrei inline le immagini come Base64 in produzione?
Inlining funziona bene per le piccole risorse utilizzate di frequente come le icone perché rimuove una richiesta HTTP ed evita un flash di immagine mancante Per le immagini di grandi dimensioni di solito è meglio mantenere i file separati in modo che il browser possa memorizzarli nella cache in modo indipendente.
Il convertitore funziona offline e su mobile?
Sì. Poiché tutta l'elaborazione è lato client, funziona dopo che la pagina è stata caricata anche senza connessione e l'interfaccia è reattiva sui moderni browser desktop e mobili.
