The three ways to change image size in HTML

You can resize an image in HTML by adding width and height attributes directly to the <img> tag, by using CSS in a <style> block, or by editing the image file itself before uploading. The attribute method is fastest for one-off changes. CSS is better when you want the same size applied to many images or need the image to shrink on smaller screens. Editing the file is best when you want to reduce file size and load time, not just display size.

Each method has a different purpose. Using HTML attributes changes only how the image appears on the page — the actual file stays the same size. CSS does the same thing but gives you more control over responsive behavior. Resizing the actual image file makes it smaller to download, which matters for site speed.

Key Takeaways

  • Add width="400" and height="300" directly to your <img> tag to resize it without touching the image file.
  • Use CSS with width: 400px; and height: 400px; when you want the same size on multiple images or need the image to respond to screen size.
  • Always include both width and height to prevent the image from stretching out of proportion, or use CSS to maintain the original aspect ratio automatically.
  • Resizing with HTML or CSS does not reduce file size — the browser still downloads the full image, so edit the actual file if page speed matters.

Using width and height attributes in the img tag

The simplest way to resize an image is to add width and height attributes directly inside the <img> tag. Open your HTML file and find the line where the image appears. It looks like this:

<img src="photo.jpg" alt="Description">

Add the attributes after src and before the closing >:

<img src="photo.jpg" alt="Description" width="400" height="300">

The numbers are in pixels by default. The image will display at 400 pixels wide and 300 pixels tall. If you only set width, the browser will shrink the height proportionally so the image does not stretch. If you set both width and height to different proportions than the original image, it will look squeezed or stretched.

Resizing with CSS for more control

CSS gives you more flexibility, especially when you want the same size on multiple images or need the image to shrink on phones. Add a <style> block in the <head> section of your HTML file, or link to an external CSS file.

To resize all images on the page, add this to your style block:

img { width: 400px; height: 300px; }

To resize only certain images, give them a class attribute and target that class in CSS. In your HTML:

<img src="photo.jpg" alt="Description" class="thumbnail">

In your CSS:

.thumbnail { width: 200px; height: 200px; }

To keep the image from stretching and make it shrink on smaller screens, use this instead:

.thumbnail { width: 100%; max-width: 400px; height: auto; }

This tells the browser to make the image as wide as its container (up to 400 pixels) and adjust the height automatically to match the original proportions. The height: auto; part is the key — it prevents stretching.

Maintaining the correct aspect ratio

When you set both width and height to exact numbers, you risk distorting the image. If the original image is 800 by 600 pixels (a 4:3 ratio) and you set it to 400 by 300, it stays proportional. But if you set it to 400 by 200, it will look squashed.

To avoid this, set only the width or only the height and let the browser calculate the other dimension. In HTML attributes, leave one out:

<img src="photo.jpg" alt="Description" width="400">

In CSS, use height: auto;:

img { width: 400px; height: auto; }

If you must set both dimensions, calculate them so they match the original ratio. If your image is 800 by 600 (a 4:3 ratio), then 400 by 300 works, or 600 by 450, or any other 4:3 combination.

Resizing the actual image file

HTML and CSS resizing only changes how the image looks on the page. The browser still downloads the full file, which matters if the original image is very large. To actually reduce file size and improve page load time, you need to edit the image itself using an image editor.

Free tools like GIMP, Pixlr, or Canva let you open an image, resize it, and save it at the new dimensions. Most also let you reduce the file size by lowering the quality or changing the format from PNG to JPG. After resizing, save the new file and upload it to your website instead of the original.

If you have many images to resize, batch processing tools like ImageMagick (command line) or XnConvert (graphical) can resize dozens at once. This is worth learning if you regularly work with large image libraries.

Common mistakes and how to fix them

The most common mistake is setting width and height to values that do not match the original image's proportions. This stretches or squashes the image. Fix it by using height: auto; in CSS or leaving the height attribute out of HTML.

Another mistake is forgetting that HTML attributes are in pixels by default. If you write width="50%", it will not work — use CSS for percentages. In CSS, you can use pixels, percentages, or other units like em or rem.

A third mistake is resizing with HTML or CSS and expecting the page to load faster. It will not. The browser downloads the full file no matter what size you display it at. If speed is your goal, resize the actual image file using an editor.

Frequently Asked Questions

What is the difference between width and height attributes and CSS sizing?

HTML attributes resize the image for that specific tag only. CSS resizes all images with that class or tag, and it is easier to make responsive designs that shrink on mobile. Both methods download the full file — neither reduces file size.

Should I always set both width and height?

No. Set only width and use height: auto; in CSS, or set only width in the HTML attribute. This keeps the image from stretching. Only set both if you have calculated them to match the original image's aspect ratio.

How do I make an image shrink on mobile phones?

Use CSS with width: 100%; max-width: 400px; height: auto;. This makes the image fill its container on small screens but never grow larger than 400 pixels. You can also use media queries to set different sizes for different screen sizes.

Does resizing an image in HTML make it load faster?

No. The browser downloads the full file no matter what size you display it at. To actually improve load time, resize the image file itself using an image editor and save the smaller version.

Can I resize an image to a percentage of the page width?

Yes, but only in CSS. Use width: 50%; to make the image half as wide as its container. In HTML attributes, you can only use pixel values. Always add height: auto; to keep the proportions correct.