CONTATTACI

Blog

Sviluppatrice seduta a gambe incrociate accanto ad un enorme etichetta

html image base64: come incorporare Immagini Base64 in HTML

Il linguaggio HTML gioca un ruolo fondamentale nella creazione di documenti web, e uno degli aspetti più essenziali è l’inclusione di immagini. In questo articolo, esploreremo il significato della codifica HTML img Base64 delle immagini in HTML, analizzando il markup, i tag e gli attributi HTML coinvolti. Inoltre, vedremo come inserire immagini HTML in una pagina web.

 

HTML è il Linguaggio Universale per la Creazione di Documenti Web

HTML, acronimo di Hypertext Markup Language, è il linguaggio di markup per la creazione e la strutturazione dei contenuti su Internet. Ogni documento HTML è composto da una serie di tag e attributi che definiscono la struttura e il significato del contenuto visualizzato su una pagina web.

 

Markup: Significato di ciò che rappresenta l’HTML

Il termine “markup” nel contesto di HTML si riferisce al processo di aggiunta di tag e attributi a un documento per definirne la struttura. Il  linguaggio di markup’ è un insieme di regole che descrivono i meccanismi di rappresentazione o impaginazione di un testo.

Tag e Attributi HTML: Elementi Chiave nel Documento HTML

I tag HTML sono gli elementi di base utilizzati per definire la struttura di un documento. L’elemento chiave per incorporare immagini in HTML è il tag `<img>`. Gli attributi di questo tag specificano dettagli cruciali come la sorgente dell’immagine e le sue dimensioni.

 

Come Inserire Immagini in HTML

L’inclusione di immagini in HTML coinvolge l’utilizzo del tag `<img>` insieme all’attributo `src` per indicare il percorso dell’immagine. Ad esempio:

 

1. <img src="percorso_dell_immagine" alt="testo_alternativo">

La codifica Base64 consente di incorporare direttamente l’immagine nel documento HTML, riducendo il numero di richieste al server. Questo processo coinvolge la conversione dell’immagine in una stringa di testo Base64 e l’inclusione diretta nell’attributo `src`. Vediamo un esempio:

 

1. <div>
2.     <p>Img presa da wikpedia</p>
3.     <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
4. AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
5.     9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
6. </div>

L’utilizzo di immagini in formato Base64 elimina la necessità di richiedere l’immagine separatamente al server, migliorando le prestazioni del sito web attraverso una riduzione dei tempi di caricamento. L’immagine viene quindi inserita direttamente all’interno del tag mediante un particolare codice (per praticità ridotto nell’esempio indicato), il quale sarà poi decodificato dal browser che, quindi, mostrerà la relativa immagine, questa volta però senza che essa venga richiamata esternamente.

Per convertire un’immagine in base64 esistono molteplici metodi, uno tra i più semplici consiste nell’affidarsi al sito Base64 Image Encoder, mediante questo tool online gratuito, sarà possibile selezionare le immagini desiderate, quindi attendere la conversione, verrà poi restituito un apposito codice HTML e/o CSS da copiare e incollare all’interno della propria pagina.

 

In conclusione, l’inclusione di immagini in HTML è un aspetto cruciale del design web. L’utilizzo della codifica Base64 per incorporare immagini direttamente nel documento HTML può contribuire a migliorare le prestazioni complessive del sito web. Comprendere il markup, i tag e gli attributi HTML è essenziale per creare documenti web strutturati e ricchi di contenuti visivi. Con queste competenze, è possibile sfruttare a pieno il potenziale del linguaggio HTML per creare esperienze utente coinvolgenti e efficienti. Si tratta di strumenti in costante evoluzione, ma che spesso fanno fede a risorse che virano a migliorare costantemente le performance di un sito web senza compromettere il documento HTML.

Vuoi saperne di più sul linguaggio html? Non perdere la nostra guida all html e css in italiano!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.