Dimension des images

A quoi correspondent les dimensions d’une image ?

Les dimensions d'une image correspondent à sa taille, exprimée en pixel, par exemple : 600px x 200px.
Pour rappel, les pixels sont un ensemble de points qui constituent une image. Le nombre de points présent dans l’image constitue la définition de l’image.
La résolution est, quant à elle, différente de la définition. La résolution d’une image est le rapport entre le nombre de pixel dans une image et sa taille réelle lorsqu’elle apparaît sur un support physique. 

Pourquoi la dimension des images est importante ?

Les dimensions d'une image peuvent être modifiées sur l'affichage d'une page web et ne pas respecter les dimensions originales.
De plus, le rendu d’une image ayant un rapport largeur/hauteur trop différant du rapport largeur/hauteur indiqué dans le fichier source, alors l’image risque d’apparaître déformée, créant ainsi une mauvaise expérience utilisateur.

Comment définir les dimensions d’une image ?

il est important de respecter les dimensions originales et de ne pas déformer l'image de plus de 5% lors de l'affichage sur la page WEB.

Les dimensions peuvent être définies dans le code HTML, par exemple, grâce aux attributs width=500 et height=400 sur la balise <img> affichant celle-ci :

<img src="mon-image" width="500" height="400" />

Il est également possible de gérer les dimensions d'une image dans un style CSS, cette technique à l'avantage d'être plus flexible et offre davantage de possibilités :

img {
    max-width:100%;
    height:auto;
}