How to resize an image with HTML

Tip: The steps below are for users who want to keep an image at its original file size (in KB or MB) and just re-size the display size of the image on a web page. Although this is possible, we still suggest you re-size an image using an image editor to reduce the file size and reduce the download time of the image. When an image is re-sized using the steps below, it still has to load the larger image, even though it appears smaller in the browser.

Re-size with HTML

Specify the width and height in your IMG SRC HTML tag as shown in the example below.

<img src=""  width="200" height="40" alt="Computer Hope">

How the image appears normally.

Computer Hope

Using the above code to resize the image.

Computer Hope

Note: When re-sizing an image with HTML code, you need to maintain the aspect ratio. Otherwise, the image could become distorted and lose some image quality.

Re-size with CSS

You can also re-size an image through CSS, as shown in the examples below.



In the first example, the actual size in pixels is specified for width and height. Using this option limits the images that can use that CSS. Since it specifies a width and height, this method could result in distorted images if an image does not have a 5:1 aspect ratio.

The second example specifies a percentage of original image size, both width and height, instead of size in pixels. Using this option allows for use with a greater range of images. Since a percentage of image width and height is specified, the browser can resize nearly any image and maintain its aspect ratio.

To apply the CSS to an IMG SRC HTML tag, you would do the following.

<img class="resize" src=""  alt="Computer Hope">

Using CSS results in shorter IMG SRC tags, as the width and height is handled with CSS and you only have to specify the class name in the tag to activate the CSS code for that image.