description & Usage
The <img> tag is used to display images in HTML documents.
The <img> tag has four main attributes:
- The src attribute: Specifies the path (URL) of the image. This attribute is required.
- The alt attribute: Specifies an alternative text if the image cannot be displayed. This attribute is optional.
- The width attribute: Specifies the width of the image.
- The height attribute: Specifies the height of the image.
Notes
Note: To avoid distortion of the width to height ratio of an image, always specify one side of the image (width or height) and allow the other side to be set automatically.
Note: The width and height attributes are specified in pixel units. In the example below, the image has a width of 500 pixels.
<img src="/pic.jpg" width="500">Note: We can also specify width and height using CSS. Take a look at the example below:
<img src="/pic.jpg" style="width: 500px">Note: When specifying width and height using CSS, you must include a unit of measurement. For example, in the above example we have used px (pixels).
Note: You can also use the <embed> tag to display images, but it is recommended to use the <img> tag.
Browser compatibility and Support
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <img> |
Attributes
| Attributes | Values | Description |
|---|---|---|
| alt |
text
|
Places alt text in place of an element that is not displayed. |
| height |
pixels
|
Determines the height of the corresponding tags on the right. |
| ismap |
ismap
|
Specifies a photo as a map on the server. |
| sizes |
sizes
|
Determines the size and dimensions of the link resource. |
| src |
URL
|
Specifies the source or URL of the audio and video media. |
| srcset |
URL-list
|
It determines the Internet address or the link of audio and video media in different situations. |
| usemap |
#mapname
|
Specifies an image to display to the user as an image map. |
| width |
pixels
|
Determines the width of the corresponding elements on the right. |
Global Attributes
The <img> tag supports the HTML Global Attributes.
Event Attributes
The <img> tag supports the HTML Event Attributes.
Default CSS
Most browsers will display the <img> tag with the following default style:
