Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 20 di 58
  • livello principiante
Indice lezioni

Img src, inserire le immagini nel markup (base64, SVG)

Inserire le immagini nel markup sfruttando la codifica base64 per le bitmap o il formato SVG per i vettoriali, senza caricare file esterni.
Inserire le immagini nel markup sfruttando la codifica base64 per le bitmap o il formato SVG per i vettoriali, senza caricare file esterni.
Link copiato negli appunti

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.


Ti consigliamo anche