HTML <img> height Attribute
Definition and Usage
height attribute specifies the height of the image in pixels.
Tip:Always specify the height and width attributeIf both height and width are set, space for the image will be reserved when the page is loaded. Conversely, if these properties are not present, the browser does not know the size of the image and cannot reserve appropriate space for it. This will cause the page layout to change during loading (when the image is loaded).
Tip:use height and width Reducing the size of the attribute will force users to download the large image (even if it looks very small on the page). To avoid this, please resize the image using image processing software before using it on the page.
Further reading:Detailed explanation of height and width attributes
Example
An image 600 pixels high and 500 pixels wide:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Syntax
<img height="pixels">
Attribute value
| Value | Description |
|---|---|
| pixels | Specify the height of the image in pixels (for example, height="100"). |
More examples
Changing the size of the image - creating a filled image
The height and width attributes have a hidden feature, which is that people do not need to specify the actual size of the image, that is, these two values can be larger or smaller than the actual size. The browser will automatically adjust the image to make it fit the reserved space size. This method can easily create thumbnails for large images and zoom in on very small images. However, it should be noted that the browser still has to download the entire file, regardless of the final displayed size, and if the original width and height ratio is not maintained, the image will be distorted.
Another trick of using the height and width attributes is that it can easily fill the page area and also improve the performance of the document. Imagine that if you want to place a colored horizontal bar in the document. You do not need to create an image with the full size, instead, you just need to create an image with a width and height of 1 pixel and assign the color you want to use to it. Then use the height and width attributes to expand it to a larger size.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
This is the effect of the above HTML, and this color bar is made from an image with only one pixel:
Using percentage values
The last trick of using the width attribute is to use percentage values instead of absolute pixel values. This will make the browser scale the image according to a certain proportion of the browser's display window. Therefore, if you want to create a colored horizontal bar with the same width as the display window width and a height of 30 pixels, you can do it like this:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
When the size of the document window changes, the size of this image will also change:
Tip:If a percentage-based width value is provided and height is ignored, the browser will maintain the aspect ratio of the image whether it is enlarged or reduced. This means that the ratio of the height to the width of the image will not change, and the image will not be distorted.
Please see the following HTML:
<img src="/i/ct_1px.gif"} width="20%" />
That is to say, if only the percentage value of the width attribute of the image ct_1px.gif is set, a rectangular image will be obtained (because the original ct_1px.gif is a rectangle with only 1px width and height):
Tip:The purpose of providing the above examples is to help you better understand the usage of height and width attributes. If you just need a large area of solid color block to decorate the page, a better way isUse CSS to create a background color.
Detailed explanation of height and width attributes
Why use height and width attributes
Have you ever seen the content of a document move irregularly when it is loading? This is because the browser constantly adjusts the page layout to be able to display each loaded image. The browser decides the size of the image by downloading and parsing its width and height, and then leaves a corresponding rectangular space in the display window. Then the browser adjusts the display layout of the page to insert the image into the display. This also tells us that images are independent files, and they are loaded separately from the source files.
However, this is not the most effective way to display a document, because the browser must check each image file and calculate their screen space before displaying adjacent and subsequent document content. This may cause a significant delay in the display of the document, thereby interrupting the user's reading.
For creators, a more effective method is to specify the size of the image through the height and width attributes of the <img> tag. In this way, the browser reserves a position for the image before downloading it, which can accelerate the display of the document and avoid the movement of the document content. Both of these attributes require integer values and are represented in pixels. The order in which these attributes appear in the <img> tag does not matter.
The problem with height and width attributes
Although the height and width attributes of the <img> tag can improve performance and allow you to implement some small tricks, there are still some tricky negative effects when using them. Even if the user has turned off the automatic download image function, the browser still needs to display the reserved space for the image at the specified size. Usually, this leaves readers with an empty frame, containing a meaningless icon, indicating the position where the image should be placed. At this point, the page will look very bad, as if it has not been completed at all, and most of the content is useless. If these specified sizes are not used, the browser will only place an image icon in the text, at least allowing some text to be readable.
For this issue, we do not have a solution yet, and can only emphasize one point, that is, to use it. alt attribute and someDescriptive TextSo that the reader at least knows what is missing here. We still recommend that you use these size attributes, as we encourage all behaviors that can improve network performance.
Browser Support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
