Width and Height of an Image in HTML

Last Updated : 4 Jun, 2026

Width and height of an image can be set using either of the following.

  • HTML attributes within the <img> tag. Syntax for this is, <img src="image.jpg" width="300" height="200">
  • Using CSS properties, such as inline style attributes

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

Example 1: Using img attributes

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

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head></head>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Example 2: Using CSS

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head></head>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Example 3: 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 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head></head>
<!--Driver Code Ends-->

<body>

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

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Best Practices

  • It is a best practice to resize the image to its intended display dimensions using an image editing program before uploading it to your website.
  • For responsive web pages, using CSS properties like max-width: 100% is recommended, allowing images to scale down on smaller screens while retaining quality.
  • If you specify both width and height, the image may appear stretched or squashed. To avoid this, consider specifying only one dimension (e.g., width) and setting the other to auto (e.g., height:auto;)
Comment

Explore