Width and Height of an Image in HTML (original) (raw)

Last Updated : 4 Jun, 2026

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

• HTML attributes within the tag. Syntax for this is,
• 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 `

`

Example 2: Using CSS

HTML `

`

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 `

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

`

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;)