Detailed Height and Width properties

Why use the Height and Width properties

Have you ever seen the contents of a document appear to move erratically when it is loaded. This is because the browser constantly re-adjusts the layout of the page in order to be able to display each loaded image. The browser determines the size of the image by downloading and parsing the width and height of the image, and then leaves a corresponding rectangular space in the display window. The browser then adjusts the display layout of the page so that the image can be inserted into the display. This also tells us that the image is a standalone file, and that it is loaded separately from the source file.

However, this is not the most efficient way to display documents, because browsers must check each image file and calculate their screen space before displaying adjacent and subsequent document content. This can cause a very large delay in the display of the document, interrupting the user's reading.

A more efficient way for creators to specify the size of an image is through the height and width properties of the tag. In this way, the browser reserves the location before downloading the image, speeding up the display of the document, and avoiding the movement of the document content. Both properties require an integer value and represent the image size in pixels. The order in which these two properties appear in the tag is not important.
Problems with height and Width properties

While the height and width properties of the tag can improve performance and allow you to implement some tips, there are some tricky downsides to using them. Even if the user has turned off the ability to automatically download images, the browser has to display the space reserved for the image in the specified size. What is left to the reader is usually an empty frame with a meaningless icon that indicates where the image is placed. At this point the page will look very bad, like it's not done at all, and most of the content is useless. Without these specified dimensions, the browser will simply place an image icon in the text so that there is at least some text in the display to read.

We have no solution to this problem, only one thing to emphasize is to use the ALT attribute and some descriptive text so that the reader knows at least what is missing here. We also recommend that you use these dimension attributes, because we encourage everything that can improve network performance.

Detailed Height and Width properties