Immagini sono una parte essenziale del web design. Rendono una pagina web attraente per un visitatore. Possono essere facilmente incluse in un documento HTML utilizzando il tag <img>.

• src: attributo richiesto. Il suo valore è il percorso alla posizione dell'immagine. Il percorso può essere assoluto e relativo;

• alt: attributo richiesto. Fornisce un testo alternativo che può essere visualizzato quando l'immagine non può essere resa;

• width e height: specifica la dimensione dell'immagine in pixel. Senza questi attributi un'immagine verrà resa nella sua dimensione originale.

Attributo alt

La descrizione dell'immagine dovrebbe essere informativa e significativa. Aiuta a descrivere l'immagine per le persone con disabilità visive o che non possono vederla. In questo modo, il browser leggerà l'attributo alt, e un utente può capire perché un sito web ha questa immagine.

Immaginiamo il seguente esempio. Hai una fonte sulle corse di cavalli. Vuoi mostrare come i concorrenti si preparano per la corsa.

Valore errato per l'attributo alt sarà:

Valore corretto per l'attributo alt sarà:

Il testo alternativo "Un uomo a cavallo" è troppo generico e manca di contesto. Fornisce una descrizione di base, ma non trasmette dettagli utili sulla scena o sullo scopo dell'immagine.

Attributo src

L'attributo src può utilizzare sia percorsi assoluti che relativi per specificare la posizione del file immagine.

Percorso Assoluto

Specifica l'URL completo del file immagine sul server web. Ad esempio:

Significa che il file immagine si trova al link https://example.com/images/image.jpg su internet. Chiunque può accedere all'immagine utilizzando questo link.

Per favore, esamina il seguente esempio reale nel code sandbox qui sotto:

Nota

Per esaminare la struttura delle cartelle dei file, trascina il cursore sul lato sinistro dell'interfaccia del code sandbox. Nell'angolo in alto a sinistra, troverai un pulsante a forma di hamburger rappresentato da tre strisce. Cliccando su questo pulsante, verrai indirizzato all'organizzazione delle cartelle dei file.

Percorso Relativo

Specifica la posizione del file immagine rispetto al documento corrente. Per esempio:

Significa che il file image.jpg si trova nella directory images.

Si prega di ispezionare l'esempio reale fornito nel sandbox di codice qui sotto. Troverai la cartella images, che contiene il file sun.png.

Nota

Per riassumere la differenza tra percorsi relativi e assoluti, un percorso assoluto rappresenta il collegamento effettivo che chiunque può utilizzare per accedere a un'immagine. D'altra parte, un percorso relativo è un collegamento nel contesto del proprio progetto. Si riferisce a un'immagine locale e a un percorso che chiunque all'interno del progetto può accedere.