Content

• Steps
• Tips

This article will show you how to set the height and width of an image in HTML.

• The "width" attribute sets the width of the picture (in pixels).
• The "height" attribute sets the height of the image (in pixels).
• In HTML4.01, the height can be set in pixels or as a percentage, but in HTML5, only in pixels.

Steps

1. 1 Open the HTML file. For example, open the file default.html.
2. 2 Add the following line to your HTML code.
   • img src = "imagefile.webp" alt = "Image" height = "42" width = "42">
   • src contains the path to the graphic file (picture).
   • in alt, the size of the image is set.
3. 3 Replace the values ​​of the height and width attributes with your desired values. For example, like this: height = "19" width = "20"
4. 4 Save the file and open it in any web browser. Do this to check how the image is resized. The "width" attribute is supported by all major browsers (Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer).

Tips

• Always set the height and width of the picture. So when the page is loaded, space is reserved for the picture. Otherwise, the browser will not know the size of the image and will not reserve space, causing the page layout to change as the page loads.
• If the size of the large image is reduced using the "height" and "width" attributes, the user will load the large image (even if it appears small on the page). Therefore, we recommend that you first resize the image in a graphics editor.