The dimensions of an image correspond to its size, expressed in pixels, for example: 600px x 200px.
As a reminder, pixels are a set of points that make up an image. The number of points present in the image constitutes the definition of the image.
The resolution is different from the definition. The resolution of an image is the ratio between the number of pixels in an image and its actual size when it appears on a physical medium.
The dimensions of an image can be modified during the display of a web page and not respect the original dimensions.
In addition, rendering an image with an aspect ratio that is too different from the aspect ratio specified in the source file may cause the image to appear distorted, creating a poor user experience.
It is important to respect the original dimensions and not to deform the image by more than 5% when displaying it on the WEB page.
The dimensions can be defined in the HTML code, for example, thanks to the attributes width=500 and height=400 on the <img> tag displaying it :
<img src="image" width="500" height="400" />
It is also possible to manage the dimensions of an image in a CSS style, this technique has the advantage of being more flexible and offers more possibilities :
img {
max-width:100%;
height:auto;
}