HTML <img> Image Tag
Tags: learnhtml, htmli
Published: 2021-05-10 08:42:11

---
title: HTML <img> Image Tag
published: true
date: 2021-02-25 05:02:03 UTC
tags: LearnHTML,HTMLI
canonical_url: https://sharepointanchor.com/learn-html/html-img-image-tag/
---

In HTML, the **<img> 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 <img> 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 <img> tag. They are:
  - **Src attribute** – Define the **path of the image**.
  - **Alt attribute** – It specifies the **alternate text for the image**. 

![💡](https://s.w.org/images/core/emoji/13.0.1/72x72/1f4a1.png) **Tips** : You can also make the **HTML images clickable** , by using the **<img>** tag inside the **[<a>](https://sharepointanchor.com/learn-html/html-anchor-tag/)** tag.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 6 minutes

## Syntax:

The <img> tag **does not require the closing tag** in **HTML**. But in **XHTML** , it contains both the **opening <img> tag** and **closing <img/> tag**.

```

<img src="URL" alt="text">

```

## Sample of the HTML <img> 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>

```

[Try it Yourself Online](https://sharepointanchor.com/code/html/image-tag/image-tag-example-1.html)

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/result-43.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-img-tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-img-tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-img-tag.html)

## Use CSS property to style the <img> tag:

You can also use the **CSS styling property** to change the initial appearance of an image.

### Sample of the **<img>** 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>

```

[Try it Yourself Online](https://sharepointanchor.com/code/html/image-tag/image-tag-example-2.html)

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/res-css.png)<figcaption>Result</figcaption>

## 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**.

![💡](https://s.w.org/images/core/emoji/13.0.1/72x72/1f4a1.png) **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 <img> 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>

```

[Try it Yourself Online](https://sharepointanchor.com/code/html/image-tag/image-tag-example-3.html)

**Note** : Always try to insert the image with height and width, else it may flicker while displaying on a webpage.

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/result-1-10.png)<figcaption>Result</figcaption>

## HTML <img> 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:

<style> th, td{ padding: 20px; } </style>

| Abbreviation | File Format | MIME Type | File Extensions | Browser Compatibility |
| --- | --- | --- | --- | --- |
| [APNG](https://en.wikipedia.org/wiki/APNG) | Animated Portable Network Graphics | image/apng | .apng | 
- Chrome
- Edge
- Firefox
- Opera
- Safari
 |
| [BMP](https://en.wikipedia.org/wiki/BMP_file_format) | Bitmap file | image/bmp | .bmp | 
- Chrome
- Edge
- Firefox
- Opera
- Safari
 |
| [GIF](https://en.wikipedia.org/wiki/GIF) | Graphics Interchange Format | image/gif | .gif | 
- Chrome
- Edge
- Firefox
- Opera
- Safari
 |
| [ICO](https://en.wikipedia.org/wiki/ICO_(file_format)) | Microsoft Icon | image/x-icon | 
- .ico
- .cur
 | 
- Chrome
- Edge
- Firefox
- Opera
- Safari
 |
| [JPEG](https://en.wikipedia.org/wiki/JPEG) | Joint Photographic Expert Group image | image/jpeg | 
- .jpg
- .jpeg
- .jfif
- .pjpeg
- .pjp
 | 
- Chrome
- Edge
- Firefox
- Opera
- Safari
 |
| [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics) | Portable Network Graphics | image/png | .png | 
- Chrome
- Edge
- Firefox
- Opera
- Safari
 |
| [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) | Scalable Vector Graphics | image/svg+xml | .svg | 
- Chrome
- Edge
- Firefox
- Opera
- Safari
 |
| [TIFF](https://en.wikipedia.org/wiki/TIFF) | Tagged Image File Format | image/tiff | 
- .tif
- .tiff
 | None. Built-in; add-ons required |
| [WebP](https://en.wikipedia.org/wiki/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 <img> tag.
- The **file format is not supported** by the user agent.

## Attributes:

The HTML image tag supports the **Global Attributes** and the **Event Attributes**.

<style> th, td{ padding: 20px; } </style>

| 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 **<canvas>** 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 <map> 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:

<style> th, td{ padding: 20px; } </style>

| 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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-10.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <dd> Definition Description Tag](https://sharepointanchor.com/learn-html/html-dd-definition-description/)**
- **[HTML <center> Center Tag](https://sharepointanchor.com/learn-html/html-center-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)**
- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**

The post [HTML <code><img></code> Image Tag](https://sharepointanchor.com/learn-html/html-img-image-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).