html

HTML Adjust Image Size

“It is very common for web pages to have images of different kinds. They make a web page look more visually appealing. However, choosing the right size of an image is really important because an image must neither be too large that it overshadows the text on your web page nor too small that it can barely be seen. Therefore, in this tutorial, we will talk about the ways in which you can adjust the image size in HTML very easily.”

What do we Mean by Adjusting the Image Size in HTML?

The size of an image is a combination of its height and width. For example, if we have an image of size 100 x 100, then it will mean that the said image will have a height and width of 100 pixels. By adjusting the size of an image in HTML, we literally mean changing the height and width of that image according to our requirements. Moreover, it is also not mandatory for an image to have the same width and height. In other words, it is perfectly normal for an image to have a different height and width. Now, let us learn the methods of adjusting the size of an image in HTML.

How to Adjust the Image Size in HTML?

You can easily adjust the size of any of your desired images in HTML by following either of the two methods explained below. However, before moving forward with these methods, we would like to show you the image whose size we wish to adjust by using these methods. This image is as follows:

The original size of this image is 900 x 900, i.e., the height, as well as the width of this image, is 900 pixels, as highlighted in the image below:

Method # 1: By Using the Simple Height and Width Properties of HTML

In this method, we will be using the simple height and width properties of HTML to adjust the size of our specified image. You can assign any value of your choice to these properties. The HTML script for this method is as follows:

In this method, our main focus is on adjusting the image size, for which we have made use of the “img” attribute of HTML. This attribute is used whenever you want to play around with images in HTML. Then, we have used the “src” attribute, with the help of which we refer to the exact path or location where our target image resides. You can see that after this attribute, we have mentioned the complete path of our desired image. Then, we have the “alt” attribute, which is there to mention any alternate text for describing the image. You are totally allowed to skip this attribute. This is followed by the “width” and “height” properties of HTML. We have kept the values of both these properties as “400”. It means that this script will display our target image in a reduced size upon execution.

The web page shown in the image below displays our image in size 400 x 400.

Method # 2: By Using the Style Attribute of HTML

This is just an alternate method of adjusting the size of an image in HTML. It makes use of HTML’s inline style attribute. To use this method, you will have to take a look at the following HTML script:

This HTML script is pretty much similar to the one that we have discussed above in our first method. However, this time, instead of simply specifying the values of the “height” and “width” HTML properties, we have used the “style” attribute, and then we have enclosed these properties within it. This time, we want to change the size of our target image to 600 x 600.

Our specified image with the newly adjusted size is shown in the image below:

Conclusion

This tutorial was designed to guide you regarding the methods of adjusting the image size in HTML. In this regard, we shared two different methods with you that are really easy to implement. After going through these two methods, you will not find it difficult to adjust the sizes of your images, i.e., increase or decrease the image size according to your requirements while working with HTML.

About the author

Ayesha Sajid

Ayesha Sajid has secured a Bachelor's degree in Computer Sciences and a Master's degree in Information Security. She is a technical content writer by profession who has around four years of experience in working with Windows and different flavors of the Linux operating system. She also has a keen interest in exploring the latest technology trends.