How to Set Width and Height of an Image using HTML? Last Updated : 10 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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">AttributesIt has attribute value pixels, which are used when you want to set the height and width of the image.Examples of Setting Width and HeightExample 1: Setting Width and HeightThe 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 DimensionsIn 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 KnowAlways 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. Comment More infoAdvertise with us Next Article How to Set Width and Height of an Image using HTML? V vkash8574 Follow Improve Article Tags : Web Technologies HTML HTML-Questions Similar Reads How To Get The Height And Width Of An Image Using ReactJS? When building web applications, dynamically handling images and their dimensions is a common requirement. In ReactJS, determining the dimensions of an image (i.e., its height and width) can be useful for responsive design, image manipulation, and other dynamic operations. This article will guide you 4 min read How to set height of an iframe element using HTML ? The iframe in HTML stands for Inline Frame. The "iframe" tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. The HTML <ifram 1 min read How to get the Width and Height of an Image using JavaScript? Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then 2 min read How to specify the width and height of the canvas using HTML ? The <canvas> tag in HTML is used to draw graphics on web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Syntax: <canvas id="canvasID"> HTML Contents... <canvas> Attributes: The canvas 1 min read How to use image height and width attribute in HTML Page ? 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 3 min read Like