How to Resize Images in HTML Code

The two ways 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 in a <style> block or external stylesheet. The attribute method is faster for one-off changes; the CSS method is cleaner when you're resizing many images or want the same size across your whole site.

The simplest approach is to add the dimensions directly to your image tag. If your image file is called photo.jpg and you want it 300 pixels wide and 200 pixels tall, you write: <img src="photo.jpg" width="300" height="200">. The browser will shrink or stretch the image to fit those exact dimensions.

The CSS approach gives you more control and keeps your HTML cleaner. You add a class or id to the image tag — for example, <img src="photo.jpg" class="thumbnail"> — then define the size in a style block: .thumbnail { width: 300px; height: 200px; }. This way, if you use the same class on ten images, they all resize together.

Key Takeaways

Add width and height attributes directly to the <img> tag to resize a single image without touching your CSS.
Use CSS classes or ids when you need to resize multiple images the same way or want to change sizes later without editing HTML.
Always include both width and height to prevent the image from stretching unevenly; if you set only one, the browser scales the other proportionally.
Pixels (px) are the standard unit for image dimensions on the web, though you can also use percentages to make images scale with the page.

Using width and height attributes in the img tag

The <img> tag is where your image lives in HTML. To resize it, you add two attributes: width and height. Both take a number in pixels. Here is a complete example:

The alt attribute is not about size — it describes the image for people using screen readers — but it belongs in every <img> tag anyway. The width and height attributes tell the browser exactly how many pixels wide and tall to make the image. If your original file is 2000 by 1500 pixels, the browser will shrink it down to 400 by 300 on the page.

You do not have to specify both dimensions. If you write only width="400", the browser will automatically scale the height to keep the image from looking stretched or squashed. The same works in reverse: set only height, and width scales automatically. But setting both is safer because you control exactly how much space the image takes up on your page.

Resizing images with CSS

CSS gives you more flexibility, especially when you are working with many images or want to change sizes without rewriting HTML. You can target images by class, id, or tag name and set their dimensions in a style block.

Here is the HTML:

And here is the CSS in a <style> block in your <head>:

.gallery-image { width: 250px; height: 250px; }

Now all three images are 250 by 250 pixels. If you later decide they should be 300 by 300, you change the CSS once and all three update. You can also use CSS to resize all images on a page at once by targeting the <img> tag itself: img { width: 100%; } makes every image as wide as its container.

Keeping images from looking stretched or squashed

When you resize an image, the browser does not automatically keep the original proportions. If your photo is naturally 4 inches wide by 3 inches tall, and you set width to 400 pixels but height to 500 pixels, the image will look distorted.

The safest method is to set only one dimension and let the browser calculate the other. If you write width="400" with no height, the browser keeps the original ratio. The same works with CSS: width: 400px; with no height attribute will scale the image proportionally.

If you need a specific size — say, a square thumbnail — and you do not want the image stretched, use CSS with object-fit. This property tells the browser how to handle an image that does not fit the dimensions you set. For example:

.thumbnail { width: 200px; height: 200px; object-fit: cover; }

The cover value makes the image fill the entire 200 by 200 space without stretching, cropping the edges if needed. Other options include contain (shrink to fit without cropping) and fill (stretch to fit, which may distort the image).

Using percentages instead of fixed pixel sizes

Pixels work well when you want an image to stay the same size no matter what device views it. But on phones, tablets, and desktops, a 400-pixel-wide image looks different on each screen. Percentages let you resize images based on their container.

If you set width="100%", the image becomes as wide as its parent element — the <div> or section it sits inside. On a desktop, that might be 800 pixels; on a phone, 375 pixels. The image scales automatically. Here is an example:

You can also use percentages in CSS: img { width: 100%; height: auto; }. The auto value for height tells the browser to calculate it based on the width, keeping the image proportional. This approach is common in responsive design, where a site looks good on screens of any size.

One caution: if you set both width and height to percentages without object-fit, the image may stretch. Use height: auto; to avoid that problem.

Resizing images in external stylesheets

For larger projects, you usually keep CSS in a separate file instead of a <style> block in your HTML. This file is called an external stylesheet, often named style.css.

You link to it in your HTML <head> like this: <link rel="stylesheet" href="style.css">. Then in style.css, you write the same CSS rules you would put in a <style> block:

.profile-pic { width: 150px; height: 150px; border-radius: 50%; }

The border-radius property is a bonus: it rounds the corners of the image. Set it to 50% to make a square image circular. External stylesheets are cleaner than inline attributes because you can reuse the same CSS across many HTML pages, and you can change all image sizes in one place.

Common mistakes when resizing images

The most frequent error is setting both width and height to exact pixel values when the original image has different proportions. This stretches the image. Always set only one dimension, or use object-fit to control how the image fills the space.

Another mistake is forgetting that the browser does not shrink the actual file size when you resize the image in HTML or CSS. If your photo is 5 megabytes and you display it at 200 pixels wide, the browser still downloads the full 5 megabytes. For faster pages, use an image editor to shrink the file before uploading it. HTML and CSS resizing is for layout, not for reducing file size.

A third common issue is using very large pixel values on mobile devices. A 1000-pixel-wide image looks fine on a desktop but overflows a phone screen. Use percentages or CSS media queries to make images responsive — that is, sized appropriately for each device.

Frequently Asked Questions

Should I use width and height attributes or CSS?

Use attributes for a single image you want to resize once. Use CSS when you are resizing multiple images, want to change sizes later without editing HTML, or are building a responsive site. CSS is more flexible and keeps your HTML cleaner.

What happens if I set width and height to different proportions than the original image?

The browser stretches or squashes the image to fit the exact dimensions you set, which usually looks bad. Set only one dimension and let the browser calculate the other, or use object-fit: cover to crop instead of stretch.

Can I resize an image to be responsive on phones and desktops?

Yes. Use width: 100% and height: auto in CSS to make the image scale with its container. On a phone, the container is narrower, so the image shrinks automatically. On a desktop, it grows to fill the wider space.

Does resizing an image in HTML make the file smaller or faster to read?

No. Resizing in HTML or CSS only changes how large the image appears on the page. The browser still downloads the entire original file. To reduce file size and speed up your page, use an image editor to shrink the file before you upload it.

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

Width sets an exact size. Max-width sets a maximum size but allows the image to be smaller if its container is smaller. Max-width is safer for responsive design because it prevents images from overflowing on narrow screens.

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.