The `` tag is used to display images on a webpage. It is a self-closing tag, meaning it does not require a closing tag. The primary attributes that control the image’s appearance and behavior are `src`, `alt`, `width`, and `height`.

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

This is the basic structure of the tag. The src attribute specifies the source of the image, while the alt attribute provides an alternative description of the image for accessibility purposes.

The `src` (source) attribute specifies the location of the image file. It can be a relative path (if the image is located within the same project folder) or a full URL (for external images).
Example with a relative path:

 <img src="images/photo.jpg" alt="A beautiful landscape"> 

Example with a URL:

 <img src="https://www.example.com/images/photo.jpg" alt="A beautiful landscape"> 

The browser will load the image from the specified path or URL and display it on the page.

The `alt` (alternative text) attribute provides a textual description of the image. This is important for accessibility, as it allows screen readers to describe the image for visually impaired users. It also helps search engines index the image content.
Example:

 <img src="images/logo.jpg" alt="Company Logo"> 

In this example, if the image cannot be displayed (for example, if the file is missing), the text in the alt attribute will be shown instead.

The `width` and `height` attributes define the size of the image in pixels. These attributes are optional but can be helpful in controlling the image’s display.
Example:

 <img src="images/photo.jpg" alt="A beautiful landscape" width="600" height="400"> 

This example will display the image with a width of 600 pixels and a height of 400 pixels. It is important to maintain the image’s aspect ratio to avoid distortion.

Notes:
If only one of width or height is specified, the browser will scale the other dimension automatically to maintain the aspect ratio of the image.
It’s a good practice to set these attributes to avoid layout shifting when images load.

To make images responsive (i.e., adjust to the screen size), you can use CSS. Setting the `max-width` to 100% ensures the image scales appropriately on different devices.
Example:

 <img src="images/photo.jpg" alt="A beautiful landscape" style="max-width: 100%; height: auto;"> 

This CSS ensures the image will scale down on smaller screens without distorting the aspect ratio.

You can control how an image is aligned on the page using CSS properties like `align`, `margin`, `padding`, and `display`.
Example: Centering an Image

 <img src="images/photo.jpg" alt="A beautiful landscape" style="display: block; margin-left: auto; margin-right: auto;"> 

This will center the image horizontally on the page.

The `loading` attribute can be used to specify lazy loading for images, meaning the image will only load when it is about to enter the viewport (visible area of the page). This can improve the performance of your webpage, especially if it contains many images.
Example:

 <img src="images/photo.jpg" alt="A beautiful landscape" loading="lazy"> 

The loading=”lazy” attribute is supported by most modern browsers and helps improve the loading time of your page.

You can also wrap the `` tag inside an anchor <a> tag to make the image clickable, directing users to another page.
Example:

 <a href="https://www.example.com"> <img src="images/photo.jpg" alt="A beautiful landscape"> </a> 

This will make the image clickable, and when the user clicks on it, they will be redirected to “https://www.example.com”.