HtmlHow-ToBeginner · 3 min read

How to Resize Image in HTML: Simple Methods Explained

To resize an image in HTML, use the width and height attributes inside the <img> tag or apply CSS styles like width and height. These methods let you control the image size directly in the browser.

📐

Syntax

The basic way to resize an image in HTML is by adding width and height attributes to the <img> tag. You can also use CSS styles to set these properties for more control.

width: sets the image width in pixels or percentage.
height: sets the image height in pixels or percentage.

html

<img src="image.jpg" width="300" height="200" alt="Example image">

Output

An image displayed with 300 pixels width and 200 pixels height.

💻

Example

This example shows how to resize an image using both HTML attributes and CSS styles. The first image uses HTML attributes, and the second uses CSS for responsive resizing.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resize Image Example</title>
  <style>
    .css-resize {
      width: 50%;
      height: auto;
      border: 2px solid #333;
    }
  </style>
</head>
<body>
  <h2>Resize with HTML attributes</h2>
  <img src="https://via.placeholder.com/600x400" width="300" height="200" alt="HTML resized image">

  <h2>Resize with CSS</h2>
  <img src="https://via.placeholder.com/600x400" class="css-resize" alt="CSS resized image">
</body>
</html>

Output

Two images displayed: the first is fixed at 300x200 pixels, the second scales to half the browser width with height adjusted automatically.

⚠️

Common Pitfalls

Common mistakes when resizing images include:

Setting only one dimension (width or height) without maintaining aspect ratio, which can distort the image.
Using pixel values without considering responsiveness, causing images to look too big or small on different devices.
Forgetting to add alt text, which is important for accessibility.

Always maintain aspect ratio by setting one dimension and letting the other adjust automatically (e.g., height: auto; in CSS).

html

<!-- Wrong: distorts image -->
<img src="https://via.placeholder.com/600x400" width="300" height="300" alt="Distorted image">

<!-- Right: maintains aspect ratio -->
<img src="https://via.placeholder.com/600x400" width="300" alt="Correct aspect ratio">

Output

First image appears stretched vertically; second image keeps correct proportions.

📊

Quick Reference

Method	Usage	Notes
HTML attributes		Simple, fixed size, may distort if aspect ratio ignored
CSS styles	img { width: 50%; height: auto; }	Flexible, responsive, recommended for modern layouts
Inline CSS		Quick styling, but better in stylesheet
Responsive	img { max-width: 100%; height: auto; }	Keeps image within container, scales on different screens

✅

Key Takeaways

Use width and height attributes or CSS to resize images in HTML.

Maintain aspect ratio by setting one dimension and letting the other adjust automatically.

CSS resizing is more flexible and better for responsive design.

Always include alt text for accessibility.

Avoid fixed pixel sizes if you want images to look good on all devices.