Imparare l’HTML – Gli attributi delle immagini (img)

In questo articolo sul linguaggio HTML esamineremo gli attributi che influenzano il tag img, cioè il tag specifico che si occupa della visualizzazione e gestione di foto ed immagini all’interno di una pagina HTML.

La presenza di immagini in un sito web aiuta gli utenti a seguire e comprendere meglio il contenuto proposto, indirizza meglio nelle scelte e nelle interazioni, pubblicizza eventi e prodotti o più in generale rende migliore l’estetica della pagina stessa. Inoltre includere elementi visivi aiuterà a migliorare la SEO ed il posizionamento con i motori di ricerca, purché impostati adeguatamente secondo delle regole ben precise.

Inserire una foto o un immagine in una pagina non si limita solo ed esclusivamente al tag img, ma necessità di una corretta impostazione con attributi specifici ed importanti che andremo a vedere qui di seguito.

Attributi del tag “img”

Gli attributi disponibili per questo tag sono numerosi ed è bene ricordare almeno i più comuni.

Devo inoltre specificare che in questo articolo non affronterò la modifica degli stili e attributi CSS per la modifica estetica delle immagini, ma mi limiterò a descrivere i fondamentali dell’HTML per il tag img.

Se vuoi imparare il CSS clicca qui.

Risorsa

L’attributo più importante, src=”” serve a richiamare il file sorgente da visualizzare, cioè l’immagine vera e propria. Tra le “virgolette” va digitato il percorso completo in cui si trova il file o l’URL.

Se il file è collocato nella stessa cartella in cui è contenuta la pagina html, basterà digitare il nome dell’immagine con il formato giusto, altrimenti se il file si trova in una sottocartella (o in una cartella differente), dovremo scrivere tutto il percorso.

Differentemente, se l’immagine deriva da un URL esterno, digitarlo intergalmente all’interno delle virgolette.

<img src="/foto.png" >    <!-- se l'immagine e la pagina sono nella stessa cartella -->

<img src="/desktop/immagini/foto.png" >  <!-- se l'immagine è collocata in una sottocartella -->

<img src="http://www.byte-post.com/immagini/esempio/ecc.png" >  <!-- immagine da URL -->

N.B. il linguaggio HTML è case sensitive, quindi digitare per esempio immagine.jpg è differente da immagine.JPG

Testo alternativo

<img src="#"  alt="testo alternativo">    <!-- alt è l'attributo del testo alternativo -->

Avevamo già visto questo attributo nell’articolo precedente su “i tag HTML da conoscere“, l’attributo alt serve a definire il testo alternativo a sostituzione dell’immagine, nel caso il browser non riesca a caricarla per problemi di connessione o una scorretta configurazione del tag.

Come nel seguente esempio:

Probabilmente ti sarà già capitato, nel caso non venga caricata l’immagine il testo alternativo servirà a descrivere il contenuto dell’immagine stessa. Infatti il testo digitato in questo attributo dovrà essere dettagliato e specificare correttamente la natura e l’argomento dell’immagine.

Oltre ad essere d’aiuto agli utenti in caso di problemi, il testo alternativo servirà anche a far indicizzare l’immagine dai motori di ricerca che non riescono ad elaborare i contenuti visivi.

Questo attributo è molto importante, ricordati sempre di inserirlo o la sua assenza porterà ad una penalizzazione SEO.

Height & Width

Questi due attributi definiscono la dimensione dell’immagine, non sono obbligatori, ma sono essere utili in diverse occasioni per scalare l’immagine in base al contenuto o alla pagina del sito rispetto alle dimensioni di default.

Un esempio di codice è questo:

<img src="immagine.jpg" height="60" width="30">

Si possono costringere/ancorare le dimensioni dichiarando anche uno solo dei due attributi senza deformare l’immagine, e mantenere cosi le proporzioni originali.

<!-- ipotizziamo un immagine 100px per 100px -->

<img src="immagine100x100.jpg" height="60">  

<!-- dichiarando l'altezza di 60px, anche la larghezza verrà riadattata a 60px; -->

Per maggiori dettagli riguardo gli attributi del tag img consiglio di visitare il sito w3school, che contiene una lista di attributi e tag più aggiornata.