Lezione 14 - Corso Base Html

La Dimensione delle Immagini in Html


Dimensione delle Immagini

Nell'ultima lezione abbiamo inserito un'immagine senza considerare le sue dimansioni.
E' chiaro che se inseriamo un'immagine troppo grande, nella nostra pagina web, risulterebbe ingombrante e chiassosa, se troppo piccola, non si vedrebbe bene, non darebbe l'effetto e la rilevanza che noi vorremmo. Perciò quando inseriamo un'immagine nel nostro documento è molto importante che abbia le misure giuste dandogli delle dimensioni più appropriate.

La dimensione di un'immagine, o di un'elemento che occupa dello spazio, in html viene definita assegnado un'altezza (width) e una larghezza (height).
<img src="Cucina.jpg" width ="500" height="500"/>

Ora abbiamo inserito un'immagine e gli abbiamo dato una dimensione ben precisa facendogli occupare uno spazio ben definito e deciso da noi. Ci rendiamo conto però, che non abbiamo fatto un buon lavoro, perché l'immagine risulta sgranata ed è proprio brutta da vedere.

Conosciamo il fatto che un'immagine se ingrandita o ridotta in maniera distruttiva l'immagine ne risente in termini di qualità, quindi è buona norma, quando si lavora su un'immagine, ridimensionarla ed elaborarla con un programma di grafica.

Quindi, i passi da fare sono questi:

- elaboriamo e dimensioniamo l'immagine con un programma di grafica (le dimensioni devono essere all'incirca le dimensioni finali, un ottimo risultato si ottiene facendo più prove),

- salviamo l'immagine nella stessa cartella del nostro documento html,

- poi inseriamo l'immagine nel codice html assegnadogli la larghezza e l'altezza dalle dimensioni che servono a noi.