Open In App

HTML IMG Tag

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
6 Likes
Like
Report

The HTML <img> tag is used to embed images in a web page. It is an empty or self-closing tag, meaning it doesn’t have a closing tag. It allows to display images from various sources, such as files on a website or URLs from other websites.

index.html 
<html>
    <head></head>
<body style="text-align: center;">
    <h3>GeeksforGeeks logo</h3>
    <img src=
        "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
         width="420" height="100" 
         alt="Geeksforgeeks.org">
</body>
</html>

Syntax

<img src="./image.png" alt="image description" width="200" height="100">

HTML image Tag Attributes

AttributeDescription
srcSpecifies the path to the image.
altProvides alternate text for the image, useful for informing users about the image and displaying in case of network issues.
crossoriginAllows importing images from third-party sites with cross-origin access for use with canvas.
height and widthSpecifies the height and width of the image.
ismapSpecifies an image as a server-side image map.
loadingSpecifies whether a browser should defer loading of images until certain conditions are met or load an image immediately.
longdescSpecifies a URL to a detailed description of an image.
referrerpolicySpecifies which referrer information to use when fetching an image (e.g., no-referrer, no-referrer-when-downgrade, origin).
sizeSpecifies image sizes for different page layouts.
srcsetSpecifies a list of image files to use in different situations.
usemapSpecifies an image as a client-side image map.

Custom styling with image tag

index.html 
<html>
<head>
  	<style>
    	img {
      		width: 200px;
            height: auto;
            border: 5px solid #4CAF50;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
    	}
    	img:hover {
      		transform: scale(1.1);
    	}
  	</style>
</head>
<body>
  	<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" 
       alt="gfg image">
</body>
</html>

Now you have clear understanding of HTML <img> so you can implement this knowledge to create some interesting components using CSS and JavaScript

Using CSS

Using JavaScript


HTML <img> Tag

M

Mandeep_Sheoran
Improve
Article Tags :

Explore

Lightbox