Les navigateurs affichent par défaut une image dans leurs dimensions d'origine. Ainsi si aucune taille n'est définie, l'utilisateur peut être confronté à un affichage inadéquate et à un ralentissement du chargement de la page HTML.

Si le navigateur connaît par avance les dimensions d'une image le processus de chargement s'en trouvera accéléré, et l'application d'effets spéciaux pourra s'effectuer sans risques d'erreurs.

Plusieurs attributs de la commande <img src ...> permettent le dimensionnement en hauteur et en largeur d'une image à insérer dans une page Web.
Les dimensions d'un élément graphique ont pour origine le coin supérieur gauche.

L'attribut width="Valeur" en pixels définit la largeur.
L'attribut height="Valeur" en pixels définit la hauteur.
<html>
  <head>
    <title>Un titre pertinent</title>
    <meta name="Description" content="...">
    <meta http-equiv="Date" content="01/01/2000">
    ...
  </head>
  <body>
    <img 
        src="Adresse de l'image" 
        width="Valeur" 
        height="Valeur" >
    ...
    Diverses commandes HTML
    ...
  </body>
</html>
Une image JPEG de 320x240 pesant 37 ko
Une image JPEG avec une valeur de :
width="320" et height="240".
La même image JPEG avec une dimension différente de 170x240 pesant 37 ko
La même image JPEG avec une dimension différente :
width="170" et height="240"

Pour ajuster une image à une dimension précise tout en conservant les proportions, il suffit de préciser soit la hauteur, soit la largeur et automatiquement l'une ou l'autre des dimensions s'alignera sur celle que vous aurez spécifié.

Par exemple, vous désirez placer une image dans une cellule d'un tableau mesurant 250 pixels de large. Malheureusement votre image ne fait que 155 pixels sur 199. Pour résoudre ce problème, il suffira de spécifier la largeur de l'image soit un "width" égale à 250 pixels et automatiquement la hauteur s'ajustera à une valeur de 321 pixels.