How to Set Width and Height of an Image using HTML?

Last Updated : 15 Jul, 2025

When adding images to a webpage, it's important to set their dimensions using the height and width attributes in HTML. Without these dimensions, the browser won't know how much space to reserve for the image, which can cause layout shifts that disrupt the viewing experience.

Note: Always specify the height and width for images to keep the page layout stable during loading. Also, resize large images using external tools before adding them to your site to improve performance and reduce load times.

Syntax

<img src="image.jpg" width="300" height="200">

Attributes

It has attribute value pixels, which are used when you want to set the height and width of the image.

Examples of Setting Width and Height

Example 1: Setting Width and Height

The image will appear with a width 300 and a height 300 pixels

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to specify the width and
        height of an image using HTML?
    </title>
    h1{
    color:green;
    }
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>
        How to specify the width and
        height of an image using HTML?
    </h2>

    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="GeeksforGeeks logo"
        width="300" height="300">
</body>

</html>

Output:

Example 2: Without Specifying Dimensions

In this example, we will not assign width and height value so the image will display with its original height and width.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to specify the width and
        height of an image using HTML?
    </title>

    h1{
    color:green;
    }
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>
        How to specify the width and
        height of an image using HTML?
    </h2>

    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="GeeksforGeeks logo"
        width="300" height="300">
</body>

</html>

Output:

Important Things to Know

Always set the height and width attributes for images to maintain a stable page layout.
Use pixel values for precise control over image dimensions.
Resize large images externally using image editing tools before uploading to improve page load times.

How to set the width and height of an image using HTML ?

V

Improve

Article Tags :

Explore