Images are very useful to present the concepts in a simpler way of representation. HTML Images are used to display images on the pages. HTML Images represented with <img> tag.

The <img> tag is also called as empty tag, which means it will not have any closing tag. The <img> tag can contain only attributes which plays very important role in displaying the image on browser.

Animated images can also display by using same <img> tag. There is no difference in representation of normal images and gif images.

<img src="url" alt="img_text">

The below list of attributes plays key roles in displaying the image on webpage.

1. Src
2. Alt
3. Size
4. Style

Src Attribute -

Source attribute specifies the URL of the image. In other words, it always provides the information to browser where the current image can be found. This is mandatory attribute to display image.

<img src="url">

The source can be different for an image. Let us assume we have coded image as img.png, the below listed are the different possible scenarios.

1. Image on the same folder on the same server.Ex: <img src="img.png">
2. Image on different folder at below level on the same server.Ex: <img src="subfolder/img.png">
3. Image on the different folder upper level on the same server.Ex: <img src="../upfolder/img.png">
4. Image on different server.Ex: <img src="images/img.png">

Alt Attribute -

The Alt text specifies the alternative text/description. This will display if the specified images failed to load. This text/description can be used in only when the images failed to load due to some connectivity issues or screen reader used. This is mandatory attribute.

<img src="url" alt="img_text">

Lets take above example to understand the same. Ex: <img src="Logo.png" alt="Logo Image">

In the above example, the Logo Image will be displayed if the logo.png can’t able to load due to any issue.

Size Attribute -

The Size attribute is a combination of Width and Height. The height is the length in vertical direction. The Width and Height attributes can be used to replace the job of Style attribute.

<img src="url" alt="img_text" width="XX" height="YY">

In the above case, pixels are not required along with width and height values. By default, It will take the value as pixels.

Style Attribute -

The style (Size) attribute can be used to specify the width and height of the image. This is an optional attribute. If the Size attribute not provided, browser will calculate the size of the image during the run time.

The runtime size calculation may leads to the disturbance in alignments in display. The values can be specified in pixels (px).

<img src="url" alt="img_text"  style="width:XXpx;height:YYpx;">

In the above, the width can be the length of the image in horizontal direction. The height is the length in vertical direction. The Width and Height attributes can be used to replace the job of Style attribute.

Images can be used in different ways to display it on browser and those are

1. Image as link
2. Image Map
3. Image Floating

Image as Link -

Image can be used as a link and can be used to link to another web address. Image can be used in between the <a href=""> tag.

<a href="">
  <img src="logo.png" alt="Logo Image" style="width:42px;height:42px;">
</a>

Image Map -

<map> tag used to define an image-map. Image map is a image with clickable areas. The <map> tag is associated with the <img> tag and creates a relationship between the image and the map.

<map name="map1">
  <area shape="circle" coords="90,58,3" alt="text" href="x.htm">
</map>

We can discuss in more detail in <area> tag.

Image Float -

Image float is CSS attribute. Image float attribute is used to float the image to left or right. Float attribute will provide along with style attribute.

<img src="logo.png" alt="Logo Image" style="float:right/left;">