Incorporare immagini in HTML usando base64
Nell'ambito dello sviluppo web, ci sono momenti in cui potremmo voler incorporare un'immagine direttamente all'interno del nostro codice HTML, senza fare riferimento a un file esterno. Una delle tecniche per fare ciò è l'utilizzo della codifica base64. Ma cos'è esattamente base64 e come lo usiamo per le nostre immagini? Scopriamolo insieme!
Cos'è base64?
Base64 è un sistema di codifica utilizzato per rappresentare dati binari (come immagini) in formato ASCII. Esso converte i dati in una stringa di caratteri che può essere facilmente incorporata in un documento HTML o CSS.
La codifica base64 non è intesa per cifrare o mascherare dati, ma piuttosto per rappresentarli in una forma che possa essere trasferita in modo sicuro attraverso sistemi che gestiscono solo testo.
Come convertire un'immagine in base64
La conversione di un'immagine in base64 può essere realizzata utilizzando vari strumenti online o linguaggi di programmazione. Qui, esploreremo un metodo semplice utilizzando uno strumento online:
- Visita un convertitore online di immagini in base64, come base64-image.de.
- Carica l'immagine che desideri convertire.
- Dopo aver caricato l'immagine, lo strumento fornirà una stringa base64. Copiala.
Incorporare l'immagine base64 in HTML
Una volta ottenuta la stringa base64 dell'immagine, è possibile incorporarla direttamente nel tuo codice HTML utilizzando il tag < img > nel seguente modo:
< img src="data:image/[TIPO];base64,[STRINGA_BASE64]" alt="Descrizione dell'immagine">
Dove:
- [TIPO] è il tipo di immagine (ad es. "png", "jpg", "gif").
- [STRINGA_BASE64] è la stringa base64 che hai ottenuto dal convertitore.
Quando incorpori immagini in base64, tieni presente che il tuo file HTML aumenterà in dimensioni. Questo perché l'immagine è ora rappresentata come testo all'interno del documento.
Riduci la dimensione se necessario con tool online come https://tinypng.com. Questi siti permetto di ridurre il peso di un immagine mantenendo quasi tutte le caratteristiche originali. Un immagine per il web non dovrebbe superare i 100Kb.
Conclusione
La codifica delle immagini in base64 offre un modo comodo per incorporare risorse visive direttamente nei tuoi documenti HTML o CSS, eliminando la necessità di riferimenti esterni. Questo può essere particolarmente utile in situazioni in cui si desidera mantenere tutto in un unico file, come in email o in documenti standalone. Tuttavia, è importante essere consapevoli delle implicazioni in termini di dimensioni del file e dei tempi di caricamento.