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. 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.

Computer Hope

How the image appears normally

Using the above code to resize the image

Resize with CSS

You can also resize an image through CSS, as shown in the examples below.

When resizing an image, you need to maintain the aspect ratio. Otherwise, the image could become distorted and lose some image quality.

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. 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=“https://www.computerhope.com/cdn/computer-hope.jpg"  alt=“Computer Hope logo small”>

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

  • Should I add the height and width to the img src tag?
  • How to add pictures to an HTML website.
  • Where can I find free public domain images and pictures?
  • HTML and web design help and support.