HTML Basics

HTML Insert an Image into the Web Page

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.

IMG Tag

How to insert image in html webpage?

Solution

Using IMG tag we can insert image in to a webpage.

Syntax

<img/>

 

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.

Example

<img src=”path/image.png”/>

And also along with source attribute (src) we use alt attribute to add information about the picture such as what picture is it about.

Example

<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.

Example

So following example code gives following image in this website.

<img src=”https://www.gyanol.com/public/images/banana.png” alt=”Banana”/>

 

HTML Image Insert
HTML Image Insert

 

Can we adjust the height and width of an image?

Yes we can, by using width and height attribute of image tag.

Width Attribute

Width attribute is used to set the width of the image

Height Attribute

Height attribute is used to set the height of the image

Example

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″/>

HTML Image Insert

See in the above example, after setting width and height attributes in the img tag, the image resized to the mentioned values.