How to Set Image Width and Height Using HTML

PDF download Download Article
PDF download Download Article

The width and height attributes in HTML specify the size of an image in pixels. In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels. This wikiHow teaches you how to specify the size of an image in your HTML code.

Steps

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","bigUrl":"\/images\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>\u00a9 2024 wikiHow, Inc. All rights reserved. wikiHow, Inc. is the copyright holder of this image under U.S. and international copyright laws. This image is <b>not<\/b> licensed under the Creative Commons license applied to text content and some other images posted to the wikiHow website. This image may not be used by other entities without the express written consent of wikiHow, Inc.<br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Windows and Mac computers come with default text editor programs like Notepad and Text Edit that will work to create or edit HTML. You can either open the HTML document within the program by clicking Open from the File tab, or you can right-click the file in your file browser and click Open With… .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","bigUrl":"\/images\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>\u00a9 2024 wikiHow, Inc. All rights reserved. wikiHow, Inc. is the copyright holder of this image under U.S. and international copyright laws. This image is <b>not<\/b> licensed under the Creative Commons license applied to text content and some other images posted to the wikiHow website. This image may not be used by other entities without the express written consent of wikiHow, Inc.<br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    <img src="imagefile.jpg" alt="Image" height="42" width="42">
    • src is the file path to your image.
    • alt is the tag you give for image.
    • Note that those numbers are in pixels.
    • You can also use the style tag. For example, you'd have the following code in your text: <img src="imgfile.jpg" alt="Image" style="width:500px;height:600px;"> . The style tag ensures the image stays that size and overrides any further image size commands. [1]
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","bigUrl":"\/images\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>\u00a9 2024 wikiHow, Inc. All rights reserved. wikiHow, Inc. is the copyright holder of this image under U.S. and international copyright laws. This image is <b>not<\/b> licensed under the Creative Commons license applied to text content and some other images posted to the wikiHow website. This image may not be used by other entities without the express written consent of wikiHow, Inc.<br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    For example, if you enter 21 in the width and 21 in the height areas, you'll get an image half the size as the original.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","bigUrl":"\/images\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>\u00a9 2024 wikiHow, Inc. All rights reserved. wikiHow, Inc. is the copyright holder of this image under U.S. and international copyright laws. This image is <b>not<\/b> licensed under the Creative Commons license applied to text content and some other images posted to the wikiHow website. This image may not be used by other entities without the express written consent of wikiHow, Inc.<br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Save the file and open the file using any browser to see the effect. If you don't like the size of the image, you can repeat the previous steps. [2]
    5. Advertisement

Community Q&A

Search
Add New Question
  • Question
    I tried it, and my image is the word "image". Any ideas?
    Community Answer
    Make sure that the image that you want to use is stored in the same folder as the HTML document. Also, make sure that you have put the right file name in the actual HTML coding.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 7 Helpful 15
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • Always specify both the height and width attributes for images. If height and width are set, the space required for the image is preserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
        Thanks
      • Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.
        Thanks
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Run a HTML File in Visual Studio Code
      4 Ways to Add a Link to a Picture
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Run a HTML File
      How to
      Change the Button Color in HTML
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Insert Images with HTML
      How to
      Write HTML Code
      How to
      Create an Email Link in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Create a Calculator Using HTML
      How to
      Resize iFrames in HTML
      How to
      Open HTM Files
      Advertisement

      References

      1. ↑ https://www.w3schools.com/html/html_images.asp
      2. ↑ https://www.w3schools.com/tags/att_img_width.asp

      About This Article

      Article Summary X

      1. Open the HTML document in a text editor.
      2. Add <img src="imagefile.jpg" alt="Image" height="42" width="42">.
      3. Change the numbers for height and width to change the size.
      4. Save the HTML file.

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 193,115 times.

      Is this article up to date?

      Advertisement