Tag HTML img: come inserire le immagini nel proprio sito web
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.
Certificati SSL di IONOS
Proteggi il tuo dominio 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.
Articoli simili
Tag div in HTML: tutto ciò che c’è da sapere sull’uso del container div
Poiché il tag div non ha caratteristiche semantiche proprie, il suo uso è stato raccomandato dall’introduzione di HTML5 solo se non sono disponibili elementi più adatti. In questo articolo imparerete tutto sul container div, apprenderete a utilizzarlo grazie a esempi pratici e scoprirete perché questo tag non ha quasi più alcun ruolo nell’HTML.
Un esempio di intestazione per il vostro sito web
Il tag style HTML è il modo migliore per progettare l’aspetto dei singoli elementi di un sito web e quindi costruire in modo ottimale la pagina. In questo articolo scoprirete esattamente cos’è il tag style HTML, com’è strutturato e quali attributi HTML sono compatibili con esso, imparando come incorporare il tag nel vostro codice con molta facilità.
_target: definire gli obiettivi dei link in HTML
Se desiderate includere dei link sul vostro sito web, potete utilizzare l’attributo HTML target per determinare dove deve aprirsi il link. In questo modo, decidete se le/gli utenti rimangono sul vostro sito web o se invece passeranno a un altro sito. In questo articolo potete scoprire come usare l’attributo HTML _target e cosa dovete tenere a mente nel farlo.
