Image Tag

• <img> tag is used to embed(ADD) an image in an HTML page.

  <img src="/image.png" alt="altext"/>

Key Features of the <img> Tag

• It's a self-closing tag, meaning it doesn't require a corresponding closing tag.

• Commonly used attributes include the "alt" attribute for image descriptions and the "src" attribute for specifying the image location.

• Supports various image formats including PNG, JPEG, JPG, GIF, etc..

Setting Mandatory Attributes

• src attribute: Specifies the path to the image file.

• alt attribute: Provides a text description for the image.

  <img src="images/profile_picture.jpg" alt="Profile Picture" />

Setting Image Dimensions

  <img src="image.png" alt="Description" width="300" height="100" />

Lazy Loading Attribute

• You can use the loading attribute to completely defer the loading of offscreen images that are reached by scrolling:

 

<a href="https://devjunctionpoint.blogspot.com/" target="_blank">

        <img src="../images/E3CCA633-C689-4DD9-8B20-79E7C5A88487.jpg" alt="my Image" width="250" height="150"

            title="My Image" loading="lazy" />

    </a>

INTERVIEW QUESTIONS: HTML IMAGE TAG 

1: How would you make an image responsive using the width attribute?

You can set the width attribute to a percentage value (e.g., width="100%") to make the image adjust its width based on the available space.

 2: How do you create an image link using the <img> tag?

You wrap the <img> tag with an anchor <a> tag and provide the href attribute in the <a> tag.

 3: What's the difference between relative and absolute URLs in the href attribute?

Relative URLs are URLs that are relative to the current page's URL. Absolute

URLs are complete URLs, including the protocol (http/https) and domain.

 4: Why is providing descriptive alt text for images important? 

It improves accessibility for users with visual impairments and helps search engines 

understand image content.