The Two Ways to Resize Images 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 in a stylesheet. The HTML attributes method is the quickest for a single image. The CSS method is better when you want the same size applied to many images, or when you want the size to change based on screen width.

Both methods work in every browser. The choice depends on whether you are sizing one image or many, and whether you want the size to stay fixed or respond to different devices.

Key Takeaways

  • Add width and height attributes directly to the <img> tag to set a fixed size: <img src="photo.jpg" width="300" height="200">
  • Use CSS in a stylesheet or <style> tag to resize images when you want the same dimensions applied to multiple images or to change size on different screen sizes.
  • Specify width and height in pixels, percentages, or other units depending on whether you want a fixed or flexible size.
  • Setting only width or only height will automatically scale the other dimension to keep the image from stretching or squashing.

Using HTML Attributes to Set a Fixed Size

The simplest way to resize a single image is to add width and height attributes inside the <img> tag. Write the number in pixels with no unit needed:

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

This tells the browser to display the image at exactly 300 pixels wide and 200 pixels tall. The image will stretch or shrink to fit those dimensions, even if that distorts the original proportions. If you want to keep the image from looking stretched, set only one dimension and leave the other out. The browser will automatically scale the missing dimension to match the original image's proportions:

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

Now the image will be 300 pixels wide, and the height will adjust automatically. This is the safest approach when you do not know the original image dimensions or want to avoid distortion.

Using CSS to Resize Images

When you need to resize many images the same way, or when you want the size to change based on screen width, use CSS instead. You can write CSS in three places: inside a <style> tag in the HTML document, in an external stylesheet, or inline on the tag itself.

The simplest approach for beginners is to add a <style> tag in the <head> section of your HTML document:

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

This rule applies to every <img> tag on the page. If you want to resize only certain images, give them a class name and target that class in your CSS:

<img src="photo.jpg" class="thumbnail"> <style> .thumbnail { width: 150px; height: 150px; } </style>

Now only images with class="thumbnail" will be 150 by 150 pixels. Other images on the page will display at their original size.

Making Images Responsive to Screen Size

On phones and tablets, a fixed width of 300 pixels might be too large. To make images shrink on smaller screens, use percentages instead of pixels in your CSS:

img { width: 100%; height: auto; }

This tells the browser to make the image as wide as its container (usually 100% of the available space) and automatically scale the height to keep the proportions correct. The image will be large on a desktop, medium on a tablet, and small on a phone — all from the same CSS rule.

If you want a maximum size so the image does not get too large on very wide screens, add a max-width rule:

img { width: 100%; max-width: 600px; height: auto; }

Now the image will grow to fill its container up to 600 pixels wide, then stop growing even if the screen is wider.

When to Use Pixels, Percentages, and Other Units

Pixels are the most straightforward unit. Use pixels when you want an image to stay exactly the same size no matter what. Percentages are useful when you want the image to scale with its container — for example, an image inside a sidebar that should always be as wide as the sidebar itself.

Other units like em and rem exist but are rarely used for images. Stick with pixels for fixed sizes and percentages for flexible sizes. If you set width in percentages, always set height to auto to prevent distortion.

Avoiding Common Mistakes

The most common mistake is setting both width and height to different proportions than the original image. If the original image is 800 by 600 pixels (a 4:3 ratio) and you set width="300" height="200" (a 3:2 ratio), the image will look squeezed or stretched. Always set only one dimension, or make sure your width and height have the same ratio as the original.

Another mistake is forgetting to set height to auto when using percentages for width. Without height: auto, the image may not scale properly on different screen sizes. A third mistake is using very large images and then shrinking them with HTML or CSS. A 2000-pixel image displayed at 300 pixels still downloads at full size, wasting bandwidth. Resize the actual image file before uploading it to your website.

Frequently Asked Questions

What happens if I set width and height but the image is a different shape?

The image will stretch or squash to fit the dimensions you set. If the original is square and you set width="300" height="100", it will look stretched horizontally. To avoid this, set only width or only height and let the browser scale the other automatically.

Can I use percentages with HTML attributes instead of CSS?

No. HTML width and height attributes only accept pixel values or unitless numbers (which are treated as pixels). To use percentages, you must use CSS. Percentages in CSS are relative to the image's container, so they are useful for responsive design.

Does resizing an image in HTML or CSS change the actual file size?

No. Resizing in HTML or CSS only changes how large the image appears on the page. The browser still downloads the full original file. To reduce file size, you must edit the image in an image editor and save a smaller version before uploading it to your website.

How do I make an image smaller on mobile but larger on desktop?

Use CSS media queries to explore different sizes at different screen widths. For example, set width: 100% on phones and width: 50% on larger screens. Most developers use a framework like Bootstrap to handle this automatically, but you can write media queries yourself in your stylesheet.

Should I use width and height attributes or CSS?

Use HTML attributes for single images with a fixed size. Use CSS when you are resizing multiple images, or when you want the size to change based on screen width or container size. CSS is more flexible and easier to maintain across many pages.