The height and width attributes of the HTML <img> tag
Example
Set the width and height of the image to 200 pixels separately:
<img src="/i/mouse.jpg" height="200" width="200" />
Definition and Usage
The height and width attributes of the <img> tag set the size of the image.
Tip:Specifying the height and width attributes for images is a good habit. If these attributes are set, space can be reserved for the image when the page is loaded. Without these attributes, the browser cannot know the size of the image and cannot reserve the appropriate space, so the layout of the page will change when the image is loaded. (The following section explains this point in detail).
Tip:Do not scale images through the height and width attributes. If images are scaled down through the height and width attributes, users will have to download large capacity images (even if the image looks very small on the page). The correct practice is to process the image to the appropriate size with software before using it on the web page.
Further reading:Detailed explanation of height and width attributes
More examples
Changing the size of the image - creating a fill image
The height and width attributes have a hidden feature, which is that it is not necessary 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 fit the reserved space size. Using this method, it is easy to create thumbnails for large images and to zoom in on very small images. However, it should be noted that the browser still has to download the entire file, regardless of how large it ultimately displays, and if the original width and height ratio is not maintained, the image will be distorted.
Another trick in using the height and width attributes is that it can easily fill a page area and also improve the performance of the document. Imagine that if you want to place a colored horizontal strip 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 strip is made from an image with only one pixel:
Using percentage values
The last trick in using the width attribute is to use percentage values instead of absolute pixel values. This will cause the browser to scale the image in proportion to the browser's display window. Therefore, to create a colored horizontal strip 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 regardless of whether it is zoomed in or out. This means that the ratio of the height to the width 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, 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 wide and high):
Tip:You can try our online testing toolTry it yourself!
Tip:The purpose of providing the above examples is to help you better understand the usage of the height and width attributes. If you just need large areas of solid color blocks to decorate the page, a better way isUse CSS to create background color.
Browser support
All browsers support the height and width attributes.
Syntax
<img height="value" />
or:
<img width="value" />
Attribute value
| Value | Description |
|---|---|
| pixels | Height or width values in pixels. |
| percent | Height or width values measured as a percentage of the containing element. |
TIY example
- Adjust image size
- This example demonstrates how to adjust the image to different sizes.
Detailed explanation of height and width attributes
Why use the height and width attributes
Have you ever seen the content of a document move irregularly when it is loading? This is because the browser continuously adjusts the page layout in order to display each loaded image. The browser determines 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, each of which is loaded independently from the source file.
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 significant delays in the display of the document, interrupting the user's reading.
For creators, a more effective method is to specify the image size 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 to indicate the image size. The order of these attributes in the <img> tag does not matter.
problems with the 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 in the specified size. And usually what is left for the reader is an empty frame with a meaningless icon, indicating the position where the image should be placed. At this time, 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, so at least there is some text to read.
For this issue, we do not have a solution yet, but we can emphasize one point, that is to use alt attributeand someDescriptive textThis way, the reader at least knows what is missing. We still recommend using these size properties because we encourage all behaviors that can improve web performance.
