Hai bisogno di un inserire una icona con sfondo trasparente in una pagina html? In sostanza, vuoi inserire uno sfondo png?
PNG è un estensione del file che sta per Portable Network Graphic. Si tratta di un formato di file grafica raster che supporta la compressione senza perdita di informazioni.
Al contrario del formato JPG, in cui la trasparenza non è supportata (lo sfondo rimarrà bianco), lo sfondo png permette la trasparenza e l’opacità.
Sfondi trasparenti con il formato png
Lo sfondo trasparente di una immagine è possibile solo nel caso in cui le immagini siano in formato png (o gif, se vuoi, ma questo ultimo formato è usato per immagini con pochi colori).
Per rendere un’immagine trasparente anche se ha uno sfondo devi utilizzare la famosa bacchetta magica (scontornarla) in Photoshop, fissare la soglia adeguata e cancellare lo sfondo. Prova a fare dei test.
Creare un’immagine con sfondo trasparente e aggiungerci uno sfondo diverso, invece, è molto più semplice.
Supponendo tu abbia Photoshop puoi semplicemente salvarla per il web. File >Salva per il Web e Dispositivi (in CS2 – ad esempio – è solo “Salva per il Web”, per le versioni successive sicuramente saprai trovare questa voce nel menu).
Se il file ti è arrivato da un amico che aveva Photoshop e tu non ce l’hai, ti consiglio di usare GIMP (programma di editing immagini open source).
In questo caso clicchi File > Esporta (ed esporti il file con estensione png).
Ricorda che il png e non il jpg supporta le trasparenze.
Con questo programma potrai anche aprire i file in formato psd.
I formati per il web
Quali sono i formati usati sul web?
Sono prevalentemente questi:
- immagine JPEG (compresso)
- immagine PNG (lossless ossia senza perdita di informazioni; dipende dal tipo di applicazione utilizzata)
- immagine GIF(compresso)
Dopo aver creato una immagine con sfondo trasparente, inserirai il soggetto della tua immagine (potrai importare nuove immagini o icone o creare forme).
Successivamente salverai l’immagine con l’estensione png.
Sfondi trasparenti: alcuni siti utili
Se vuoi trovare immagini con sfondi trasparenti in rete ho preparato questa lista di link per te. Potrai scaricare uno sfondo trasparente, aprirlo con photoshop o Gimp, e inserire nella tua immagine altri oggetti (dovrai poi salvare tutto in png).
Cerca lo sfondo trasparente che più ti piace:
- Link a sfondi trasparenti su Pixabay
- Link a sfondi trasparenti su Pinterest
- Link a sfondi trasparenti su Freepik
Inserire un’immagine in una pagina html
Dopo aver creato la tua immagine vorrai inserirla in una pagina html.
Per inserire un’immagine in una pagina html ti servirà questo codice:
<img src=”nomeimmagine.png”>
nomeimmagine è il nome del file.
Ovviamente nel caso in cui tu abbia inserito l’immagine in una sottocartella avrai qualcosa come nomecartella/nomeimmagine.png
Se vuoi scrivere in html ti consiglio il software Notepad ++.
Se ti interessa studiare l’html, ti consiglio di acquistare qualche libro utile alla tua formazione.
Bene, ora hai imparato come inserire un’immagine con sfondo trasparente in una pagina html.
Spero di esserti stata utile!
Nata nel 1974, Alexia si interessa al web nel lontano 1999 grazie ad un corso di formazione regionale. Crea le sue prime pagine html dapprima con programmi wysiwyg (Dreamweaver), poi direttamente con notepad ++. Inizia a creare siti web nel 2001. Pur essendo amante delle interfacce, studia php assecondando la sua grande curiosità. Lavora in campo digitale per molti anni e si butta poi nel favoloso mondo della seo. Artemedialab nasce come laboratorio sperimentale nel 2008 e diventa nel 2020 azienda individuale.