Image sizing basics in HTML - Performance & Optimization

Performance: Image sizing basics

HIGH IMPACT

This affects how quickly images load and how smoothly the page renders, impacting the page's loading speed and visual stability.

Displaying images on a webpage efficiently

HTML

<img src="photo-200w.jpg" width="200" height="150" alt="Description">

The browser downloads an image sized close to display size, reducing file size and load time, and reserves space to prevent layout shifts.

📈 Performance GainReduces load time significantly; avoids layout shifts improving LCP and CLS

Displaying images on a webpage efficiently

HTML

<img src="large-photo.jpg" style="width: 200px; height: auto;">

The browser downloads a large image file but displays it smaller, wasting bandwidth and causing slower load times.

📉 Performance CostBlocks rendering longer due to large file download; triggers layout shifts when image resizes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large image resized with CSS only	Low	Multiple reflows as image loads and resizes	High due to repaint	[X] Bad
Image sized with width and height attributes	Low	Single layout pass	Low paint cost	[OK] Good

Rendering Pipeline

When an image is sized properly, the browser can reserve the correct space during layout, avoiding reflows and repaints caused by late image resizing.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to reflows triggered by image size changes

Core Web Vital Affected

LCP

This affects how quickly images load and how smoothly the page renders, impacting the page's loading speed and visual stability.

Optimization Tips

1Always specify width and height attributes on images to reserve space.

2Use image files sized close to their display size to reduce load time.

3Avoid resizing large images with CSS alone to prevent layout shifts and slow loading.

Performance Quiz - 3 Questions

Why should you specify width and height attributes on images?

A To make images load faster by skipping decoding

B To reserve space and prevent layout shifts during loading

C To reduce the file size of the image

D To automatically compress images in the browser

DevTools: Performance

How to check: Record a page load and look for long tasks caused by image decoding and layout shifts; use the Layout Shift Regions overlay in the Rendering tab.

What to look for: Look for layout shifts caused by images resizing after load and long image decode times delaying first paint.