How to resize an image with HTML

The steps below guide users wanting to keep an image at its original file size (in KB or MB) and change the display size of the image with HTML (HyperText Markup Language). Although this is possible, we still suggest you resize an image using an image editor to reduce the file size and reduce the download time of the image.

• What program can I use to view, edit, or create images?

When an image's size is changed using the steps below, it still has to load the larger image, even though it appears smaller in the browser.

Resize with HTML

Specify the width and height in your "img src" HTML tag as shown in the example below.

<img src="https://www.computerhope.com/cdn/computer-hope.jpg" width="200" height="40" alt="Computer Hope">

How the image appears normally

Using the code above to resize the image

Resize with CSS

Alternatively, resize an image through CSS (Cascading Style Sheets) as shown in the examples below.

img.resize {
  width:200px;
  height:40px;
}

img.resize {
  max-width:50%;
  max-height:50%;
}

In the first example, the actual size in pixels is specified for width and height. Using this option limits the images that use that CSS. Since it specifies a width and height, this method could result in distorted images if it doesn't 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. 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="https://www.computerhope.com/cdn/computer-hope.jpg"  alt="Computer Hope logo small">

Using CSS results in shorter img tags, as you only have to specify the class name in the tag to activate the CSS code for that image.