img width, img height attributes
The width, height attributes on the img element:
- the width attribute allows you to specify the width of the static ⁄ dynamic image you want to embed into your HTML document
- the height attribute allows you to specify the height of the static ⁄ dynamic image you want to embed into your HTML document
width, height attributes:
- their value must be a valid positive integer (a positive whole number) expressed in pixels: e.g. width="12" height="12"
- width is a specific attribute → can be applied ONLY on the next HTML5 elements: canvas, embed, iframe, img, input, object, video
- height is a specific attribute → can be applied ONLY on the next HTML5 elements: canvas, embed, iframe, img, input, object, video
- are optional attributes
- image dimensions specified through width and height attributes is a useful information for user agents when rendering the page
Warning
The width and height attributes should be used to specify ⁄give the dimension of the image and not to set the dimension of it thus:
- forcing the browser to resize an image affects:
- the quality of the image: lower
- page loading speed: decreased
- bandwidth consumption: increased
- aspects demonstrated in the video tutorial below
Examples
| <img | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 5. | height | = | pixels | < src="blue" alt="blue" width="50" height="70"> | |||
| 6. | width | = | pixels | < src="blue" alt="blue" width="50" height="70"> |
Video demonstration img width, height attributes
HTML5 img width, height attributes Tutorial
| min | video details |
|---|---|
| 00:02 | width and height attributes on img, video tutorial |
| 00:08 | the width and height attributes should be used to give the dimensions of the image and NOT to set them |
| 00:14 | giving the dimensions of the image → the correct way setting the dimensions of the image → the wrong way |
| 00:21 | the difference between "giving the dimensions" and "setting the dimensions" is presented next |
| 00:44 | "giving the dimensions" |
| 00:44 | the embedded image has the dimensions: 200 x 150; we can add its width=200 and its height=150 in page for the user agents to know it when they render the page |
| 01:02 | no change in page: this information is for user agents |
| 01:08 | now let's say we have a large image |
| 01:44 | its dimensions are: 4608 x 3456; so we can add its width=4608 and height=3456 in page for user agents to know when they render the page |
| 02:09 | about the large image: |
| 02:06 | if you want a smaller image, you need to resize it manually using a proper tool; once the image has been resized, you can embed it into your HTML page; this is the correct way |
| 02:23 | now we will present the wrong way |
| 02:30 | "setting the dimensions" |
| 02:31 | changing image's real dimensions → we force the browser to resize it |
| 02:40 | the browser resized the image with this cost: 1. the quality of the image: lower 2. page's loading speed: decreased 3. bandwidth consumption: increased |
| 02:57 | adding the right (= manually resized) image in page to highlight the difference |
| 03:06 | 1. the quality of the image is affected: a lower quality when the browser has to resize it |
| 03:24 | the loading speed is affected : the speed decreases when the browser has to resize the image note how long it takes for the 1st image to load |
| 03:50 | 2. the loading speed is decreased: 2.94s versus 160ms 3. the bandwidth consumption is increased: 3.9MB versus 7.9KB |