The <img> tag is used to embed an image in the web page .
Images are not technically inserted into the web page ; but images are linked to web pages . The <img> creates a holding space for the referenced image. See there are two objectives for adding images on the web page
1). Enhancing the look of web-page.
2). Providing some information related to anything .
Lets take an example , i am attaching two image
1). Image1(click here) :- This image shows how images are used to enhance the look of a web page
2). Image2(click here):-This image shows how images are used to Provide information regarding anything . In this image a personal portfolio is shown where an image describes what skills that person knows .
Some common used attributes of Image tag are:-
1). src:- This attribute wants you to write the url of image which you want to display .Now the image may be available on your pc you just have to specify where this image is present in your pc for,example:- c:/Images/Mountain.jpg , else you might extract the image address from web.
2). alt:- It stands for alternate text , which will appear if web page is not displaying your image . Now if webpage is not displaying anything then it means you have done some error while entering the url , for eg . pasting wrong url or image address, image might not be available in your pc but still you are putting its address, well in that case alt comes into picture it shows the text that will be displayed instead of image . Look at this image(click here) to better uderstand that green icon will come instead of image and alternate text will appear.
3). Height and Width :- Here you need to specify that what height and width your image should take in the web page . Remember <img> tag is an inline tag(open this link) (do visit my previous blog to know about inline tag) so it wont affect the tags which will come after this tag(img).
Bonus Section:-
The srcset attribute in the <img> tag is used to provide the browser with a list of image sources and their corresponding widths, to allow the browser to choose the most appropriate image to display based on the device's screen size and resolution.
Here's an example of using srcset attribute:
In the example above, the src attribute specifies the default image source to be used for browsers that don't support srcset. The srcset attribute provides a list of images with their corresponding widths separated by commas. Each source is followed by a descriptor that indicates the width of the image in pixels (e.g. "320w").
The browser will choose the image source that best matches the device's screen size and resolution. For example, if the device has a screen width of 800 pixels, the browser might choose the image-medium.jpg source because it is closest to 800 pixels in width.
Note that the sizes attribute can also be used with srcset to provide additional information about the image sizes and how they relate to the device's screen size.