How to use image height and width attribute in HTML Page ?

Last Updated : 24 Sep, 2021

HTML stands for HyperText Markup Language. Hypertext defines the link between the online pages. It is used to define the text document within tag which defines the structure of websites. This language is used to annotate text in order that a machine can know it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what manipulation has got to be done on the text.

To add an image in an HTML page, <img> tag is used. With that, we need to use the attribute's width and height of the image in pixels. Specify both of the attributes.

Syntax:

<img src="url" alt="some_text">

Attribute:

src: The src stands for source. Every image has an src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored.
alt: If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is a user-defined text.

Setting width and height of Image: The width and height attributes are used to specify the width and height of an image. The attribute values are specified in pixels by default.

Syntax:

<img src="url" alt="some_text" width=""  height="">

Note:

px: pixels - pixels (1px = 1/96th of 1in)
in: inches - inches (1in = 96px = 2.54cm)
pt: points - points (1pt = 1/72 of 1in)

Example 1: An image with a height of 600 pixels and a width of 500 pixels. The width attribute specifies the width of a picture, in points.

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>Welcome To GFG</h2>
    
<p>Image with width and height in points</p>

    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png"
        alt="Welcome To GFG"
        width="60pt" height="80pt">
</body>

</html>

Output:

Example 2: Another example to show the use of width and height attributes. We have mentioned width as 450 pixels and height as 220 pixels.

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>Welcome To GFG</h2>
    <h3>img tag with width and height attribute</h3>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png"
        alt="Welcome To GFG"
        width="450" height="220">
</body>

</html>

Output:

Example 3: Another HTML program to show the use of <img> tag with width and height attribute. In this code, we have taken the value of height and width as 250 pixels.