Incorporando un'immagine si inseriscono i suoi byte all'interno di HTML, CSS o di un altro documento. Può rendere autonomo un piccolo artefatto, ma associa anche l'immagine alla consegna e alla memorizzazione nella cache del documento. Decidi in base al flusso di lavoro completo anziché dare per scontato che meno URL significhino sempre una pagina più veloce.
Costruisci il wrapper corretto
Un'immagine PNG I dati URI iniziano con data:image/png;base64,, seguito dalla rappresentazione Base64 del file originale. A JPEG esigenze image/jpeg; WebP esigenze image/webp. La ridenominazione di un tipo MIME non converte i byte. Se il ricevitore richiede un JPEG, ricodificare l'immagine prima di creare i suoi dati URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">Il segnaposto sopra non è un'immagine funzionante; sostituirlo con l'uscita completa dell'encoder. Se l'output contiene già il file data: prefisso, non aggiungerne un altro. Mantieni bilanciate le virgolette circostanti ed evita le interruzioni di riga introdotte dagli editor di testo RTF.
Calcola la dimensione reale
La porzione codificata necessita di quattro caratteri ogni tre byte di input, arrotondati a gruppi completi. Il prefisso Data URI aggiunge qualcosa in più. Per un file da 30.000 byte, il solo carico utile è di 40.000 caratteri. La compressione HTML può modificare la dimensione trasferita, ma il browser deve comunque analizzare il documento e decodificare l'immagine. Misura la pagina effettiva, non solo il file sorgente.
Un'immagine servita separatamente può essere memorizzata nella cache e riutilizzata in modo indipendente su più pagine. Un'immagine incorporata è legata a ogni documento che la contiene. Le illustrazioni ripetute di grandi dimensioni sono quindi scarsi candidati per l'incorporamento automatico. Piccole icone una tantum in un report autonomo possono rappresentare un compromesso ragionevole.
Controlla la destinazione
La politica di sicurezza dei contenuti può limitare data: immagini. I client di posta elettronica possono rimuovere o rifiutare il contenuto incorporato. Un file visualizzato in anteprima nel browser non dimostra che l'applicazione del destinatario lo visualizzerà. Testa esattamente l'esportazione, il client di posta elettronica o il sistema downstream che devi supportare.
Per le anteprime locali temporanee, un BLOB URL spesso evita di creare una stringa Base64 di grandi dimensioni. Revoca URL quando la sua visualizzazione viene rimossa. Per il file autonomo esportato HTML, potrebbe essere appropriato un dato URI. In entrambi i casi, conserva il testo alternativo e le dimensioni. Vengono trattate considerazioni sulla sintassi e sul browser MDN: URL dei dati.