How to Add Image in HTML?
FREE
Overview
In this article, we are going to discuss how to add image in HTML. Images are crucial for beautifying and conveying numerous complicated concepts in a straightforward manner on your website. We can use graphics to improve the document’s layout. In order to know how to add image in HTML on a webpage, we use the <img> tag. We’ll also go through how to add an image to HTML and some of the most commonly used attributes. The <img> tag could contain multiple attributes, such as src, alt, height, and width.
how to add image in html?
A variety of graphic formats are supported by web browsers. The following are some of the most popular formats:
| S No. | Image Type | Short Form | Description |
|---|---|---|---|
| 1 | Graphics Interchange Format | GIF | The optimum format for showing images created with a graphics application is GIF. This format allows for a maximum of 256 colors to be used, with combinations of these colors being used to produce additional colors. |
| 2 | Joint Photographic Expert Group | JPEG | JPEG is the best photo format because it has 1 million colours. |
| 3 | Portable Network Graphics | PNG | Images with transparency or a low color count are best suited to this format. |
Syntax to use img tag
The <img> tag is an empty tag, which implies it can only contain a list of attributes and does not have a closing tag. The syntax of the img tag in HTML is as follows:
Various attributes can be used with the img tag in HTML. Some of them are mentioned below
| Attribute | Values | Description | Example |
|---|---|---|---|
| src | URL/Path | inside the source attribute, the picture URL/Path is specified. | <img src="scaler.jpg"> |
| alt | text | there are two uses of alternative attribute; (i)This property specifies the image's alternative text. When the graphics capability of the browser is disabled or turned off, this appears. (ii)The picture is currently being downloaded. The ALT text is displayed as a tooltip for the image in some browsers. | <img src="scaler.jpg" alt="click here"> |
| height | value in pixels | inside the height attribute, the height of an image is specified. | <img src="scaler.jpg" height="100px"> |
| width | value in pixels | inside the width attribute, the width of an image is specified. | <img src="scaler.jpg" height="100px"> |
Note:
Different types of path of the image in the src attribute.
- If our image is located in the same directory as our HTML file, then type the following path
- If our image is located in a different directory, type the path to that image so that the browser can read it easily, as specified in the example.
- If our image is available on the internet, we may also add it by providing the URL, as shown in the example.
Inserting an image with CSS
Output:
The above image contains the src, alt, height, and width attributes which are created with the help of the img tag.
You can align the image in center, left, right, top, bottom.
Inserting Image without the CSS
Output:
Supported browsers
The img tag in HTML is supported by multiple browsers. Some of them are listed below.
- Google Chrome
- Firefox
- Microsoft Edge
- Opera
- Safari
Learn more
Click the link to learn more about the html image tag
Conclusion
- How to add image in html has been discussed in two ways.
- The article describes how to add an image in HTML, as well as its often used properties.
- The <img> tag in HTML is used to create an interactive layout on a webpage.
- The image tag is used to render an image on a web page and is extensively supported across all browsers.
- It is used with other attributes such as src, alt, height, and width which are used to make a complete image tag.
- We also discussed different types of paths on how to add image in html by adding the src attribute.
- To demonstrate how to add image in HTML, a complete example is provided.