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

  1. 1
    Open your HTML document a text editor. 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. 2
    Add this line to your script: <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. 3
    Change height and width numbers. 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. 4
    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

  • Question
    I tried it, and my image is the word "image". Any ideas?
    Community Answer
    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.
Advertisement

About This Article

Darlene Antonelli, MA
Written by:
wikiHow Technology Writer
This article was co-authored by wikiHow staff writer, Darlene Antonelli, MA. Darlene Antonelli is a Technology Writer and Editor for wikiHow. Darlene has experience teaching college courses, writing technology-related articles, and working hands-on in the technology field. She earned an MA in Writing from Rowan University in 2012 and wrote her thesis on online communities and the personalities curated in such communities. This article has been viewed 179,712 times.
How helpful is this?
Co-authors: 6
Updated: August 29, 2019
Views: 179,712
Categories: HTML
Article SummaryX

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?
Advertisement