How to Change Image Size in HTML: Methods, Attributes, and Best Practices

Controlling image size in HTML is one of the most fundamental skills in web development. Whether you're building a personal site, a professional portfolio, or a full web app, knowing how to resize images correctly affects both how your page looks and how fast it loads. There's more than one way to do it — and the method you choose matters.

The Two Core Approaches: HTML Attributes vs. CSS

HTML gives you two main tools for controlling image dimensions: inline HTML attributes and CSS styling. They can produce similar visual results, but they work differently and carry different implications for maintainability and performance.

Using Width and Height Attributes Directly in HTML

The most straightforward method is adding width and height attributes directly to the <img> tag:

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

These values are treated as pixel measurements by default. The browser renders the image at exactly those dimensions, regardless of the image's original size.

Why these attributes still matter: Even when you're styling images with CSS, including width and height attributes in your HTML is considered best practice. Browsers use them to reserve space in the layout before the image loads, which prevents Cumulative Layout Shift (CLS) — the jarring page-jumping effect that happens when images pop in and push other content around.

Using CSS to Resize Images

CSS offers more control and flexibility. You can apply styles inline, in a <style> block, or in an external stylesheet:

<!-- Inline CSS --> <img src="photo.jpg" style="width: 400px; height: 300px;" alt="A sample photo"> 

/* External or internal stylesheet */ img { width: 400px; height: 300px; } 

CSS supports a wider range of unit types than HTML attributes alone:

Maintaining Aspect Ratio

One of the most common mistakes when resizing images is distorting them by setting both width and height to arbitrary values. If the proportions don't match the original image, the result looks stretched or squashed.

The fix is simple: set one dimension and let the other be auto.

<img src="photo.jpg" width="400" height="auto" alt="A sample photo"> 

Or in CSS:

img { width: 400px; height: auto; } 

This tells the browser: scale the image to 400 pixels wide and calculate the height automatically to preserve the original proportions.

Making Images Responsive 🖥️

A fixed pixel width works on a desktop browser but can break layouts on smaller screens. Responsive images scale fluidly with the container.

The most common CSS approach:

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

max-width: 100% means the image will never exceed the width of its container, but it won't artificially stretch if the container is larger than the image itself. Combined with height: auto, it stays proportional at any screen size.

For more advanced responsive scenarios, HTML provides the srcset attribute and the <picture> element, which let you serve different image files at different screen sizes or resolutions — not just the same image scaled down via CSS. This is relevant when performance and bandwidth are priorities.

What object-fit Does That Width and Height Can't

When you need an image to fill a fixed-size container without distortion, object-fit becomes essential:

img { width: 300px; height: 300px; object-fit: cover; } 

This is especially useful for thumbnail grids, profile images, or any layout where consistent box sizes are required regardless of source image dimensions.

Inline HTML vs. CSS: When Each Makes Sense

HTML attributes (width="400" height="300") are appropriate when:

• You want to explicitly define intrinsic dimensions for layout stability
• You're working in environments where CSS is limited or unavailable (some email clients, CMS platforms)

CSS is preferable when:

• You need responsive, flexible, or conditional sizing
• You're managing styles across multiple images or pages
• You want to separate presentation from structure (a core web development principle)

Mixing both is common and often intentional — HTML attributes for layout hints, CSS for visual control. 🎨

Factors That Shape Your Specific Approach

The "right" method for resizing images in HTML isn't universal. Several variables shift the equation:

• Your project's scope: A single landing page has different needs than a large CMS-driven site
• Responsive requirements: Mobile-first designs lean heavily on CSS units like % and max-width
• Performance goals: Serving correctly sized source images matters as much as CSS scaling — a 4MB image styled down to 200px still downloads at full weight
• Framework or CMS context: React, WordPress, and similar environments sometimes handle images through their own components with built-in sizing logic
• Browser support needs: Most modern CSS properties like object-fit are widely supported, but older environments may behave differently

How these factors apply to your build — the stack you're using, the devices you're targeting, and the performance benchmarks you're working toward — determines which combination of techniques will actually serve you best.