Convertitore da immagine a Base64 + da SVG a data URI | We.Inc
Converti immagini PNG, JPG, WebP, GIF o SVG in data URI Base64 nel tuo browser. Copiale come tag img, sfondo CSS o JSON, ottieni una versione URL-encoded più leggera per gli SVG e scopri se conviene inserirle inline.
Base64 trasforma i byte di un'immagine in testo così può stare dentro HTML o CSS come data URI, per esempio src="data:image/png;base64,...". Il testo è circa un terzo più grande del file. Trascina un'immagine qui sotto per ottenere il data URI, snippet img e CSS già pronti e un consiglio su se valga la pena inserirla inline.
Quando l'inline aiuta e quando danneggia
Immagine
Inserirla inline?
Perché
Icona sotto i 4 kB
Di solito sì
Risparmia una richiesta a un costo minimo
Logo o icona SVG
Sì, URL-encoded
Più leggera del Base64 e ancora leggibile
Immagine above the fold, da 4 a 20 kB
A volte
Solo se compare in una sola pagina
Foto o qualsiasi cosa oltre i 20 kB
No
Appesantisce ogni caricamento e non può essere messa in cache da sola
Trascina una o più immagini. Ognuna ottiene il suo data URI Base64 e, per i file SVG, una versione URL-encoded di solito più leggera. Copiale come tag img, sfondo CSS o valore JSON. I file non lasciano mai il tuo dispositivo.
Trascina le immagini nel riquadro o clicca per sceglierle. Funzionano PNG, JPG, WebP, GIF, AVIF, ICO e SVG.
Il browser legge ogni file in locale e lo codifica. Non viene caricato nulla.
Confronta la dimensione originale con quella codificata e leggi il verdetto su se inserirla inline.
Copia il formato che ti serve: data URI grezzo, tag img, background-image CSS o JSON.
Prima comprimi, poi codifica. Codificare una foto da 300 kB ti dà circa 400 kB di testo, peggio del file di partenza.
Per gli SVG, la forma URL-encoded salta del tutto il Base64. Di solito è più leggera e puoi ancora leggere e modificare il markup.
I data URI nel CSS vengono scaricati con il foglio di stile, che blocca il rendering. Limitali a piccole icone necessarie in ogni pagina.
Ricorda il testo alt. Un'immagine inline ha comunque bisogno di una descrizione per gli screen reader, oppure alt="" se è decorativa.
Domande frequenti
Perché la versione Base64 è più grande della mia immagine?
Base64 usa quattro caratteri di testo ogni tre byte, quindi l'output è circa il 33% più grande, più qualche byte di padding e il prefisso data:. La compressione Gzip o Brotli della pagina ne recupera una parte, ma raramente tutto.
Devo usare Base64 per gli SVG?
Di solito no. L'SVG è già testo, quindi può andare in un data URI con solo pochi caratteri codificati. Quella versione è in genere più leggera del Base64 e resta leggibile. Usa Base64 solo se uno strumento in cui stai incollando rifiuta la forma URL-encoded.
I data URI funzionano nelle email?
Il supporto è irregolare. Diversi client email importanti bloccano o rimuovono le immagini in data URI, quindi per le newsletter ospita l'immagine e collegala, oppure allegala con un content ID.
C'è un limite di dimensione per i data URI?
I browser attuali accettano data URI molto lunghi nei tag img e nel CSS, ben oltre qualsiasi immagine ragionevole. Il limite pratico sono le prestazioni: grandi immagini inline rallentano il file che le contiene. Alcuni strumenti e client email più vecchi però li troncano.
Com'è fatto un data URI
Un data URI ha tre parti: lo schema data:, il media type come image/png e il contenuto. Per le immagini binarie il contenuto è Base64 e il tipo è seguito da ;base64. Per i formati di testo come SVG, il contenuto può essere il markup stesso con una manciata di caratteri codificati in percentuale.
I browser trattano un data URI come qualsiasi altra sorgente di immagine. Viene decodificato in memoria, quindi non c'è alcuna richiesta in più, ma non c'è nemmeno una voce di cache separata: l'immagine viene scaricata di nuovo ogni volta che lo è la pagina o il foglio di stile che la contiene.
Opzioni migliori per la maggior parte delle immagini
Per qualsiasi cosa più grande di un'icona, un normale file servito su HTTP/2 o HTTP/3 è quasi sempre più veloce. Più richieste condividono una connessione, l'immagine viene messa in cache da sola e il browser può caricarla in modo lazy o alla dimensione giusta con srcset.
L'inline ha ancora senso per piccole icone in un singolo componente, per i segnaposto mostrati mentre si carica un'immagine vera e per file HTML autonomi come report o demo offline.
Abbastanza piccola da inserire inline. Risparmia una richiesta e aggiunge poco al file che la contiene.
Al limite. Inseriscila inline solo se compare above the fold in una sola pagina; altrimenti un normale file si mette in cache meglio.
Data URI
JSON
tipo sconosciuto
, {w} per {h} px
File {file}, codificato {encoded} ({pct}% del file)
Codifica SVG
SVG URL-encoded ({size})
Base64 ({size})
Formato da copiare
... ({n} caratteri; usa Copia per il testo completo)
Output di {name}
Copia
{name} non è un'immagine, quindi è stato saltato.
Codifica immagini
Trascina qui le immagini o clicca per sceglierle. Restano sul tuo dispositivo.