15 – Immagini HTML

Le immagini possono migliorare il design e l’aspetto di una pagina web.

Esempio

<img src="immagine_Roma.jpg" alt="Roma Capitale Italia">

Esempio

<img src="immagine_palla.jpg" alt="Palla da calcio">

Esempio

<img src="immagine_pizzeria.jpg" alt="Pizzeria al taglio">

Sintassi delle immagini HTML

Il tag <img> HTML viene utilizzato per incorporare un‘immagine in una pagina web.
Le immagini non sono tecnicamente inserite in una pagina web; le immagini sono collegate a pagine web.
Il tag <img> crea uno spazio di contenimento per l’immagine di riferimento.
Il tag <img> è vuoto, contiene solo attributi e non ha un tag di chiusura.

Il tag <img> ha due attributi obbligatori:

  • src – Specifica il percorso dell’immagine
  • alt – Specifica un testo alternativo per l’immagine

Sintassi

<img src="url" alt="testo alternativo">

L’attributo src

L’ src attributo required specifica il percorso (URL) dell’immagine.

Nota: quando una pagina web viene caricata, è il browser, in quel momento, che riceve l’immagine da un server web e la inserisce nella pagina. 
Pertanto, assicurati che l’immagine rimanga effettivamente nello stesso punto rispetto alla pagina Web, altrimenti i tuoi visitatori riceveranno un’icona di collegamento interrotto. 
L’icona del collegamento interrotto e il alt testo vengono visualizzati se il browser non riesce a trovare l’immagine.

Esempio

<img src="img_peperoncino.jpg" alt="Peperoncino calabrese">

L’attributo alt

L’ alt attributo required fornisce un testo alternativo per un’immagine, se l’utente per qualche motivo non può visualizzarla (a causa di una connessione lenta, un errore nell’attributo src o se l’utente utilizza uno screen reader).
Il valore dell’attributo alt dovrebbe descrivere l’immagine:

Esempio

<img src="img_peperoncino.jpg" alt="Peperoncino calabrese">

Se un browser non riesce a trovare un’immagine, visualizzerà il valore dell’attributo alt:

Esempio

Suggerimento: un lettore di schermo è un programma software che legge il codice HTML e consente all’utente di “ascoltare” il contenuto. 
I lettori di schermo sono utili per le persone con problemi di vista o di apprendimento.


Dimensione immagine – Larghezza e altezza

È possibile utilizzare l’ style attributo per specificare la larghezza e l’altezza di un’immagine.

Esempio

<img src="img_ragazza.jpg" alt="Ragazza in spiaggia" style="width:400px;height:400px;">

In alternativa, puoi utilizzare gli attributi widthheight:

Esempio

<img src="img_ragazza.jpg" alt="Ragazza in spiaggia" width="400" height="400">

Gli attributi widthheight definiscono sempre la larghezza e l’altezza dell’immagine in pixel.

Nota: specificare sempre la larghezza e l’altezza di un’immagine. 
Se la larghezza e l’altezza non sono specificate, la pagina web potrebbe sfarfallare durante il caricamento dell’immagine.


Larghezza e altezza o stile?

Gli attributi widthheightstyle sono tutti validi in HTML.
Tuttavia, suggeriamo di utilizzare l’style attributo. Impedisce ai fogli di stile di modificare la dimensione delle immagini:

Esempio

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px; height:128px;">

</body>
</html>

Immagini in un’altra cartella

Se hai le tue immagini in una sottocartella, devi includere il nome della cartella nell’attributo src:

Esempio

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Immagini su un altro server/sito web

Alcuni siti Web puntano a un’immagine su un altro server.
Per puntare a un’immagine su un altro server, devi specificare un URL assoluto (completo) nell’attributo src:

Esermpio

<img src="https://www.tuosito.com/images/img.jpg" alt="testo alternativo immagine">

Note sulle immagini esterne: le immagini esterne potrebbero essere protette da copyright. 
Se non ottieni il permesso di usarlo, potresti violare le leggi sul copyright. Inoltre, non è possibile controllare le immagini esterne; possono essere improvvisamente rimossi o modificati.


Immagini animate

L’HTML consente GIF animate:

Esempio

<img src="gifAnimata.gif" alt="Testo alternativo" style="width:48px; height:48px;">

Immagine come collegamento

Per utilizzare un’immagine come collegamento, inserisci il <img> tag all’interno del <a> tag:

Esempio

<a href="default.asp">
  <img src="gifAnimata.gif" alt="testo alternativo" style="width:42px; height:42px;">
</a>

Immagine fluttuante

Usa la proprietà CSS float per far fluttuare l’immagine a destra o a sinistra di un testo:

Esempio

<p><img src="gifAnimata.gif" alt="Testo alternativo" style="float:right; width:42px; height:42px;">
Questa immagine contiente bla bla bla ed'è float right.</p>

<p><img src="gifAnimata.gif" alt="Testo alternativo" style="float:left; width:42px; height:42px;">
Questa immagine contiente bla bla bla ed'è float left.</p>

Suggerimento: per saperne di più su CSS Float, leggi il Corso CSS capitolo Float .


Formati immagine comuni

Ecco i tipi di file immagine più comuni, supportati in tutti i browser (Chrome, Edge, Firefox, Safari, Opera):

AbbreviazioniFormato FileFile Estensione
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
Tabella file immagine più comuni, supportati in tutti i browser

Riassunto capitolo

  • Utilizzare l’elemento HTML <img> per definire un’immagine
  • Utilizzare l’attributo HTML src per definire l’URL dell’immagine
  • Utilizzare l’ alt attributo HTML per definire un testo alternativo per un’immagine, se non può essere visualizzata
  • Usa l’HTML widthheight gli attributi o il CSS width height le proprietà per definire la dimensione dell’immagine
  • Usa la proprietà CSS float per far fluttuare l’immagine a sinistra o a destra

Nota: il caricamento di immagini di grandi dimensioni richiede tempo e può rallentare la pagina web. 
Usa le immagini con attenzione e ottimizzale per il web.


Tag immagine HTML

TagDescrizione
<img>Definisce un’immagine
<map>Definisce una mappa immagine
<area>Definisce un’area selezionabile all’interno di una mappa immagine
<picture>Definisce un contenitore per più risorse immagine
Tabella Tag immagini HTML

Per un elenco completo di tutti i tag HTML disponibili, visita il riferimento ai tag HTML.

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.