In HTML, the Image tag is used to display the image on the web page. Images are not directly inserted into the document, they are linked to the HTML pages. The
tag creates a holding space for the referenced image. It can be styled and manipulated using CSS properties.
- There are two required attributes for a
tag. They are:
- Src attribute – Define the path of the image.
- Alt attribute – It specifies the alternate text for the image.
Tips : You can also make the HTML images clickable , by using the tag inside the tag.
Estimated reading time: 6 minutes
Syntax:
The tag does not require the closing tag in HTML. But in XHTML , it contains both the opening
tag and closing
tag.
<img src="URL" alt="text">
Sample of the HTML ![]()
Tag:
Here is the example for HTML image tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML <img> Tag</title>
</head>
<body>
<h2>Example of the HTML <img> Tag</h2>
<p>Share Ponit Anchor</p>
<img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo">
</body>
</html>
Result:
Download Sample File:
Use CSS property to style the ![]()
tag:
You can also use the CSS styling property to change the initial appearance of an image.
Sample of the ![]()
tag with CSS property :
<!DOCTYPE html>
<html>
<head>
<title>HTML <img> Tag</title>
<style>
img {
border-radius: 10%;
border: 2px dashed #C40655;
width: 250px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>Example of the HTML <img> Tag</h2>
<div>
<img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo">
</div>
</body>
</html>
Result:
Src and Alt Attributes:
The “src” attribute stands for source. This attribute tells the browser where to find the image you want to display. The value of the href attribute can be either the file name or its URL.
The “alt” attribute stands for alternate text. This attribute is used to inform the browser that if it can’t find the image, then just display the given text.
Tips : It is recommended to include keywords in “alternate text” , it will improve the ranking of the website in search engines.
Sample of the HTML ![]()
tag with the src and alt attributes:
<!DOCTYPE html>
<html>
<head>
<title>HTML <img> Tag</title>
</head>
<body>
<h2>Example of the HTML <img> Tag</h2>
<img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo" width="256" height="256">
</body>
</html>
Note : Always try to insert the image with height and width, else it may flicker while displaying on a webpage.
Result:
HTML ![]()
tag with “loading” Attribute:
In HTML, there is a new loading attribute is available to deferring image and iframe loading until they are close to being shown. This is one of the parts of Chromium (as of v76).
The loading attribute will support the following values:
- Lazy – It delays the load until the image or iframe reaches a distance threshold from the viewport.
- Eager – This value loads the resource immediately.
- Auto – It is the default behavior , loads the resource.
Supported Images Formats:
The HTML standard doesn’t list what image formats to support, so each user agent supports different formats.
Here is the image file formats that are most commonly used on the web page:
th, td{ padding: 20px; }
| Abbreviation | File Format | MIME Type | File Extensions | Browser Compatibility |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng |
- Chrome
- Edge
- Firefox
- Opera
- Safari | | BMP | Bitmap file | image/bmp | .bmp |
- Chrome
- Edge
- Firefox
- Opera
- Safari | | GIF | Graphics Interchange Format | image/gif | .gif |
- Chrome
- Edge
- Firefox
- Opera
- Safari | | ICO | Microsoft Icon | image/x-icon |
- .ico
- .cur |
- Chrome
- Edge
- Firefox
- Opera
- Safari | | JPEG | Joint Photographic Expert Group image | image/jpeg |
- .jpg
- .jpeg
- .jfif
- .pjpeg
- .pjp |
- Chrome
- Edge
- Firefox
- Opera
- Safari | | PNG | Portable Network Graphics | image/png | .png |
- Chrome
- Edge
- Firefox
- Opera
- Safari | | SVG | Scalable Vector Graphics | image/svg+xml | .svg |
- Chrome
- Edge
- Firefox
- Opera
- Safari | | TIFF | Tagged Image File Format | image/tiff |
- .tif
- .tiff | None. Built-in; add-ons required | | WebP | Web Picture format | image/webp | .webp |
- Chrome
- Edge
- Firefox
- Opera |
Image Loading Errors:
There may occur some errors while loading an image. This can happen in the following situations:
- The “src” attribute is empty (” “) or “Null”.
- The “src” URL is the same as the URL of the page the user is currently on.
- Some corruption of the image prevents it from being loaded.
- The metadata of the image is corrupted in such a way that makes it impossible to retrieve its dimensions, and there are no dimensions specified in the attributes of the
tag.
- The file format is not supported by the user agent.
Attributes:
The HTML image tag supports the Global Attributes and the Event Attributes.
th, td{ padding: 20px; }
| Attribute | Value | Description |
|---|---|---|
| align |
- left
- right
- top
- bottom
- middle | This attribute defines the alignment of the image in reference to surrounding elements. Not supported in HTML 5. | | alt | text | It specifies the alternate text for the image. | | border | pixels | Used to define the width of the border around the image. It is not supported in HTML 5. | | crossorigin | | | This attribute will help to specify whether the CORS is used when loading the image. Images, uploaded via CORS, can be used in the element without limiting the functionality of the latter. | | anonymous | CORS requests from this element will not pass credentials. | | use-credentials | The CORS requests from this element will pass credentials. It is a new attribute in HTML 5. | | height | pixels | This value specifies the height of the image. | | hspace | pixels | It is used to define the spaces at the left and right sides of the image. Not supported in HTML5. | | ismap | ismap | This tag specifies that the contents of the tag are a server-side image map. | | longdesc | URL | It is used to specify the URL address with a detailed description of the image ( For a short description of the image, use the alt attribute). Not supported in HTML5. | | src | URL | This value defines the source of the image. | | usemap | #mapname | Helps to define a link to the element , which contains the coordinates for the client map image. | | vspace | pixels | It specifies the spaces at the top and bottom of the image. Not supported in HTML5. | | width | pixels | This value defines the width of the image. |
Deprecated Attributes:
Here the list of deprecated HTML attributes and its alternate methods are listed below:
th, td{ padding: 20px; }
| Attribute | Values | Description | Alternate |
|---|---|---|---|
| align |
- left
- right
- top
- bottom
- middle | This attribute will help to specify the alignment of the image in reference to surrounding elements. Centers the HTML image of the image in reference to surrounding elements. | The CSS vertical-align and/or float properties. | | border | pixels | It defines the width of the border around the image. | The CSS border property. | | hspace | | This is used to specify the horizontal spaces around the image. | Use the CSS margin property instead. | | name | | Specifies a name for the element | You can use the “id” attribute. | | vspace | pixels | This will define spaces at the top and bottom of the image. | Use the CSS margin property instead. |
Browser Support:
Related Articles:
- HTML
- Definition Description Tag
- HTML
Center Tag - Basic HTML Definitions and Usages in the Real World
- HTML
Code Tag - HTML Aside Tag
The post HTML
Top comments (0)