Da immagine a Base64 o data URI
Image to Base64 / Data URI
Codifica un’immagine in una stringa Base64 o in un data URI pronto da incollare in CSS, HTML o JSON.
Incorporare un'immagine come data URI toglie una richiesta e aggiunge un terzo alla sua dimensione, per sempre e a ogni visita, perché un data URI non può essere messo in cache separatamente dal documento che lo porta. Questo strumento codifica il file e mette tutte e due le metà di quello scambio davanti agli occhi prima che lo si incolli.
Trascina qui un’immagine
Viene codificata in questa scheda. Base64 non è compressione: fa crescere il file di un terzo.
Come si usa
Trascinare l'immagine
Il tipo lo decidono i byte, non l'estensione: un .png che in realtà è un JPEG è cosa comune, e un'immagine incorporata con il tipo sbagliato non viene disegnata.
Leggere il verdetto
Sotto i 4 KB circa incorporare è gratis; oltre i 100 KB circa si sta ritardando il primo disegno della pagina per una risorsa che altrimenti sarebbe stata scaricata in parallelo e messa in cache.
Scegliere come avvolgerlo
Il CSS lo dà nella forma url(), l'HTML come tag img e il JSON come stringa fra virgolette: da incollare così com'è invece di montarlo a mano.
Domande frequenti
Il Base64 comprime l'immagine?
Il contrario. Codifica tre byte come quattro caratteri, quindi il testo è esattamente il 33⅓% più lungo del file, prima di qualsiasi compressione di trasporto. È una codifica, non una compressione.
Conviene incorporare così anche un SVG?
No. Un SVG è già testo, quindi codificarlo come URL costa circa il 10% invece del 33% e il risultato resta leggibile e confrontabile. Il Base64 su un SVG è l'errore comune che questa pagina segnala quando ne vede uno.
Perché rifiuta i file sopra gli 8 MB?
Perché il data URI sarebbe più di 10 MB di testo su una riga sola. A quella dimensione quasi tutti gli editor, e gli strumenti per sviluppatori di parecchi browser, diventano inservibili; e un'immagine incorporata da 8 MB non è mai stata la risposta giusta in partenza.
Può ricevere da
Comprimere PNG
PNG Compressor
Riduce la tavolozza e riscrive il flusso deflate per far dimagrire un PNG senza cambiarne le dimensioni in pixel.
Immagine segnaposto
Placeholder Image
Genera un segnaposto a tinta unita o sfumato di qualsiasi dimensione, con le misure scritte sopra.
Da Base64 a immagine
Base64 to Image
Decodifica una stringa Base64 o un data URI riportandolo a un’immagine visibile e scaricabile.
Codificatore e decodificatore Base64
Base64 Encoder & Decoder
Codifica e decodifica in Base64 e Base64URL testo o file, trattando correttamente l’UTF-8.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Codificatore e decodificatore Base64
Base64 Encoder & Decoder
Codifica e decodifica in Base64 e Base64URL testo o file, trattando correttamente l’UTF-8.
Da Base64 a immagine
Base64 to Image
Decodifica una stringa Base64 o un data URI riportandolo a un’immagine visibile e scaricabile.
Comprimere PNG
PNG Compressor
Riduce la tavolozza e riscrive il flusso deflate per far dimagrire un PNG senza cambiarne le dimensioni in pixel.
Da SVG a data URI per CSS
SVG to CSS Data URI
Codifica un SVG come data URI da usare come sfondo CSS, applicando l’escape solo dove serve per tenerlo corto.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.