Il tag <IMG> in Html

In questa lezione del corso HTML ti spiego come inserire una immagine in un documento tramite il tag <img>

<img>

Il tag <img> indica al browser web di visualizzare un'immagine nella pagina HTML.

E' un elemento vuoto ossia non ha un tag di chiusura.

Come si usa?

Per utilizzare il tag img devi specificare almeno due attributi:

l'attributo src indica il percorso dell'immagine. E' obbligatorio.
l'attributo alt specifica un testo alternativo da utilizzare se l'immagine non è disponibile

In questo esempio, l'attributo src specifica il percorso dell'immagine "foto.jpg" e l'attributo alt fornisce una descrizione testuale dell'immagine.

Quando il browser incontra il tag <img> incorpora l'immagine all'interno della pagina web.

Perché usare l'attributo alt? L'attributo "alt" è facoltativo nel tag <img>. Tuttavia, il testo alternativo dell'immagine è una buona pratica ed è molto importante perché migliora l'accessibilità del sito, in quanto viene letto dagli screen reader (es. browser vocali) usati dagli utenti con disabilità visive. Inoltre, migliora l'esperienza utente perché viene visualizzato dai browser quando il caricamento dell'immagine fallisce o nelle connessioni molto lente. Infine, è molto utile per l'indicizzazione e il posizionamento della pagina web sui motori di ricerca.

Puoi inserire il tag <img> nel documento HTML solo all'interno della sezione body.

Ti faccio un esempio pratico.

<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<p>Questo è il primo paragrafo del testo.</p>
<img src="/foto/paesaggio.gif" alt="esempio di immagine">
...
</body>
</html>

In questo documento c'è un tag <img> che richiama una immagine.

Il tag <img> indica al browser di visualizzare l'immagine "paesaggio.gif" che si trova nella directory "/foto" del sito web.

Perché usare le immagini in una pagina web?

Le immagini facilitano la comunicazione e migliorano l'esperienza dell'utente perché rendono il contenuto informativo della pagina più interessante e coinvolgente.

Inoltre, l'uso delle immagini migliora anche l'ottimizzazione della pagina sui motori di ricerca.

Nota. La descrizione fornita nell'attributo "alt" di una immagine fornisce ai motori di ricerca ulteriori informazioni sul contenuto della pagina. Per ottimizzare ulteriormente l'immagine, il nome del file dell'immagine dovrebbe essere descrittivo e contenere parole chiave rilevanti per il contenuto della pagina. Ad esempio, se l'immagine è una foto di un gatto, il nome del file dovrebbe contenere parole chiave come "gatto". In questo modo, i motori di ricerca possono comprendere più rapidamente il contenuto dell'immagine e associarlo al contenuto della pagina.

Gli attributi del tag <img>

Il tag <img> ha diversi attributi che puoi utilizzare per personalizzare la visualizzazione dell'immagine.

src
Questo attributo indica la sorgente dell'immagine, ossia il percorso e il nome del file che vuoi visualizzare. E' un attributo obbligatorio del tag <img>.
<img src="foto.jpg">
alt
Questo attributo indica un testo alternativo e fornisce una descrizione testuale del contenuto dell'immagine. E' facoltativo ma fortemente consigliato perché migliora l'accessibilità e l'ottimizzazione della pagina sui search engine.
<img src="foto.jpg" alt="testo alternativo">
width
Specifica la larghezza dell'immagine in pixel. E' facoltativo ma consigliato per renderizzare la pagina più rapidamente sul browser.
<img src="foto.jpg" width="100px">
height
Specifica l'altezza dell'immagine in pixel. E' facoltativo ma consigliato perché velocizza il rendering della pagina web sul browser.
<img src="foto.jpg" height="50px">
title
Fornisce un titolo aggiuntivo all'immagine. Puoi usarlo per inserire ulteriori informazioni sull'immagine.
<img src="foto.jpg" title="titolo dell'immagine">
longdesc
Fornisce una descrizione dettagliata dell'immagine. E' utile nei browser non grafici.
<img src="foto.jpg" longdesc="descrizione lunga">
usemap
Ti permette di utilizzare una griglia dell'immagine. Tramite l'attributo "usemap" puoi indicare quale mappa, creata tramite il tag <map>, vuoi associare all'immagine.
<img src="foto.jpg" usemap="#mappa">
...
<map name="mappa">
sizes
Questo attributo specifica le dimensioni dell'immagine in relazione al layout della pagina.

<img src="foto.jpg" size="(min-width: 800px) 50vw, 100vw">
srcset
Questo attributo fornisce al browser diverse versioni dell'immagine in base alla dimensione dello schermo dell'utente. E' utilizzato in combinazione con l'attributo "sizes".

<img src="foto.jpg" srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w">
align
Ti permette di indicare l'allineamento dell'immagine rispetto al restante contenuto della pagina. Ad esempio, per allineare l'immagine a sinistra (align="left") oppure a destra (align="right").
<img src="foto.jpg" align="left">
Questo attributo è ancora funzionante ma obsoleto perché puoi ottenere gli stessi risultati usando un foglio di stile CSS.
style
Questo attributo ti permette di applicare uno stile CSS all'immagine.
<img src="foto.jpg" style="width:100px; height:50px; align:left;">
class
Questo attributo ti permette di associare l'immagine a una classe CSS.

<img src="foto.jpg" class="nomeclasse">

L'utilizzo degli attributi del tag <img> può influire sulla dimensione e sulla velocità di caricamento della pagina web. Pertanto, ti consiglio di utilizzarli in modo efficace.

Qualche consiglio finale sull'utilizzo delle immagini su una pagina web.

Dimensioni e compressione delle immagini
Le dimensioni di una immagine si misurano tramite il peso in KB (KiloByte) del file dell'immagine. Le immagini troppo grandi rallentano il caricamento della pagina, influenzando negativamente l'esperienza dell'utente e il posizionamento sui motori di ricerca. Ti consiglio di utilizzare un software di editing delle immagini (ad esempio Gimp, Adobe Photoshop, TinyPNG, ImageOptim, ecc. ) per ridimensionare e comprimere le immagini in modo da ridurre il tempo di caricamento. Ottimizza le immagini soprattutto per i dispositivi mobili, poiché la maggior parte degli utenti oggi naviga su internet tramite smartphone e tablet. Quindi, devi trovare un equilibrio tra la qualità dell'immagine e la sua dimensione.
Utilizza il formato giusto
Esistono diversi formati di immagini che puoi usare sul web tra cui JPEG, PNG e GIF. Ogni formato ha i suoi vantaggi e svantaggi in termini di dimensioni del file, qualità dell'immagine e supporto per la trasparenza. Scegli il formato giusto per ogni immagine in base alle esigenze del sito web. Ad esempio, per immagini con molti colori il formato PNG o JPG riduce la dimensione in KB (kilobyte) del file dell'immagine rispetto al formato GIF.