Codificatore di Immagini Base64

Quando includere immagini è utile

Candidati da valutare e testare prima dell’inclusione:

• Icone sotto 2 KB, Risparmia una richiesta HTTP con un sovraccarico trascurabile.
• Modelli email - I client di posta non supportano gli URI di dati in modo uniforme. Verifica i client di destinazione e usa immagini CID o ospitate quando necessario.
• Segnaposto Hero (LQIP), Versione sfocata a bassa qualità inclusa, immagine completa caricata dopo.
• SVG usati una sola volta, Poiché SVG è testo, un URI dati correttamente codificato in percentuale può essere più corto di Base64 a seconda dei caratteri e della formattazione.

Cattivi candidati:

• Immagini grandi, Inflazionare del 33% per un’immagine da 500 KB è 166 KB di spreco.
• Immagini riutilizzate su più pagine, L’inclusione disabilita la cache del browser tra le rotte.
• CSS critico, Includere immagini pesanti gonfia il percorso critico.

Aspettative sulle dimensioni

Formato URI dati

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

• Schema data:
• Tipo MIME
• Indicatore ;base64,
• I byte codificati

SVG è un caso speciale

Base64 aumenta i byte originali dell’SVG di circa un terzo prima della sintassi esterna, mentre la codifica percentuale aggiunge lunghezza solo ai caratteri da sottoporre a escape. La forma più corta dipende dall’SVG. La forma testuale deve usare un valore data:image/svg+xml,... correttamente codificato in percentuale: il semplice token ;utf8 non è un parametro standard degli URI dati e caratteri #, %, virgolette o spazi non sottoposti a escape possono rompere l’URI. Questo strumento controlla la struttura SVG, ma non rimuove script, gestori di eventi o riferimenti esterni. Esamina gli SVG non attendibili prima dell’uso.