HTML - <img> Tag

HTML <img> tag is used to embed image in to the HTML document. It is an inline and empty element, thus it doesn't begin on a new line and doesn't require a closing tag.

An <img> element must have two attributes src, which fetch the image from that source, and alt, which specifies an alternative text for the picture. The browser inserts an HTML image from the source supplied in the <img> tag instead of directly inserting the picture into the document.

Syntax

<img src="..."  alt="...">

Attributes

HTML img tag supports Global and Event attributes of HTML. And some specific attributes as well which is listed bellow.

Attribute	Value	Description
alt	text	Specifies alternate text.
crossorigin	anonymous use-credentials	It allows images from third-party sites that allow cross-origin access to be reused with canvas.
height	Pixels	Specifies the height of the image.
ismap	ismap	Defines the image as a server-side image map.
loading	eager lazy	Specifies when an image should load.
longdesc	URL	Specifies the long description of the attached image.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer information.
sizes	sizes	Specify the image sizes for different.
src	URL	Specify the image URL which will be displayed.
srcset	URL-list	Specifies a list of image files to use in different situations.
usemap	#mapname	Defines the image as a client-side image map and used alongwith <map> and <area> tags.
width	pixels	Sets the width of an image in pixels or in %.

Examples of HTML img Tag

Bellow examples will illustrate the usage of img tag. Where, when and how to use img tag and how we can manupulate img element using CSS.

Inserting Image using img Tag

Let’s consider the following example, where we are going to upload the image into the HTML page using the <img> tag. It will generate an output consisting of the image uploaded to the webpage

<!DOCTYPE html>
<html>
<head>
   <title>HTML Tag</title>
</head>
<body>
   <img src="https://www.tutorialspoint.com/cg/images/logo.png" 
        alt="HTML Tutorial" height="150" width="390" />
</body>
</html>

Aligning image element using CSS

Considering another scenario where we are going to align the image using CSS along with the <img> tag.

<!DOCTYPE html>
<html>
<body>
   <h2>Image vertical-align: middle</h2>
   <p>
       Pawan Kalyan 
       <img src=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB3tcOH6bebY1QFANMOUDhGU0nI3fTaKqP2qEKxBxpRKKBL5Y-51iu&usqp=CAE&s" 
            width="42" height="42" style="vertical-align:middle">
       is an Indian actor, politician, filmmaker, and 
       philanthropist. He primarily works in Telugu cinema.
       He is the recipient of a Filmfare Award, a SIIMA Award,
       a CineMAA Award and a Santosham Film Award.
   </p>
   <h2>Image vertical-align: top</h2>
   <p>
       Mahendra Singh Dhoni 
       <img src=
"https://upload.wikimedia.org/wikipedia/commons/7/70/Mahendra_Singh_Dhoni_January_2016_%28cropped%29.jpg"
            width="42" height="42" style="vertical-align:top">
       is an former Indian cricketer. He was captain of 
       the Indian national team in limited-overs formats 
       from 2007 to 2017 and in Test cricket from 2008 to 2014. 
   </p>
</body>
</html>

Clickable Image

Following is an example where we are going to place the <image> tag inside the <a> tag, making the image a link.

<!DOCTYPE html>
<html>

<head>
    <title>Image tag</title>
</head>

<body>
    <h2>TUTORIALSPOINT</h2>
    <p>Click on the image to direct to webpage.</p> 
    <a href="https://www.tutorialspoint.com/index.htm">
        <img src="https://www.tutorialspoint.com/images/logo.png?v2" 
             height="55" width="200"> 
    </a> 
</body>

</html>

Image failed to Load alternative

In the following example, we are going to use the alt attribute and also style the <img> tag using CSS.

<!DOCTYPE html>
<html>
<body>
   <div>
      <img src="https://www.tutorialspoint.com/cg/images/ogo.png"
           alt="Tutorialspoint_Logo" width="100" height="106">
   </div>
</body>
</html>

Supported Browsers

Tag
img	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm