• Register
100 points
3

In this article we will discuss how to reduce and resize the image size using HTML and how to resize images using width and height attributes of the image tag. We can use different CSS properties to resize the image but now here we will only use HTML not CSS. Before we start, we should learn about tag attributes. So here we go. 

 What are Tag attributes?

Tag attributes are the modifiers of tags in HTML and they provide us additional information. We have seen that we define most tag attributes in name ‘value’ pairs and we always declare them in the opening tag.
 

Approach

For resizing or reducing the image size we should use the height and width attribute of image tag and we need to specify width and the height of our image source HTML tag. When resizing the image we need to maintain aspect ratio of the image otherwise that image will get distorted and loose some image quality and if height and width are set properly so the space required for the image will get reserved at that time when the page is loaded, without these attributes the browser doesn’t know the size of the image and will not be able reserve the suitable space for it.The effect will be that the page layout will change automatically during loading.
 

Program

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}

img.one {
  height: auto;
  width: auto;
}

img.two {
  height: 50%;
  width: 50%;
}
</style>
</head>
<body>

<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">

</body>
</html>

output

image

hope this will help.

100 points
3