Tag HTML img: come inserire le immagini nel proprio sito web
La redazione di IONOS3 mins
Il tag img vi consente di aggiungere facilmente immagini al vostro sito web. Nel farlo, sono supportati numerosi formati. Una serie di attributi diversi rende il tag img ancora più facile da integrare in HTML.
Evita che venga visualizzata un'allerta nella barra degli indirizzi e ottieni la fiducia dei clienti con un sito crittografato tramite SSL.
A cosa serve il tag img?
Il tag HTML img inserisce immagini e grafici nei siti web, svolgendo più o meno la funzione di segnaposto. Quando si richiama un sito web, l’attributo src memorizzato rimanda all’effettiva posizione di memorizzazione dell’immagine. L’immagine viene quindi incorporata nel sito web. Oltre all’attributo src, questo tag necessita di un attributo alt che memorizza un testo alternativo nel caso in cui l’immagine non possa essere visualizzata. I formati JPEG, GIF e PNG, tra gli altri, sono supportati dal tag img in HTML.
Qual è la sintassi del tag HTML img?
La sintassi di un tag img è molto chiara e richiede solo pochi componenti. La variante più semplice è questa:
<img src="macchinarossa.png" alt="Macchina sportiva rossa al semaforo">In ogni caso, è più sicuro definire sempre almeno l’altezza e la larghezza dell’immagine sul sito web quando si utilizza un tag img. In questo modo è possibile assicurarsi che la foto venga visualizzata correttamente. Queste impostazioni vengono effettuate tramite gli attributi HTML width e height. Il codice appropriato si presenta, ad esempio, così:
<img src="macchinarossa.png" width="500" height="200" alt="Utilitaria rossa al semaforo">Anche l’attributo loading è consigliato per i tag img in HTML. Con esso, l’immagine corrispondente viene caricata solo quando le/gli utenti scorrono fino alla posizione corrispondente. Per fare ciò, impostate il valore dell’attributo loading su lazy. Nel codice appare così:
<img src="macchinarossa.png" width="500" height="200" alt="Utilitaria rossa al semaforo" loading="lazy">Quali attributi possono essere utilizzati per il tag img in HTML?
Oltre agli attributi width, height e loading menzionati, esistono numerosi altri attributi supportati dal tag img in HTML. Questi includono tutti gli attributi globali, per la gestione di eventi e altri attributi specifici. Di seguito trovate un elenco degli attributi che possono essere utilizzati con il tag img:
| Attributo | Valore | Descrizione |
| alt | "Testo" | Obbligatorio; specifica un testo alternativo per l’immagine. |
| crossorigin | anonymus, use-credentials | Determina quali siti web di terze parti possono accedere all’immagine corrispondente attraverso uno script. |
| decoding | auto, sync, async | Definisce come e se un’immagine può essere decodificata. |
| height | Pixel o percentuale | Imposta l’altezza dell’immagine sul sito web. |
| ismap | true, false | Controlla l’accesso dell’immagine a una mappa di immagini lato server. |
| loading | auto, eager, lazy | Determina quando un’immagine deve essere caricata. |
| referrerpolicy | no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url | Determina se l’immagine può provenire anche da una fonte non sicura. |
| sizes | sizes | Definisce le dimensioni delle immagini per i diversi layout di pagina. |
| src | URL | Obbligatorio; specifica l’indirizzo URI dell’immagine. |
| srcset | Elenchi URL | Inserisce un elenco di immagini per scopi diversi, ad esempio per dispositivi e dimensioni diverse. |
| usemap | #mapname | Collega l’elemento a una specifica mappa di immagini. |
| width | Pixel o percentuale | Imposta la larghezza dell’immagine. |
Per realizzare un sito web individuale e professionale, MyWebsite Now di IONOS è lo strumento perfetto. Vi permette di creare la vostra presenza online interamente secondo le vostre idee, anche senza grandi conoscenze preliminari. Se invece preferite ricevere supporto nella creazione del sito web, il nostro team di esperte ed esperti è a vostra disposizione.
