Immagine in Base64

Questo convertitore da immagine a Base64 trasforma un'immagine in un data URI, una lunga stringa di testo che incorpora l'immagine direttamente, più uno snippet di sfondo CSS pronto all'uso. Puoi inserire un'immagine inline invece di collegarti a un file separato.

Funziona localmente nel tuo browser, quindi la tua immagine viene letta sul tuo dispositivo e non viene mai caricata.

Un data URI porta l'intera immagine dentro il markup, quindi il browser non effettua una richiesta di rete separata per recuperarla. Per piccole risorse come le icone, quel giro di andata e ritorno risparmiato può far sembrare una pagina più veloce.

L'insidia è la dimensione e il caching. Base64 aggiunge circa il 33 percento di sovraccarico perché rappresenta dati binari con un alfabeto di testo limitato, e un'immagine inline non può essere memorizzata nella cache separatamente, quindi viene scaricata di nuovo con ogni pagina che la contiene.

La regola pratica è inserire inline le immagini piccole, icone, piccoli loghi o uno sprite, dove evitare una richiesta vale il sovraccarico, e mantenere le immagini più grandi come file normali che il browser può memorizzare nella cache e caricare in parallelo.

I data URI funzionano ovunque sia accettato un URL: un src di img, uno sfondo CSS o un campo in JSON o in un modello di email. Questo li rende comodi per snippet autonomi.