How to Resize Images in HTML: Width, Height, and CSS Methods

The simplest way to resize an image in HTML

You resize an image in HTML by adding width and height attributes to the <img> tag, or by using CSS to set the size. The most direct method is to write the dimensions right into your HTML: <img src="photo.jpg" width="300" height="200">. This tells the browser to display the image at 300 pixels wide and 200 pixels tall, regardless of the image's actual file size.

You can also resize using only width or only height — the browser will scale the other dimension proportionally so the image doesn't stretch or squash. If your image is 800 by 600 pixels and you set width to 400, the height automatically becomes 300.

For more control, especially when you want the same sizing across many pages, use CSS instead. A single line like img { width: 300px; } in your stylesheet resizes every image on the page. This approach is cleaner than repeating width and height on every single tag.

Key Takeaways

Add width and height attributes directly to the <img> tag to resize individual images in your HTML.
Setting only width or only height lets the browser scale the other dimension automatically, keeping the image proportional.
Use CSS rules like img { width: 300px; } to resize all images of a type at once, rather than editing each tag separately.
Always specify dimensions to prevent layout shift — when the browser knows the image size in advance, it reserves the right space before the image loads.
Percentage widths like width: 50% make images responsive, scaling to fit their container on phones and desktops.

Using width and height attributes in the img tag

The width and height attributes are the oldest and most straightforward way to resize. You write them as numbers representing pixels: <img src="photo.jpg" width="300" height="200">. The browser reads these numbers and displays the image at exactly that size.

You do not need to match the image's actual dimensions. If your photo is 2000 by 1500 pixels but you set width to 300 and height to 200, the browser shrinks it down. This is useful when you have a high-quality original file but want a smaller version on the page. The full file still downloads, so this method does not save bandwidth — it only changes what the visitor sees.

If you set only width and leave height blank, the browser calculates height automatically. For example, <img src="photo.jpg" width="300"> on a 2000-by-1500-pixel image produces a 300-by-225-pixel display. This prevents distortion and is the safest approach when you do not know the exact proportions of every image.

Resizing with CSS instead of HTML attributes

CSS gives you more flexibility and keeps your HTML cleaner. Instead of writing width and height on every <img> tag, you write a rule once in a <style> block or external stylesheet: img { width: 300px; }. Now every image on that page (or site, if the CSS is in a separate file) becomes 300 pixels wide.

You can target specific images too. If you give an image a class name like <img src="photo.jpg" class="thumbnail">, you can resize only thumbnails: .thumbnail { width: 150px; }. This way, hero images stay large and thumbnails stay small without repeating code.

CSS also lets you use units other than pixels. width: 50% makes an image half the width of its container, which is essential for responsive design — the image shrinks on phones and grows on desktops without you writing separate HTML for each screen size. You can also use max-width: 100% to prevent an image from ever exceeding its container, a common pattern for mobile-friendly pages.

Maintaining proper image proportions

When you resize an image, the most common mistake is setting both width and height to arbitrary numbers, which stretches or squashes the image. If your original is 800 by 600 pixels (a 4:3 ratio) and you set width to 400 and height to 300, you get the correct 4:3 ratio and no distortion. But if you set width to 400 and height to 200, the image looks compressed vertically.

The safest approach is to set only one dimension and let the browser calculate the other. Use <img src="photo.jpg" width="300"> or img { width: 300px; } without specifying height. The browser reads the image file, sees it is 800 by 600, and automatically makes it 300 by 225.

If you must use CSS and want to lock the proportions, use the aspect-ratio property: img { width: 300px; aspect-ratio: 4 / 3; }. This tells the browser "keep this image at a 4-to-3 width-to-height ratio," so if the width is 300, the height is always 225. This property works in all modern browsers and prevents accidental distortion.

Responsive image sizing for phones and desktops

A fixed pixel width like width: 300px looks fine on a desktop but may be too large on a phone screen. Responsive sizing uses percentages or viewport units so images scale with the screen. The most common pattern is img { width: 100%; max-width: 600px; }, which means "make the image as wide as its container, but never wider than 600 pixels."

On a desktop with a wide container, the image stretches to fill it (up to 600 pixels). On a phone with a narrow container, the image shrinks to fit. This single rule works for all screen sizes without media queries or JavaScript.

You can also use width: 100% alone, which makes the image exactly as wide as its container. Pair it with height: auto to keep proportions: img { width: 100%; height: auto; }. This is the standard approach for images inside flexible layouts like Bootstrap grids or CSS Flexbox.

Why specifying image size matters for page performance

When you include width and height attributes (or CSS dimensions), the browser knows how much space to reserve for the image before it finishes loading. This prevents layout shift — the annoying jump that happens when content suddenly moves as images pop into place. Visitors see a stable page, and the browser can render text and other elements in their final positions when ready.

Without dimensions, the browser has to wait for the image file to read and read its properties before it knows how much space to leave. During that wait, the page layout is incomplete, and text might reflow once the image arrives. This is especially noticeable on slow connections.

Modern browsers also use the aspect-ratio property to prevent shift. If you write <img src="photo.jpg" width="800" height="600">, the browser calculates the ratio (4:3) and reserves that proportion of space even before the image loads. This is why it is good practice to always include width and height, even if you plan to resize with CSS.

Common image resizing mistakes and how to avoid them

The most frequent error is resizing in both dimensions without checking proportions. A 2000-by-1500-pixel landscape photo squeezed into a 300-by-300-pixel square looks distorted. Always set one dimension and let the browser calculate the other, or use aspect-ratio to lock the proportions.

Another mistake is using very large pixel values in CSS when you mean percentages. width: 50 is invalid (the browser ignores it); you need width: 50% or width: 50px. Always include the unit — pixels (px), percentages (%), viewport width (vw), or another valid CSS unit.

A third pitfall is resizing images that are already small. If your original file is 300 by 200 pixels and you try to enlarge it to 600 by 400, the image looks blurry or pixelated. Resizing down (smaller) always works; resizing up (larger) degrades quality. Start with the largest image you might need and resize down from there.

Frequently Asked Questions

Can I resize an image to a different aspect ratio without distortion?

No — if you force an image into a different ratio, it will stretch or squash. A 4:3 photo cannot become 1:1 (square) without distortion. Instead, crop the image to the desired ratio using an image editor, or use CSS object-fit: cover to fill a container while hiding the edges. This keeps the image proportional but cuts off parts of it.

Does resizing in HTML reduce file size or bandwidth?

No. Resizing with width, height, or CSS only changes what the visitor sees — the full original file still downloads. To actually reduce file size, use an image editor or online tool to create a smaller version before uploading. Then resize that smaller file in HTML if needed.

What is the difference between width and max-width?

width: 300px makes the image exactly 300 pixels wide, always. max-width: 300px makes it 300 pixels wide or smaller, depending on its container. If the container is only 200 pixels wide, max-width: 300px shrinks the image to 200 pixels, but width: 300px overflows. Use max-width for responsive design.

Should I use width and height attributes or CSS?

Use both. Include width and height attributes in the HTML so the browser reserves space and prevents layout shift. Then use CSS to override them for responsive sizing: <img src="photo.jpg" width="800" height="600"> with img { width: 100%; height: auto; } in your stylesheet.

Why does my image look blurry after resizing?

You are probably enlarging a small image. A 300-by-200-pixel photo stretched to 600-by-400 pixels looks pixelated because the browser is guessing at pixels that do not exist. Start with a larger original file, or accept that the image will look soft at larger sizes. Some browsers use better scaling algorithms than others.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.