Share Point Anchor

Posted on May 10, 2021 • Originally published at sharepointanchor.com on Feb 25, 2021

HTML <img> Image Tag

#learnhtml #htmli

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>

Try it Yourself Online

Result:

Download Sample File:

HTML-img-tag Download

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>

Try it Yourself Online

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>

Try it Yourself Online

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:

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 Image Tag appeared first on Share Point Anchor.

DEV Community

HTML <img> Image Tag

Syntax:

Sample of the HTML Tag:

Result:

Download Sample File:

Use CSS property to style the tag:

Sample of the tag with CSS property :

Result:

Src and Alt Attributes:

Sample of the HTML tag with the src and alt attributes:

Result:

HTML tag with “loading” Attribute:

Supported Images Formats:

Image Loading Errors:

Attributes:

Deprecated Attributes:

Browser Support:

Related Articles:

Top comments (0)

Read next

CDN NLogN🌍

Self-Aligning Dish in Rust: Command

Why should you care about website performance?

Keeping MQTT Data History with Node.js