Tada File

Da immagine a data URI

Trasforma un’immagine in un data URI completo, pronto da incollare in un attributo src HTML o in un valore url() CSS.

Da immagine a data URI converte un file immagine in un data URI: una riga di testo che contiene sia il tipo di file sia l’immagine codificata in Base64. Puoi incollarlo direttamente in un attributo src di img o in un valore url() CSS, e l’immagine si vede senza un file separato. Il tipo MIME del prefisso viene preso dal tuo file, e i byte dell’immagine non vengono modificati.

Come usare Da immagine a data URI

  1. 1

    Apri un’immagine

    Trascina, scegli o incolla qualsiasi file immagine, come un’icona, un logo o una piccola grafica.

  2. 2

    Ottieni il data URI

    Il data URI completo, che inizia con data:image/, compare con la sua lunghezza e il peso approssimativo.

  3. 3

    Copialo

    Clicca Copia data URI, oppure usa Copia HTML o Copia CSS per uno snippet già pronto.

  4. 4

    Incollalo nella pagina

    Usalo ovunque funzioni un normale URL di immagine, come un tag img o uno sfondo CSS.

Cosa fa

Tipo MIME corretto
Il prefisso corrisponde al tuo file, per esempio image/png, image/jpeg o image/svg+xml.
Byte originali
Il file viene codificato così com’è, quindi qualità e peso non cambiano per una ricompressione.
Snippet pronti da copiare
Ottieni un tag img completo o una regola background-image con il data URI già inserito.
Privato
Il data URI viene creato nel browser, quindi l’immagine non viene caricata.

Domande

Cos’è un data URI?

Un data URI è un link che contiene il file stesso invece di puntare a esso. Per le immagini inizia con data:image/png;base64, o un prefisso simile, e i browser lo mostrano come un normale URL di immagine.

Come uso un data URI nel CSS?

Clicca Copia CSS per ottenere una regola background-image con l’URI completo dentro url(), e incollala nel tuo foglio di stile.

Quando è meglio evitare i data URI?

Evitali per le immagini grandi e per quelle usate in molte pagine. Il testo codificato è circa un terzo più grande del file, e il browser non può memorizzarlo nella cache separatamente.

Le immagini data URI funzionano nelle email?

Il supporto varia. Molti programmi di posta, compresi alcuni servizi webmail, non mostrano le immagini data URI, quindi prova la tua email o usa un’immagine ospitata online.

Quali tipi di immagine sono supportati?

Qualsiasi immagine che il browser può aprire, come JPG, PNG, GIF, WebP, AVIF e SVG. Le foto HEIC di iPhone vengono prima convertite in PNG, quindi il loro data URI usa image/png.