How to Resize Images With HTML

Make your website pictures bigger or smaller with HTML.

Using HyperText Markup Language (HTML), you have the option to resize your pictures on your Web page so that they become bigger or smaller. An image's dimensions are traditionally modified using a photo editor, but if you do not want to change the actual image file and just want to alter its appearance on the website, modifying your HTML code is an ideal solution. Edit your HTML document to resize your images, as you prefer.

Instructions

1. Launch your computer's text editor software and open the HTML page that has your image.

2. Position your cursor inside the "<img>" image tag, which is the code that controls your picture. The image tag looks like the following example:

   <img src="http://www.website.com/image.jpg" />

3. Enter "width=" and "height=" descriptions inside the tag. Place a set of quotation marks after each equal sign as follows:

   <img src="http://www.website.com/image.jpg" width=" " height=" " />

4. Type in a number value after the width and height entries. These numbers resize the image in pixels to the dimensions that you entered. For example, to specify that the photo is "300" pixels wide by "200" pixels high, enter the following:

   <img src="http://www.website.com/image.jpg" width="300" height="200" />

5. Save your file. Select the "Open File" or "Open" option under the "File" menu of your web browser to preview your work.

Tips & Warnings

• If your image code currently has a width and height attribute, make sure to decrease or increase the number value evenly so that the image retains its proportions. For instance, if you increase the width number by 50, add 50 to the height as well.

References

• W3Schools: HTML Img Tag
• W3Schools: HTML Img Width Attribute
• W3Schools: HTML Img Height Attribute

Resources

• HTML Code Tutorial: HTML IMG
• World Wide Web Consortium (W3C): Dave Raggett's Introduction to HTML