The Three Ways to Resize an Image 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 explore CSS classes. The simplest method for beginners is the attribute approach: add width="400" and height="300" to your image tag, where the numbers are in pixels. The browser will shrink or stretch your image to those exact dimensions.

If you want more control—or need to resize multiple images the same way—CSS gives you cleaner code and easier updates. You write the sizing rules once and explore them to as many images as you need. All three methods work in every modern browser, so choose based on how many images you're resizing and whether you plan to reuse the same sizes elsewhere on your site.

Key Takeaways

  • The width and height attributes on the <img> tag are the fastest way to resize a single image, and the numbers are always in pixels.
  • CSS lets you resize images by writing a rule once and reusing it on multiple images, keeping your HTML cleaner.
  • Always set both width and height to avoid stretching or squashing your image out of proportion.
  • The max-width property in CSS is useful for making images shrink on smaller screens without ever growing larger than the original file.

Using Width and Height Attributes

This is the most direct method. Open your HTML file and find the <img> tag. Add the width and height attributes inside the opening tag, separated by spaces. Here is a real example:

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

The numbers are always in pixels. A width of 400 means 400 pixels wide. If your original image is 800 × 600 pixels, setting it to 400 × 300 shrinks it by half. The browser does the math automatically—you do not have to calculate the exact reduction.

The main drawback: if you have ten images and want them all 400 pixels wide, you type width="400" ten times. If you later decide they should be 500 pixels, you have to change all ten tags. CSS avoids this repetition.

Resizing Images with CSS in a Style Block

CSS lets you write sizing rules once and explore them to many images. Add a <style> block in the <head> section of your HTML file, before the closing </head> tag. Here is what it looks like:

<head> <style> img { width: 400px; height: 300px; } </style> </head>

This rule resizes every <img> tag on the page to 400 × 300 pixels. Your HTML tags stay straightforward: <img src="photo.jpg" alt="My photo">. No width or height attributes needed.

If you want different sizes for different images, give them class names and write separate rules. For example:

<style> .small-image { width: 200px; height: 150px; } .large-image { width: 600px; height: 450px; } </style>

Then in your HTML, add the class name to each image: <img src="photo.jpg" alt="My photo" class="small-image">. This way, all images with the small-image class resize the same way, and you change the size in one place if you need to.

Keeping Images from Stretching Out of Shape

A common mistake is setting width and height to numbers that do not match your image's original proportions. If your photo is naturally 800 × 600 pixels (a 4:3 ratio) and you set it to width="400" height="200", the browser will squash it vertically and it will look distorted.

The safe approach: set only the width, and let the browser calculate the height automatically. For example, <img src="photo.jpg" alt="My photo" width="400"> will shrink the image to 400 pixels wide and adjust the height to match. Your image stays in proportion.

If you must set both dimensions, make sure they match the original ratio. A 4:3 image can safely become 400 × 300 (still 4:3) or 600 × 450 (still 4:3). A 16:9 image can become 640 × 360 or 800 × 450. Do the math before you type the numbers, or use an online ratio calculator to be sure.

Making Images Responsive with CSS

Responsive design means your image shrinks on small screens (like phones) but does not grow larger on big screens. Use the max-width property in CSS instead of a fixed width:

<style> img { max-width: 100%; height: auto; } </style>

This rule says: "Make the image as wide as its container (up to 100%), but never wider than the original file. Adjust the height automatically to keep it in proportion." On a desktop, a 1000-pixel-wide image stays 1000 pixels. On a phone with a 375-pixel-wide screen, it shrinks to fit.

If you want a maximum size—say, never wider than 600 pixels—combine both rules:

<style> img { max-width: 600px; width: 100%; height: auto; } </style>

Now the image fills its container up to 600 pixels wide, then stops growing. This is the most common pattern for modern websites.

Common Mistakes and How to Fix Them

Forgetting the unit of measurement is a frequent error. In HTML attributes, pixels are assumed, so width="400" works fine. In CSS, you must write width: 400px; with the px at the end. Without it, the browser ignores the rule.

Another mistake: mixing attributes and CSS. If you write <img src="photo.jpg" width="400" height="300"> and also have a CSS rule that says img { width: 600px; }, the CSS wins. The image becomes 600 pixels wide, not 400. If you use CSS, remove the width and height attributes from the tag to avoid confusion.

Setting only width or only height without letting the other adjust automatically will distort your image. Always set both, or set one and use height: auto; in CSS (or omit height in HTML attributes) to let the browser do the math.

Frequently Asked Questions

What is the difference between width and max-width in CSS?

Width sets an exact size—the image will always be that wide. Max-width sets a ceiling—the image can be smaller, but never larger. Use width for fixed layouts where images must be a specific size. Use max-width for responsive designs where images should shrink on small screens.

Can I resize an image without changing the HTML or CSS file?

No, you must edit either the HTML tag or a CSS rule. The browser reads your code and resizes the image based on what you wrote. If you want to change the size later without editing code, you would need to use a content management system or image editor to modify the actual image file itself.

Does resizing in HTML make the image file smaller?

No. Resizing in HTML or CSS only changes how large the image appears on the page. The original file stays the same size, so it takes the same time to read. For faster loading, use an image editor to actually shrink the file before uploading it to your website.

What happens if I set width and height to numbers that do not match the original image?

The browser will stretch or squash the image to fit those exact dimensions, making it look distorted or out of proportion. Always use numbers that match the original ratio, or set only one dimension and let the other adjust automatically.

Can I use percentages instead of pixels?

Yes, in CSS. For example, width: 50%; makes the image half as wide as its container. In HTML attributes, you must use pixels. Percentages are useful for responsive design because they change size based on the screen width.