HTML IMG Tag

Last Updated : 28 Jan, 2026

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.

  • Supports local and external image sources.
  • Common attributes include src, alt, width, and height.
  • Does not contain any inner content.
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>GeeksforGeeks Logo</title>
</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

HTML image tag attributes define how an image is sourced, displayed, loaded, and made accessible on a web page, helping improve responsiveness, performance, and user experience.

1. src Attribute:

The src attribute defines the path or URL of the image that the browser fetches and displays inside the <img> tag. It is a mandatory attribute because, without it, the image cannot be rendered on the web page.

  • It can point to a local image file (relative or absolute path) or an external image URL.
  • If the src path is incorrect or the image is unavailable, the image will not load.
  • Common image formats supported include JPG, PNG, GIF, SVG, and WebP.
  • It is usually used with the alt attribute to show alternate text when the image fails to load.

2. alt Attribute:

The alt attribute provides alternative text for an image, which is displayed when the image cannot be loaded and helps screen readers describe the image to visually impaired users.

  • Improves accessibility by allowing screen readers to read the image description.
  • Displays text when the image fails to load due to network or path issues.
  • Helps search engines understand the content of the image for better SEO.

3. crossorigin Attribute:

The crossorigin attribute enables loading images from third-party domains with cross-origin permissions, allowing them to be safely used with the HTML <canvas> element.

  • Prevents the canvas from becoming tainted when using external images.
  • Common values include anonymous and use-credentials.
  • Required when performing canvas operations like drawing or exporting images from other domains.

4. height and width Attributes:

The height and width attributes define the displayed dimensions of an image on a web page, helping browsers reserve space before the image loads.

Bullet points:

  • Values are usually specified in pixels (e.g., width="200").
  • Help prevent layout shifts while the image is loading.
  • Can be used together with CSS for better responsive design control.

5. ismap Attribute:

The ismap attribute marks an image as a server-side image map, where click coordinates are sent to the server for processing.

  • Used with an <a> (anchor) tag to make different image areas clickable.
  • Sends the x and y coordinates of the click to the server as URL parameters.
  • Commonly used in older web applications; now largely replaced by usemap.

6.loading Attribute:

The loading attribute controls when an image is loaded by the browser, either immediately or only when it is about to enter the viewport.

  • Improves page performance by deferring off-screen images.
  • Common values are lazy and eager.
  • Reduces initial page load time.

7. longdesc Attribute:

The longdesc attribute provides a URL linking to a detailed description of an image for better accessibility.

  • Helpful for complex images like charts or diagrams.
  • Supports screen readers and assistive technologies.
  • Acts as an extended version of alt text.

8. referrerpolicy Attribute:

The referrerpolicy attribute defines how much referrer information is sent when fetching an image.

  • Enhances privacy and security.
  • Common values include no-referrer, origin.
  • Controls data shared with external servers.

9. sizes Attribute:

The sizes attribute specifies how much space an image will take under different layout conditions.

  • Used with srcset for responsive images.
  • Helps browsers choose the best image size.
  • Optimizes bandwidth usage.

10. srcset Attribute:

The srcset attribute provides multiple image sources for different screen resolutions or sizes.

  • Enables responsive image loading.
  • Improves performance on high-DPI displays.
  • Allows browsers to select the most suitable image.

11. usemap Attribute:

The usemap attribute defines a client-side image map with clickable areas.

  • Works with the <map> and <area> tags.
  • Allows multiple interactive regions in one image.
  • More flexible than server-side image maps.

Custom styling with image tag

Custom styling with the <img> tag allows developers to enhance image appearance and behavior using CSS properties like size, borders, shadows, and hover effects for better visual presentation.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Styled Image Example</title>
    <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.

Also Check:

Using CSS

Using JavaScript

Comment

Explore