HTML – IMG TAG ATTRIBUTES

Using image tag (<img>) we can place an image inside a html webpage. But by default, what ever is the image size, it is going to place that image size picture in the html webpage. In lots of cases we may want to resize the picture.

In our previous article example:

<html>

<head>

<title>This is a sample webpage</title>

<meta name=”content” description=”this is a sample webpage for practice purpose.”/>

</head>

<body>

<h1>Popular Fruits Among children</h1>

The following information provides the names of popular fruits among children.

<h2>Apple</h2>

An apple keeps doctor away. Children love apple. Apples are of two types:

<h3>Green Apple</h3>

Children love green apple. Because its bit sour and sweet too.

<h3>Red Apple</h3>

Adult love red apple. Its sweet and very tasty.

<h2>Banana</h2>

Children, adult, old people love banana. Banana are also of two types:

<h3>Green Banana</h3>

Green banana are also loved heavily among banana lovers.

<h3>Yellow banana</h3>

<img src=”banana.jpg”>

Yellow banana is widely loved around the globe

</body>

</html>

The out put result was as below;

IMG TAG HTML WEBPAGE

In this example, the size of the image is: 460×460

It placed exact size of the image in the html webpage. We may not want such large image size. We may want to resize the image. So how can we resize the image.

For this we are going to use two attributes of image tag 

  1. Width attribute
  2. Height attribute

Lets resize the image with 100 pixel width and 100 pixel height. For this, the tag would be as below;

<img src=”banana.jpg” width=”100″ height=”100″>

Thats it. Now make the changes, save the file and open in browser. The output would be as below.

img tag with height and width attribute

As you can see, in the result, the image is resized to 100 pixel width and 100 pixel height.

NOTE: Before resizing an image in html webpage, you must be aware of the desired height and width in pixels you want to set.

NOTE: If you are resizing an image less than its real dimensions, it would render smooth. But if you are resizing the image larger than its real dimensions, then it might pixelate. You have to remember this point always.

What is alt attribute in image tag?

Alt attribute of img tag, is useful tag to inform the browser about the name of the image file. (When visually challenged people visit a webpage, reader in the computer system going to read out the image from its alt value. On other hand, it is essential for search engine optimisation purpose). It is good habit to use alt attribute in the image tag.

<img src=”banana.jpg” alt=”yellow banana” width=”100″ height=”100″>