Data URL Base64 spiegate (e come crearne una)
Una data URL è un modo per incorporare un file direttamente in una pagina web, in un foglio di stile o in un’email, senza richieste separate. I byte dell’immagine vengono codificati in Base64 e trasportati nell’attributo src stesso.
L’anatomia di una data URL
Una data URL segue la forma data:<tipo media>;base64,<dati>. Per un PNG si legge data:image/png;base64,iVBORw0KGgo... Il prefisso dice al browser due cose: che tipo di dati sono (il loro MIME type) e che sono codificati in Base64. Il browser li decodifica e li mostra esattamente come un file scaricato.
Perché i browser le accettano nativamente
I browser hanno un decodificatore integrato per le data URL, quindi un’immagine incorporata così funziona ovunque funzioni un tag <img>, senza plugin e senza giri extra. Lo stesso vale in CSS con background-image e url(), e nelle email per incorporare immagini senza allegati.
Il compromesso centrale: niente richiesta, ma più byte
Poiché Base64 aggiunge circa il 33%, una data URL è circa un terzo più grande del file originale e conta nella dimensione del tuo HTML o CSS. Per piccole risorse riutilizzabili — icone, logo, miniature — è un prezzo giusto. Per foto e file da più megabyte è uno spreco.
Quando usarle
Usa le data URL per una manciata di piccole risorse che devono apparire all’istante o viaggiare in un singolo file: firme email, strumenti a file unico, demo offline o favicon. Per immagini grandi o numerose vince la cache del browser dei file reali.
Crearle e decodificarle
Lo strumento Immagine in Base64 costruisce una data URL pronta da incollare da qualsiasi file PNG, JPG, WebP, GIF, BMP o AVIF, e Base64 in Immagine fa l’inverso: rileva il formato e restituisce il file originale. Entrambi girano nel tuo browser, quindi nulla viene caricato.