Illustrare un file HTML aggiungendo delle immagini non è più difficile che farlo con un documento di Word.
Basta posizionarsi nel punto dove si vuole collocare la figura, cliccare sull'icona Image della barra degli strumenti, aprire la finestra di scelta dei file cliccando sull'iconcina gialla della cartella e selezionare il file corrispondente all'immagine che si desidera inserire.
L'unica differenza rispetto ad un desk top publisher tradizionale è che dopo aver selezionato il file ci verrà chiesto se vogliamo introdurre un testo alternativo (alternative text), da visualizzare nel caso in cui l'immagine non fosse disponibile o fosse disabilitata la visualizzazione dell'immagine.
Il testo alternativo aveva importanza negli anni '90 quando i modem usati per accedere ad Internet erano lenti. Poiché scaricare una pagina Web piena di figure poteva richiedere diversi minuti, gli utenti disabilitavano lo scaricamento automatico delle immagini (i browser consentono di farlo tutt'oggi)  e navigavano in modalità testuale.
Quando capitavano su  di un sito che ritenevano potesse essere interessante scaricavano manualmente  le figure una ad una.
Il posizionamento delle immagini all'interno dei file HTML è generalmente un po' più complesso che con i DTP. Supponendo di utilizzare KompoZer, si clicca sull'immgine visualizzata nella modalità Preview per aprire il popup menu e si selezionerà Image Properties.
La finestra di dialogo prevede quattro linguette: Location, Dimensions, Appearence e Links.

La prima (Location) consente di scegliere l'immagine e il testo alternativo e di cambiarli eventualmente.
L'opzione Dimension conente di modificare la grandezza dell'immagine visualizzata specificandone le dimensioni,. In alternativa si può ridimensionare l'immagine con il mouse tirandola per gli angoli.
La linguetta Appearence consente di controllare il posizionamento della finestra all'interno della pagina sia per quanto concerne la sua collocazione che l'ampiezza dei bordi (Solid Border). Impostando un ampiezza dei bordi diversa da zero attorno ala finestra appariranno dei bordi neri. Per cambiare il colore occorre cliccare sullo strumento di selezione dl colore di foreground  (quadratini sovrapposti a destra della casella di selezione del font) e selezionare il colore desiderato (ad esempio nell'immagine qui sopra si è scelto il giallo).
Ma come i lettori avranno immaginato la linguetta più interessante è l'ultima, quella dei Links che consente di associare un collegamento ipertestuale all'immagine in modo tale che se si clicca sulla stessa  il browser salta al rimando indicato.
Una procedura alternativa per associare un link ad una immagine consiste nel selezionare la figura cliccandoci sopra in modalità Preview, e quindi cliccare sull'icona Link della barra degli strumenti, procedendo poi come di consueto.

Dal punto di vista del programmatore per introdurre un'immagine  (priva di link) basta introdurre un singolo TAG  <img>

<img style="width: 200px; height: 200px;" alt="testo_alternativo" src="immagine_selezionata.jpg">

Gli argomenti width e height specificano le dimensioni dell'immagine (se è più grane o più piccola sarà riscalata). L'argomento alt consente di introdurre il testo alternativo e l'argomento src di specificare la URL o l'indirizzo corrispondente al file in cui l'immagine è memorizzata.

Volendo associare un link all'immagine basterà includere il  TAG <img>, di cui sopra, in una normale coppia di TAG <a> </a>

<a href="riferimento.html"><img ...  alt="Link al file riferimento.html" src="immagine_selezionata.jpg"></a>

In maniera analoga dall'interno di una pagina HTML si può fare riferimento a file multimediali di vaio tipo, basta ricorrere alla consueta coppia di TAG <a></a>, ad esempio:

<a href="bip.wav">Bip</a>            Bip
<a href="video.mp4">Video</a>    Video

A differenza di quanto accade con le immagini,  l'esecuzione dei file multimediali potrebbe richiedere la presenza di un programma esterni (player) o addizionali (plugin).

Sapendo che vi sono svariati formati di immagini: BMP, GIF, JPG, PCX, PNG, TIF, TGA, ci si potrebbe chiedere se alcuni sono più adatti di altri per illustrare una pagina Web e perché?
Prima di tutto occorre precisare che per formato di immagine si intende il modo in cui è rappresentata la stessa all'interno del file e non la "grandezza"  della stessa, ovvero lo spazio occupato dalla figura nella pagina HTML.
Poiché le immagini richiedono tipicamente molto spazio di memoria , come i file audio e i filmati del resto, difficilmente si  archivieranno le immagini nel loro formato originale ma sempre in formato compresso per risparmiare spazio.

Per quanto concerne i formati compressi bisogna distinguere fra  compressione reversibile e compressione irreversibile.

La compressione reversibile genera una rappresentazione dell'immagine più piccola di quella originale,  che può essere usata per compattare i file quando debbono essere archiviati o trasmessi  ma consente sempre di ricostruire perfettamente l'immagine originale riespandendo il file.

Te tecniche di compressione irreversibile consentono di comprimere notevolmente di più rispetto alle precedenti ma ad un prezzo: non garantiscono la perfetta ricostruzione dell'immagine originale.

Ad esempio l'immagine sottostante è stata compressa con un algoritmo irreversibile.

Le immagini in formato BMP sono tipicamente non compresse per cui occupano molto spazio. Non sono generalmente l'ideale per le applicazioni considerate.
Il formato TIF può essere sia non compresso che compresso. Quest'ultimo, in particolare, è l'ideale per la rappresentazione di immagini in bianco e nero o in scala di grigi, per cui si adopera tipicamente per questo scopo quando è richiesta una compressione reversibile.
La caratteristica peculiare del formato GIF per quanto concerne la costruzione di siti Web è la possibilità di  creare delle immagini animate.
Il formato JPG che si basa su di uno schema di compressione irreversibile consente di ottenere delle rappresentazioni fortemente compresse per cui è il formato d'elezione quando si tratta di scaricare delle Immagini da Internet.
Il formato PNG si presta ad un impiego analogo a quello del JPG . A differenza del precedente è completamente libero da brevetti per cui viene preferito dai fautori dell'Open Source.

Terminiamo la lezione ricordando che le procedure sopra illustrate non esauriscono i possibili impieghi delle immagini nelle pagine HTML,c'è infatti anche  la possibilità di ricorrere alle cosiddette client-side image maps  associando ad aree di una fotografia o di un disegno delle azioni, tipicamente dei rimandi (link),  creando dei quadri sinottici.
Tali tecniche saranno oggetto di successive lezioni.