Hai bisogno di inserire un’immagine con sfondo trasparente in una pagina HTML? In altre parole, vuoi utilizzare un’immagine in formato PNG con uno sfondo trasparente? Ecco una guida completa per farlo!
Cos’è il formato 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à.
Creare sfondi trasparenti con il formato PNG
Lo sfondo trasparente è possibile solo se le immagini sono in formato PNG (oppure GIF, sebbene quest’ultimo sia utilizzato principalmente per immagini con una palette di colori limitata). Se hai un’immagine con uno sfondo che vuoi rendere trasparente, puoi utilizzare un software di editing come Photoshop o GIMP.
-
Rendere Trasparente lo Sfondo con Photoshop
- Usa lo strumento “Bacchetta Magica” per selezionare lo sfondo dell’immagine.
- Regola la soglia per assicurarti che l’area selezionata sia precisa.
- Elimina lo sfondo e salva l’immagine:
- Vai su File > Salva per il Web.
- Seleziona il formato PNG e salva il file.
-
Utilizzare GIMP come Alternativa Gratuita
- Apri il file in GIMP
- Vai su File > Esporta.
- Seleziona l’estensione PNG e salva il file.
- GIMP supporta anche il formato PSD, quindi puoi modificare i file Photoshop senza problemi.
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. Attualmente insegnante di informatica nella scuola primaria, docente nei corsi di formazione professionale per l’assolvimento dell’obbligo scolastico, media educator.