How to Resize an Image in HTML: A Complete Guide

Resizing images is a common task when building websites. Whether you want to make your images responsive, reduce their display size, or fit them neatly into a layout, HTML and CSS provide several options for controlling image dimensions.

In this blog, we’ll walk through different methods to resize an image in HTML, best practices, and when to use each approach.

Table of Contents

📌 Method 1: Using HTML `width` and `height` Attributes

The simplest way to resize an image is by using the width and height attributes directly in the <img> tag.

Example:

<img src="example.jpg" width="300" height="200" alt="Sample Image">

Notes:

These values are in pixels.
Aspect ratio may be distorted if the width and height don’t match the original proportions.
This method is quick and doesn’t require CSS.

📌 Method 2: Using CSS `width` and `height` Properties

A more flexible and recommended approach is to control image size using CSS, either inline or in a stylesheet.

Example (Inline Style):

<img src="example.jpg" style="width: 300px; height: auto;" alt="Sample Image">

Example (External CSS):

<style>
  .resized-img {
    width: 100%;
    height: auto;
  }
</style>

<img src="example.jpg" class="resized-img" alt="Responsive Image">

Advantages:

Easier to maintain in larger projects.
Enables responsive design (e.g., width: 100% makes the image scale with its container).
Prevents distortion by maintaining aspect ratio (height: auto).

📌 Method 3: Responsive Image with `max-width`

To make sure your image resizes correctly across devices, use max-width.

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

This ensures that:

The image never exceeds the width of its container.
It retains its original aspect ratio.

📌 Method 4: Using `object-fit` for Background-like Behavior

If you’re placing an image in a fixed-size container and want it to fill or cover that space:

<div class="image-container">
  <img src="example.jpg" alt="Cover Image">
</div>

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

`object-fit` values:

contain: Scales the image to fit inside the container.
cover: Scales the image to fill the container and crop overflow.
fill: Stretches the image to fit, possibly distorting it.

✅ Best Practices

Use CSS for flexibility and maintainability.
Always include the alt attribute for accessibility.
Maintain aspect ratio with height: auto or object-fit: contain/cover.
Optimize image size (file size, not just display size) for performance.
For responsive designs, combine percentage-based width with media queries or flexbox/grid layouts.

🧠 Bonus Tip: Don’t Just Shrink Huge Images

While HTML and CSS can visually shrink large images, the actual file size still loads fully in the browser. Always compress and resize your images before uploading to improve page speed and performance.

🔚 Conclusion

Resizing an image in HTML can be done using:

HTML attributes (width, height)
CSS properties (width, height, max-width)
object-fit for more advanced control

Choose the method that suits your layout, design requirements, and performance needs.

📌 Method 1: Using HTML width and height Attributes