Accelera le prestazioni del tuo sito con l’utilizzo dei tag height e width

Nella creazione di una pagina HTML c’è un’importante aspetto che spesso non consideriamo e che tendiamo ad ignorare. Si tratta dell’utilizzo dei tag height e width che dovrebbero sempre essere specificati nel caso in cui si voglia visualizzare un’immagine.
Se il browser non viene informato delle dimensioni dell’immagine da caricare allora procede caricando prima l’immagine per calcolarne le dimensioni e solo dopo prosegue con il caricamento del resto della pagina. Se invece i tag relativi alle dimensioni dell’immagine sono specificati, allora il browser è in grado di riservarle immediatamente lo spazio necessario nella pagina e prosegue molto più velocemente (e soprattutto contemporaneamente) nella visualizzazione degli altri elementi. Ecco quindi come dovrebbero essere scritti i tag IMG:

<img id="myimage" height="250" width="450" 
src="http://www.sito.it/myimage.png" alt="La mia immagine" />

Infine vi ricordo che non è da sottovalutare che vi è anche un guadagno in termini di usabilità: un visitatore apprezza molto il fatto di poter iniziare a leggere i contenuti testuali anche prima che sia completato il caricamento delle immagini.