• Register

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.

More Posts

How to make a background image fit the screen in html Tania - Jul 16
Marquee tag in HTML for multiple images kunal verma - Oct 21, 2020
How to caption an image in HTML kunal verma - Oct 17, 2020
How to remove underline from hyperlink in html Prasandeep Gautam - Oct 22, 2020
How to add icon in HTML title kunal verma - Oct 17, 2020
How to change the position of button in html? sanchi - May 1
How to make multiple pages in html amna - Nov 18, 2020
How to link submit button to another page in HTML Prasandeep Gautam - Oct 17, 2020
How to remove an underline from a HTML link kunal verma - Oct 16, 2020
HTML code to send email with attachment kunal verma - Nov 1, 2020