Da immagine a Base64

Codifica le immagini come data URI Base64

Un data URI Base64 trasforma un'immagine in una stringa di testo semplice che puoi incollare direttamente nel tuo HTML o CSS. Il browser la decodifica al volo, quindi l'immagine viene mostrata senza una richiesta di file separata: comodo per icone minuscole, template email e pagine autonome in un unico file.

Questo strumento legge il file in locale e restituisce il data: URI completo, insieme a snippet <img> e CSS background-image già pronti da copiare con un clic. Nulla viene caricato: la codifica avviene interamente nel tuo browser.

Quando incorporare (e quando no)

Incorporare elimina una richiesta HTTP, e questo può velocizzare immagini piccole e critiche. Ma Base64 è circa il 33% più grande del file binario e non può essere messo in cache separatamente, quindi evitalo per foto grandi o immagini riutilizzate su molte pagine. Come regola pratica, incorpora le icone sotto pochi kilobyte e mantieni le immagini più grandi come normali file.

Come usare il risultato

Il data URI mantiene il tipo originale del file, per esempio data:image/png;base64, seguito dai byte codificati, e la riga di stato mostra quanti kilobyte di testo ha prodotto. Usa i tre pulsanti di copia a seconda della destinazione: l'URI semplice per un valore src o href, il tag <img> per l'HTML (aggiungi poi un testo alt significativo), oppure la riga CSS per un foglio di stile.

Avvertenze pratiche

• Una lunga stringa Base64 rende il file HTML o CSS più pesante e più lento da leggere, e viene scaricata di nuovo con ogni pagina che la contiene. Gzip o Brotli recuperano parte del sovraccarico, ma i dati dell'immagine sono già compressi, quindi il risparmio è limitato.
• Se il tuo sito usa una Content Security Policy, img-src deve consentire gli URI data:.
• Molti client di posta bloccano o rimuovono i data URI, quindi fai dei test prima di affidarti a essi nelle newsletter.
• Comprimi o ridimensiona prima l'immagine: una sorgente più piccola produce una stringa molto più corta.

Buoni candidati per l'incorporamento

Icone piccole, immagini segnaposto minuscole, spinner di caricamento, loghi semplici e immagini nelle demo HTML di un solo file sono l'ideale. Foto, banner hero e qualsiasi immagine mostrata su molte pagine è meglio servirle come file separati, così il browser può metterle in cache. La codifica avviene nel tuo browser e il testo che copi non lascia mai il tuo dispositivo finché non lo incolli tu stesso da qualche parte.