Fissa qui gli strumenti. Restano salvati in questo browser.
Fissa uno strumento e il suo adesivo arriva qui.
Trasforma un'immagine in un data URI pronto per CSS o HTML, oppure riconverti un data URI in un file immagine.
Un data URI porta un file dentro l'indirizzo stesso: data:image/png;base64,iVBORw0KGgo…. Dopo data: viene il tipo MIME, poi un indicatore ;base64 facoltativo che dice come è codificato il contenuto, e infine il contenuto dopo una virgola. Ovunque un browser accetti l'URL di un'immagine, come src in HTML o url() in CSS, accetta anche un data URI e mostra l'immagine senza un'ulteriore richiesta. Il formato è definito nella RFC 2397.
Base64 scrive ogni 3 byte come 4 caratteri, quindi l'immagine codificata è circa il 33% più grande del file. Un'immagine inline è anche legata al documento che la contiene: il browser non può metterla in cache separatamente, e viene trasferita di nuovo con ogni pagina o foglio di stile che la ripete.
Per questo i data URI vanno bene per poche immagini piccole, come un'icona di uno o due kilobyte o un placeholder, e non per le fotografie. Lo strumento ti avvisa quando il risultato supera i 10 KB circa.
Un file SVG è testo, quindi può entrare in un data URI come testo: data:image/svg+xml;charset=utf-8,…. Solo alcuni caratteri vanno codificati con il percent-encoding: quelli che chiuderebbero l'URL o le virgolette che lo racchiudono, e quelli che un URL non può contenere così come sono. Un # non codificato, frequente nei valori dei colori, apre il frammento dell'URL e tronca l'immagine. Questo strumento codifica %, #, <, >, ", &, il backslash, gli spazi e i caratteri di controllo, e scrive i caratteri fuori da ASCII come sequenze di escape UTF-8. Decodificando il risultato si riottiene lo stesso testo SVG. La forma testuale viene proposta quando il file è UTF-8 valido.
La forma con codifica URL resta leggibile e, dato che è ancora testo semplice, di solito gzip e Brotli la comprimono meglio del Base64. Quale forma sia più corta prima della compressione dipende dal file, per questo lo strumento mostra entrambe le dimensioni.
L'immagine viene letta dal tuo browser e codificata da JavaScript sul tuo dispositivo. Nell'altra direzione funziona allo stesso modo: il data URI incollato viene decodificato nella pagina e ti viene offerto come file. Né l'immagine né il data URI vengono caricati.
No. Il file viene letto e codificato dal tuo browser, e lo strumento non fa alcuna richiesta di rete con il file. Lo stesso vale per un data URI che incolli per riconvertirlo in file.
Base64 rappresenta ogni 3 byte del file con 4 caratteri di testo, il che aggiunge circa il 33%. La breve intestazione iniziale, come data:image/png;base64, aggiunge qualche byte in più.
Quando l'immagine è piccola, intorno a qualche kilobyte, e serve appena la pagina viene renderizzata, così che risparmiare una richiesta conti più della cache. Le immagini più grandi, e quelle condivise da molte pagine, è meglio servirle come file separati.
Sì. Mettilo dentro url("…") in CSS o nell'attributo src di un elemento img. Se il sito invia una Content-Security-Policy, perché l'immagine compaia la policy deve consentire data: come sorgente delle immagini, in img-src o in default-src.