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 directly to the <img> tag, or by using CSS to control the size. The most straightforward method is to write the dimensions right into your image tag: <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 original file size.

You can also resize using only one dimension — if you set width to 300 and leave height blank, the browser will automatically scale the height to keep the image from looking stretched or squashed. This is called maintaining the aspect ratio, and it is the safest way to avoid distorted images.

Key Takeaways

Add width and height attributes directly to the <img> tag to resize: <img src="photo.jpg" width="300" height="200">.
Set only width or only height and leave the other blank to keep the image from looking stretched.
Use CSS in a <style> tag or external stylesheet to resize multiple images at once or to change size based on screen size.
Percentage widths like width="100%" make images scale to fit their container on any device.
Always resize in the HTML or CSS layer, not by editing the actual image file, so you can change sizes without re-uploading.

Using width and height attributes in the image tag

The width and height attributes are the most direct way to resize. You place them inside the opening <img> tag along with the src attribute that points to your image file. Both values are measured in pixels by default.

Here is a complete example:

<img src="sunset.jpg" width="400" height="300" alt="A sunset over the ocean">

This displays the image at exactly 400 pixels wide and 300 pixels tall. The alt attribute is not about size — it is text that appears if the image fails to load, and it helps screen readers describe the image to people who cannot see it.

If your original image is 800 × 600 pixels and you set width to 400 and height to 300, the browser shrinks it to half size. If you set width to 1200 and height to 900, the browser stretches it larger. Either way, the file itself does not change — only what you see on the page changes.

Resizing with only width or only height

Setting both width and height works, but if the numbers do not match your image's original proportions, the result can look squashed or stretched. The safer approach is to set one dimension and let the browser calculate the other.

For example:

<img src="photo.jpg" width="300" alt="A photo">

If your photo is originally 600 × 400 pixels, setting width to 300 tells the browser to make it half as wide. The browser automatically makes it half as tall too — 200 pixels — so the image stays in proportion. You never have to do the math yourself.

This method is especially useful when you do not know the original dimensions of your image, or when you are working with images from different sources that have different sizes.

Resizing images with CSS

CSS gives you more control, especially when you want to resize many images at once or change sizes based on screen width. You can write CSS in a <style> tag in your HTML file, or in a separate CSS file that your HTML links to.

Here is a straightforward example using a <style> tag:

<style> img { width: 300px; height: auto; } </style> <img src="photo1.jpg" alt="Photo 1"> <img src="photo2.jpg" alt="Photo 2">

This CSS rule says: make every <img> tag 300 pixels wide, and set height to auto so the browser calculates it automatically. Both images on the page will resize to 300 pixels wide without you having to add width and height to each tag.

You can also target specific images by giving them a class or id attribute. For example, if you write <img src="photo.jpg" class="thumbnail">, you can then write CSS that says .thumbnail { width: 150px; height: auto; } to resize only images with that class.

Making images responsive with percentage widths

A responsive image is one that changes size based on the screen it is displayed on. On a desktop, it might be 600 pixels wide; on a phone, it shrinks to fit the smaller screen. You create responsive images by using percentages instead of fixed pixel numbers.

For example:

<img src="banner.jpg" width="100%" alt="Banner">

The width="100%" tells the browser to make the image as wide as its container — if the container is 800 pixels, the image is 800 pixels; if the container is 400 pixels, the image is 400 pixels. The height scales automatically to keep the image in proportion.

You can also use percentages in CSS:

<style> img { width: 80%; height: auto; } </style>

This makes every image 80 percent as wide as its container, leaving a little margin on the sides. Responsive sizing is especially important for websites viewed on phones, tablets, and desktops of different sizes.

Resizing images inside containers or divs

Sometimes you want to control the size of an image by controlling the size of the box it sits in. You can wrap an image in a <div> (a container) and set the div's width and height, then make the image fill that space.

Here is an example:

<style> .image-box { width: 300px; height: 200px; } .image-box img { width: 100%; height: 100%; object-fit: cover; } </style> <div class="image-box"> <img src="photo.jpg" alt="A photo"> </div>

The <div> is 300 × 200 pixels. The image inside it is set to width: 100% and height: 100%, so it fills the entire div. The object-fit: cover property tells the browser to scale the image to cover the whole space without distorting it — if the image's proportions do not match the div's, the browser crops the edges instead of stretching.

This approach is useful when you want a consistent size for a grid of images, or when you want images to fill a specific layout area.

Common mistakes and how to avoid them

The most common mistake is setting both width and height to numbers that do not match the image's original proportions. If your image is 800 × 600 pixels (a 4:3 ratio) and you set width to 400 and height to 300, you are fine — that is still 4:3. But if you set width to 400 and height to 400, the image will look squashed horizontally. Always set only one dimension, or make sure both dimensions keep the same ratio as the original.

Another mistake is forgetting to include the alt attribute. The alt text is not about size, but it is required for accessibility and for search engines to understand what the image shows. Every <img> tag should have an alt attribute, even if it is empty: <img src="photo.jpg" alt="">.

A third mistake is resizing very large images down to very small sizes in HTML. If your image file is 5 megabytes and you resize it to 100 pixels wide on the page, the browser still downloads the entire 5-megabyte file — it just displays a tiny version. For better performance, edit the actual image file to be smaller before you upload it, or use an image optimization tool.

Frequently Asked Questions

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

Attributes go directly in the tag and explore to that one image. CSS goes in a <style> tag or separate file and can explore to many images at once. CSS is more flexible for responsive design and for changing sizes across a whole website without editing each tag.

Can I use percentages in the width and height attributes?

Yes. width="50%" makes the image 50 percent as wide as its container. Percentages are especially useful for responsive design because the image scales based on screen size.

What does object-fit do?

The object-fit property controls how an image fills a space when its proportions do not match the container. object-fit: cover scales the image to cover the whole space and crops the edges if needed. object-fit: contain scales the image to fit inside the space without cropping, which may leave empty space.

Should I resize images in HTML or edit the file itself?

Resize in HTML or CSS when you want to change how the image looks on the page without re-uploading. Edit the file itself when the original is too large and you want to reduce file size for faster loading. Both are useful in different situations.

Why does my image look blurry when I make it larger?

Images are made of pixels. When you enlarge an image beyond its original size, the browser stretches those pixels, which makes the image look blurry or pixelated. To avoid this, use an image that is already large enough, or use a vector image format (like SVG) that scales without losing quality.

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.