HTML Image <img> Tag | Docs With Examples

The HTML <img> tag in HTML is used to embed images into webpages, providing flexibility with different attributes and formats. This guide covers everything about HTML image tags, including cross-origin access, responsiveness, optimization, and best practices.

Basic Syntax of an HTML Image

<img src="image.jpg" alt="Description of the image">

• src (Source): Specifies the path to the image file.
• alt (Alternative Text or Alt Text): Describes the image for accessibility and SEO.
• title (Tooltip/Title Attribute): Displays a tooltip when hovering over the image.

Example: Adding an Image

<img src="https://example.com/image.jpg" alt="Sample Image" title="This is an example image">

This embeds an image from an external URL and provides a tooltip for additional context. Open up an HTML editor to see for yourself.

Common Scenarios

Specifying Image Dimensions

You can define image size in your HTML projects using width and height attributes or CSS.

<img src="image.jpg" width="300" height="200" alt="Resized Image">

However, CSS provides better control:

img {
    width: 300px;
    height: auto;
}

This ensures the image maintains its aspect ratio.

Using Relative and Absolute Paths

• Relative Path: Refers to an image within the same project folder.

<img src="images/photo.jpg" alt="Relative Path Image">

• Absolute Path: Refers to an image hosted on an external server.

<img src="https://example.com/photo.jpg" alt="Absolute Path Image">

GIF and PNG Image Formats

Two commonly used image formats for the web are GIF and PNG:

• GIF (Graphics Interchange Format): Best for animations and images with fewer colors.

<img src="animation.gif" alt="Animated GIF">

• PNG (Portable Network Graphics): Supports transparency and high-quality images.

<img src="transparent.png" alt="Transparent PNG">

Responsive Images with srcset and sizes

Using srcset and sizes allows the browser to load the best image version based on device resolution.

<img src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w" 
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1920px" 
     alt="Responsive Image">

• srcset Attribute: Specifies multiple image sources for different screen sizes.
• sizes Attribute: Defines which image size to load under different conditions.

Adding a Link to an Image

To make an image clickable, wrap it inside an <a> tag:

<a href="https://example.com">
    <img src="image.jpg" alt="Clickable Image">
</a>

Using an Image Map

An image map allows you to create clickable areas within an image.

<img src="map.jpg" usemap="#workmap" alt="Image Map Example">

<map name="workmap">
    <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Page 1">
    <area shape="circle" coords="337,300,44" href="page2.html" alt="Page 2">
</map>

Each <area> defines a clickable region within the image.

Background Images vs <img> Tag

Instead of using <img>, you can set an image as a background using CSS:

body {
    background-image: url('background.jpg');
    background-size: cover;
}

Lazy Loading Images

To improve page load speed, use the loading="lazy" attribute:

<img src="image.jpg" alt="Lazy Loaded Image" loading="lazy">

Handling Cross-Origin Images

For cross-origin access, use the crossorigin attribute to fetch images from different domains:

<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="Cross-Origin Image">

This is useful when working with security-restricted referrer information.

Common Questions About HTML Images

How do I insert an image in HTML?

Use the <img> tag with the src attribute:

<img src="image.jpg" alt="My Image">

This embeds the specified image into the HTML document.

What is the difference between IMG and IMAGE in HTML?

In HTML, the correct tag for embedding images is <img>. The <image> tag does not exist in standard HTML and will not work in different browsers.

Is <img /> correct?

Yes, <img /> is correct in XHTML as a self-closing tag, but in HTML5, the recommended syntax is:

<img src="image.jpg" alt="Valid Image">

How to add a <picture> tag in HTML?

The <picture> tag allows you to define multiple sources for an image.

<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-small.jpg" media="(max-width: 799px)">
    <img src="fallback.jpg" alt="Responsive Image">
</picture>

What is the <img> HTML tag used for?

The <img> tag embeds an image into an HTML web page and supports attributes like alt, width, height, and loading.

What is the closing tag for <img> in HTML?

The <img> tag is self-closing, meaning it does not require a closing tag:

<img src="image.jpg" alt="Valid Image">

Key Takeaways

• Use <img> to embed images in HTML.
• Always include an alt attribute for accessibility and SEO.
• Use CSS variables or stylesheets for better image control.
• Utilize srcset and sizes for responsive images.
• Implement lazy loading to improve performance.
• Image maps allow interactive, clickable image sections.
• Handle cross-origin access when loading external images.
• Use GIF for animations and PNG for high-quality transparent images.

Wrapping Up

Images are crucial in modern web design. Understanding how to use HTML image tags, responsive techniques, and inline CSS ensures optimized and accessible visuals for different situations. Whether setting a background image, embedding a logo, or managing tooltip content, mastering image handling improves usability across various browsers and devices.