The Three Ways to Resize Images in HTML

You can change an image's size directly in the HTML tag using the width and height attributes, or you can control it with CSS. The simplest method is to add width and height to your <img> tag itself. The most flexible method is to use CSS, which lets you resize images across your whole site from one place.

All three approaches work. Which one you choose depends on whether you want to resize one image, a group of images, or images sitewide. Each has a different payoff in terms of how much code you have to write and how straightforward it is to change later.

Key Takeaways

  • Add width and height attributes directly to the <img> tag to resize a single image without touching CSS.
  • Use CSS classes or inline styles when you want to resize multiple images the same way or change sizes later without editing HTML.
  • Set only width or only height and the browser will scale the other dimension automatically to keep the image from looking stretched.
  • Percentages in CSS let images shrink and grow with the browser window, which is useful on phones and tablets.
  • The max-width property prevents images from becoming larger than their original size, which keeps them sharp.

Using Width and Height Attributes in the HTML Tag

The fastest way to resize a single image is to add width and height directly to the <img> tag. Both are measured in pixels by default. Here is the syntax:

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

This tells the browser to display the image 300 pixels wide and 200 pixels tall. If your original image is larger, the browser shrinks it. If your original image is smaller, the browser stretches it — which can make it look blurry. To avoid that, keep the width and height close to the image's actual size.

You can also set only width or only height. If you write <img src="photo.jpg" width="300" alt="Description"> without a height, the browser automatically scales the height to match, so the image does not look squashed or stretched. This is the safest approach when you do not know the original dimensions.

Resizing with CSS Classes

When you have multiple images that should all be the same size, or when you want to change sizes without editing HTML, use CSS. Create a class in your stylesheet and explore it to each image. Here is an example:

In your CSS file or <style> tag:

.small-image {   width: 200px;   height: auto; }

In your HTML:

<img src="photo.jpg" class="small-image" alt="Description">

The height: auto line tells the browser to calculate the height automatically based on the width, so the image stays in proportion. If you later decide all small images should be 250 pixels instead of 200, you change only the CSS — not every HTML tag.

Using Inline CSS Styles

Inline styles let you resize an image without creating a separate CSS class. Write the style directly in the tag:

<img src="photo.jpg" style="width: 300px; height: auto;" alt="Description">

This approach is useful for one-off changes or quick tests. The downside is that if you need to resize ten images the same way, you have to type the style ten times. A CSS class is cleaner for that situation.

Inline styles override CSS classes, so if you use both, the inline style wins. This can be helpful when one image needs to be different from the rest, but it can also cause confusion if you forget you added it.

Responsive Images That Resize with the Browser Window

On phones and tablets, you often want images to shrink when the screen is small. Use percentages instead of fixed pixel sizes:

.responsive-image {   width: 100%;   height: auto;   max-width: 600px; }

width: 100% means the image takes up the full width of its container. On a phone, that container might be 320 pixels wide. On a desktop, it might be 800 pixels wide. The image scales to fit.

max-width: 600px prevents the image from growing larger than 600 pixels, even on a very wide screen. Without it, the image could stretch so large it becomes blurry. The height: auto keeps the proportions correct as the width changes.

Avoiding Stretched or Blurry Images

Images look best when you do not force them into a size that does not match their original dimensions. If your original image is 800 pixels wide and 600 pixels tall, and you set width to 400 and height to 500, the image will look distorted.

Always set either width or height and let the browser calculate the other. Use height: auto in CSS or leave the height attribute out of HTML. This keeps the aspect ratio — the relationship between width and height — the same as the original.

If you must resize to a different aspect ratio, crop the image in a photo editor before you upload it. That gives you more control and usually looks better than stretching.

Frequently Asked Questions

Should I use pixels, percentages, or something else?

Pixels are best for fixed sizes that do not change. Percentages are best for responsive design on phones and tablets. Avoid em or rem unless you are resizing text, not images.

What is the difference between width and max-width?

width sets the exact size. max-width sets the largest size the image can be — it will shrink smaller if the container is smaller, but never grow larger. Use max-width for responsive images.

Can I resize an image without making it blurry?

Yes, if you shrink it. Shrinking always looks sharp. Growing an image larger than its original size makes it blurry because the browser has to guess at pixels that do not exist. Keep images at or below their original dimensions.

Do I need to set both width and height?

No. Set one and use height: auto in CSS or leave the other blank in HTML. The browser will calculate the missing dimension to keep the image in proportion.

Which method is best for a whole website?

Use CSS classes. They let you change sizes everywhere at once, keep your HTML clean, and make it straightforward to add new images later without repeating code.