In this article, you will learn about HTML image, how to add an image on html document or web page, common Image formats and also about the implementation of different types of HTML image attributes with the help of examples.
The images are very important to simplify complex things as well as improve appearance of a web page.
A few years back, most of the webpages on the Internet contained only text content which provided a very boring and uninteresting experience to the users. With the passage of time, publishers became aware and started using images in their content, due to which users started getting more interest towards the content. With this article we are going to discuss how to add an image on html document or web page which will make your webpage more beautiful and attractive.
HTML Image
The html <img> tag is used to display or embed image on a webpage. The <img> tag is an empty tag that does not have a closing tag, only attributes are written in it. The src and alt are the most common attributes used in html <img> tag .
Syntax:
<img src="url" alt="alternatetext">
Now let's understand html <img> tag with the help of following example:
<!DOCTYPE html><html>
<head>
<title>html image tag example</title>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo of img tag.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" />
</body>
</html>
Output
Image attributes in html
In the following table we have mentioned various attributes used in html <img> tag along with description;
| S.No | Attributes | Description |
|---|---|---|
| 1. | src | To define path to the image. |
| 2. | alt | Creates alternate text for image. |
| 3. | crossorigin | To use cross-origin access with canvas, we can import image to third-party using this attribute. |
| 4. | height | Defines the image height. |
| 5. | width | Defines the image width. |
| 6. | ismap | Defines the image as a server-side image map. |
| 7. | loading | With this we can define whether a browser should load the image immediately or after the requirement of given condition. |
| 8. | longdesc | A URL is specified to the detailed description of the image. |
| 9. | referrerpolicy | It tells us which referrer information should we use during the fetching of image. |
| 10. | sizes | Defines sizes of the image to the different page layouts. |
| 11. | srcset | It gives us a image file list which we can use in different situations. |
| 12. | usemap | To define a image as client-side image map. |
Now, Let's understand these HTML image attribute one by one in detail;
The src attribute
The src attribute of <img> tag is used to specify the source or path of the image.
When a webpage is loaded on the browser for the first time, the browser receives the image from the web server and inserts it into the page. If that image is deleted from the web server by mistake or cannot be spotted, then the user will get to see the broken image icon.
Now let's illustrate src attribute of image tag with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html src attribute of image tag example</title>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo of src attribute of img tag.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" />
</body>
</html>
Output
The alt attribute
The alt attribute of <img> tag is used to specify the alternative text to inserted image.
When, for some reason, the image is not showing on the web page at that time with the help of alt attribute you can get the alternate text show instead of the image.
Now let's understand alt attribute of image tag with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html alt attribute of image tag example</title>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo of alt attribute of img tag.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" />
</body>
</html>
Output
The width and height attribute
The width and height attribute of <img> tag is used to specify the width and height of the inserted image.
Now let's illustrate width and height attribute of image tag with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html width and height attribute of image tag example</title>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo of width and height attribute of img tag.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" width="500" height="500" />
</body>
</html>
Output
The style attribute
The style attribute of <img> tag is also used to specify the width and height of the inserted image.
Now let's understand style attribute of image tag with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html style attribute of image tag example</title>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo of style attribute of img tag.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" style="width:500px;height:600px;" />
</body>
</html>
Output
Note : All these attributes (width, height and style) are valid in HTML but still we suggest to use the style attribute for sizing the image as it prevents the style sheet from resizing the images.
The title attribute
The title attribute of <img> tag is used to specify the title on the inserted image.
In the following example, we have described the use of the title attribute in the <img> tag;
<!DOCTYPE html><html>
<head>
<title>html title attribute of image tag example</title>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo of title attribute of img tag.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" title="Programming and Tutorials" />
</body>
</html>
Output
The border attribute
The border attribute of <img> tag is used to specify the border width around the inserted image.
In the following example, we have discussed the use of border attribute in the <img> tag;
<!DOCTYPE html><html>
<head>
<title>html border attribute of image tag example</title>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo of border attribute of img tag.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" width="200" height="200" border="5"/>
</body>
</html>
Output
Note: The border attribute of <img> isn't supported in HTML5. We recommend to use CSS instead of this attribute.
The align attribute
The align attribute of <img> tag is used to specify the allignment of the inserted image.
Now let's understand align attribute of img tag with the help of following example;
<!DOCTYPE html><html>
<head>
<title>html align attribute of image tag example</title>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo of align attribute of img tag.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" align="right" />
</body>
</html>
Output
Note: The align attribute of <img> isn't supported in HTML5. We recommend to use CSS instead of this attribute.
Set image as a link
You can use image as a link in html by adding <img> tag inside <a> tag.
In the following example, we have discussed how to set an image as a link in HTML;
<!DOCTYPE html><html>
<head>
<title> set image as a link example</title>
</head>
<body>
<a href="https://www.answersjet.com">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" />
</a>
</body>
</html>
Output
Add Animated Image
html also allows us to insert animated images which are in .gif format. To insert animated images, all you need to do is to add the path or url inside the src attribute of the <img> tag.
Now, with the following illustration we will understand about the adding animated images;
<!DOCTYPE html><html>
<head>
<title>html animated images example</title>
</head>
<body>
<img src="E:/images/US-lion-love-jokes-by-giphy.gif" />
</body>
</html>
Output
 |
| Source: Giphy |
Set image as background
In html you can insert image on background of any web page by using background-image property of CSS inside style attribute.
Now let's illustrate how to insert an image as background with the help of following example;
<!DOCTYPE html><html>
<head>
<title> set image as background example</title>
<style>
body {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU');
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h2>HTML Tutorials</h2>
<p>This is the demo for setting-up image as background.</p>
</body>
</html>
Output
How to add Image in HTML from a Folder
If you want to insert images, placed in sub-folders or root servers in an HTML page, then you have to include the folder name in the src attribute.
In the following example, we have discussed how to add image in html from a folder;
<!DOCTYPE html><html>
<head>
<title>add image in html from a folder example</title>
</head>
<body>
<img src="E:/images/answersjet.png" alt="Answersjet logo" />
</body>
</html>
Output
How to add image from URL
If you want to insert images, offered in an HTML page from a web server or another website, then you have to include the absolute URL in the src attribute.
In the following example, we have discussed how to add image from URL;
<!DOCTYPE html><html>
<head>
<title>add image from url example</title>
</head>
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" />
</body>
</html>
Output
Common Image Formats
In the following table, we have added the most common image formats with abbreviations and file extensions that are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera).
| Abbreviations | File Format | File Extension |
|---|---|---|
| PNG | Portable Network Graphics | .png |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| SVG | Scalable Vector Graphics | .svg |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| APNG | Animated Portable Network Graphics | .apng |
Conclusion
From above we have learnt about HTML image, how to add an image on html document or web page and also about the implementation of different types of HTML image attributes with the help of examples. The images are very important to simplify complex things as well as improve appearance of a web page. The html <img> tag is used to display or embed image on a webpage.