Aquileo | HTML IMG Tag - GeeksforGeeks

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.