HTML <img> width attribute
Definition and Usage
width attribute specifies the width of the image in pixels.
Tip:Specify height and width attribute 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 understand the size of the image and therefore cannot reserve appropriate space. As a result, the layout of the page will change when the image is loaded. (The following part elaborates on this point in detail).
Tip:Please do not use height and width attribute is used to scale the image. If the height and width If the attribute is used to shrink the image, then the user must download images with large file sizes (even if the image looks very small on the page). The correct approach is to process the image into an appropriate size with software before using it on a webpage.
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 width="pixels">
Attribute value
| Value | Description |
|---|---|
| pixels | Specify the width of the image in pixels (for example, width="100"). |
More examples
Change image size - Create filled images
Height and width attributes have a hidden feature, that is, 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 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 needs 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, 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 shrunk. This means the ratio of height to 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 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 only 1px wide and high):
Tip:We provide the above examples to help you better understand the usage of height and width attributes. If you just need a large area of solid color blocks 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 loads? This is because the browser constantly adjusts the layout of the page in order to display each loaded image. The browser decides 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. 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 are loaded independently of the source files.
However, this is not the most effective way to display the 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, thus accelerating the display of the document and avoiding the movement of the document content. Both of these attributes require integer values and are represented in pixels to indicate the size of the image. 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 tricks, there are still some tricky negative effects when using them. Even if the user has turned off the automatic download of images, the browser still needs to display the space reserved for the image at the specified size. This usually leaves the reader with an empty frame, with a meaningless icon inside, 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 the specified size is not used, the browser will simply place an image icon in the text, which at least allows some text to be read.
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 TextIn this way, 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 |
