In so many cases, we may need to add image to our HTML webpages. Why image? Because 1000 words would fail to deliver a meaning than a single image. Images make webpages more attractive.
How to insert image in html webpage?
Using IMG tag we can insert image in to a webpage.
Note: Unlike bold tag, heading tags, itali tag, underline tag – img tag has no closing tag. Thats why img tag has / towards the end.
Now, this single image tag is not enough to insert image. This image tag needs the path of the image file.
So how do we set the path of the image file inside the image tag?
By using Source attribute(src) of image tag, we set the path of the image file.
And also along with source attribute (src) we use alt attribute to add information about the picture such as what picture is it about.
<img src=”path/image.png” alt=”Banana”/>
Why alt attribute is required in img tag?
For two reasons we must include alt attribute in any image file.
Reason 1: Softwares that read webpages for visually challenged people, going to read what is the image about
Reason 2: Search engines going to crawl and store about the image in the search engine database.
So following example code gives following image in this website.
<img src=”https://www.gyanol.com/public/images/banana.png” alt=”Banana”/>
Can we adjust the height and width of an image?
Yes we can, by using width and height attribute of image tag.
Width attribute is used to set the width of the image
Height attribute is used to set the height of the image
Suppose I want to set the image size to 100 in width and 100 in height, then tag would be as below
<img src=”https://www.gyanol.com/public/images/banana.png” alt=”Banana” height=”100″ width=”100″/>
See in the above example, after setting width and height attributes in the img tag, the image resized to the mentioned values.