Image sizing basics in HTML - Browser Rendering Trace

Render Flow - Image sizing basics

[Read <img>] -> [Create IMG node] -> [Load image source] -> [Calculate intrinsic size] -> [Apply CSS width/height if any] -> [Layout image box] -> [Paint image pixels]

The browser reads the <img> tag, loads the image file, calculates its natural size, then applies any CSS width or height properties before placing it on the page.

Render Steps - 4 Steps

Code Added:<img src="https://via.placeholder.com/150" alt="Placeholder Image">

Before

[Empty page]

→

After

[Image box 150x150]
[█████████████████]
[█████████████████]
[█████████████████]

The browser loads the image at its natural size of 150 by 150 pixels and displays it.

🔧 Browser Action:Creates IMG element, loads image resource, calculates intrinsic size, paints image

Code Sample

A 150x150 placeholder image is resized to 100px wide, keeping its height proportional, with a visible border.

HTML

<img src="https://via.placeholder.com/150" alt="Placeholder Image">

HTML

img {
  width: 100px;
  height: auto;
  border: 2px solid #333;
}

Render Quiz - 3 Questions

After applying step 2 (width: 100px), what happens to the image height?

A It becomes 100px regardless of aspect ratio

B It stays at the original 150px height

C It scales proportionally to keep the aspect ratio

D It disappears

Common Confusions - 2 Topics

Why does my image look stretched when I set width and height to different values?

Setting both width and height to fixed values can distort the image because it forces the image to those exact dimensions, ignoring the natural aspect ratio. See render_steps 2 and 3 where height:auto keeps proportions.

💡 Use only one dimension fixed and set the other to auto to keep the image's natural shape.

Why does adding a border make my image bigger than expected?

Borders add to the total size of the image box, so a 2px border adds 4px (2px each side) to width and height. This is shown in render_step 4.

💡 Remember borders add outside the image content size, increasing total space used.

Property Reference

Property	Value Applied	Effect on Image Size	Common Use
width	auto (default)	Image uses natural width	Show image at original size
width	100px (or any length)	Sets image width, scales height proportionally if height:auto	Resize image width
height	auto (default)	Height adjusts to keep aspect ratio	Maintain image proportions
height	100px (or any length)	Sets image height, scales width proportionally if width:auto	Resize image height
border	2px solid #333	Adds border around image, increasing total box size	Visual emphasis or styling

Concept Snapshot

Images have natural size from the file. Setting width or height resizes the image. Use height:auto or width:auto to keep proportions. Borders add to the total size around the image. Avoid setting both width and height to fixed values to prevent distortion.