In HTML possiamo inserire le immagini indicando la sorgente dei dati che le comporranno, quasi sempre si tratta di file esterni ma possiamo inserire queste informazioni anche direttamente all'interno del markup.
Questa pratica può essere utilizzata per particolari ottimizzazioni, ad esempio per non avere tempi di attesa nel caricamento del file esterno (in genere per piccole immagini o vettoriali).
base64 e bitmap
Per le immagini bitmap (le foto per intenderci) possiamo inserire i dati sfruttando una codifica chiamata "base64", che trasforma i file binari in codice ASCII. La sintassi dell'attributo src diventa:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU ...">Come si vede c'è una codifica piuttosto criptica che segue il prefisso data:image/png;base64,. Si tratta del "payload", ovvero dell'immagine vera e propria che dovremo aver codificato sfruttando uno dei molti servizi online disponibili come base64encode.org o base64-image.
Attenzione! La codifica può essere anche parecchio ingombrante e appesantire parecchio il nostro file.
SVG
Le immagini vettoriali si prestano molto di più ad essere inserite direttamente nell'HTML, del resto il formato SVG stesso è un formato di markup. In questo caso la dimensione dell'immagine non dipende dallo spazio che occupano sullo schermo ma dalla loro complessità.
Questa soluzione si rivela ideale per i logo o per piccole icone. Vediamo un esempio:
<img alt="Logo HTML.it - SVG" src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<style>.style0{fill:#fff200;}</style>
<path d="M93.2 50C93.2 73.7 73.8 93 50 93 26 93.2 6.8 73.8 6.8 50 6.8 26 26 6.6 50 6.6 73.8 6.7 93.2 26 93.2 50z" class="style0"/>
<path d="M99.7 50c0 27.4-22.3 49.7-49.7 49.7C22.6 99.7.3 77.4.3 50 .3 22.4 22.6 0 50 0 77.5.2 99.7 22.5 99.7 50zM50 6.6C26 6.7 6.8 26 6.8 50 6.8 73.7 26 93 50 93c23.8 0 43.2-19.4 43.2-43.3C93.2 26 73.8 6.6 50 6.6z"/>
<path d="M54.5 26.4l5.7 2 5.6 11.2-.2 2.8-9 5.2-.7 1v1l.2.7-.8.6-.2 4.5V64l-.6 1.3 5.7 14.4V84l-2 4.2-1.4.2-1-.8V82l-7-15.6-1.5-12-2.5 8v17.7l.8 1-7.4 6.6-1.6.3-1-1.5L39 82l.3-1-.3-12.6V58.8l1.5-9.6h-.8l.4-2.7v-1.7l-7.5-7.4v-1.7l9-10.5h5.4l.6-.5V23l-.4-.8v-3l.4-.4.4-2.6 1.7-1.3 1.4-.5 2.2 1 1.3 1 .3 2V21l-.3.8-.2 1.2-.8 1.6 1 1.8zm2.3 9v2.8l-.5 1-.3 1.3V45l4.8-4.3-2.6-4.5-.5-.8h-1zm-13-1.4h-2l-2.5 3 3.4 5.4.5-1.6.6-6.8zm-2-16l.3 4.5 4.6-2.6-4.7-2zm5.2-2.4L44.7 12l-2.3 3 4.6.6zm3.4-2L51.8 9l-4.5.8 2.8 4m8.8-2l-4-2.3-.3 4.8 4.3-2.4zm-2.3 6.6l5.2.7-1.8-4.4-3.5 3.4m-.3 3.8l3.5 2.6 1-4-4.2 1"/>
</svg>'>Anche in questo caso abbiamo utilizzato un prefisso che stavolta è data:image/svg+xml, che facciamo seguire dalla definizione del markup SVG. Il risultato è ancora il logo di HTML.it.