Responsive images in CSS - Browser Rendering Trace

Render Flow - Responsive images

Parse HTML <img> with srcset and sizes

↓

Parse CSS max-width and width

↓

Calculate viewport width

↓

Select best image source from srcset

↓

Apply CSS width constraints

↓

Layout image box

↓

Paint image with chosen source

↓

Composite final page

The browser reads the HTML image element with srcset and sizes attributes, then uses CSS width rules and viewport size to pick the best image source and size to display, optimizing for screen size and resolution.

Render Steps - 3 Steps

Code Added:<img src="small.jpg" alt="A scenic view">

Before

[Empty page]

→

After

[Image box]
[small.jpg shown]
[Fixed size, no scaling]

Adding a simple image with a fixed source shows the image at its natural size.

🔧 Browser Action:Creates image box, loads small.jpg, paints image

Code Sample

An image that changes source based on screen width and scales responsively to fit its container.

CSS

<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
     sizes="(max-width: 600px) 480px, 800px" 
     alt="A scenic view">

CSS

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

Render Quiz - 3 Questions

After applying step 2, what determines which image file the browser loads?

A Only the src attribute

B The viewport width and the sizes attribute

C The CSS max-width property

D The image's alt text

Common Confusions - 3 Topics

Why does my image sometimes load a bigger file than expected?

The browser picks the image from srcset based on the sizes attribute and viewport width. If sizes says the image will be large, it loads a bigger file to keep quality.

💡 Check sizes attribute and viewport width to understand which image file is chosen (see render_step 2).

Why does my image overflow its container on small screens?

Without max-width: 100%, the image keeps its natural size and can be wider than the container, causing overflow.

💡 Always use max-width: 100% and height: auto to make images scale inside containers (see render_step 3).

Why does the image sometimes look blurry on high-res screens?

If the browser picks a smaller image from srcset for a high-resolution screen, the image can appear blurry because it is stretched.

💡 Use srcset with pixel density descriptors or larger widths to serve sharper images on high-res screens.

Property Reference

Property/Attribute	Value/Example	Effect on Image	Common Use
src	"small.jpg"	Sets default image source	Basic image display
srcset	"small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"	Provides multiple image sources with widths	Responsive image selection
sizes	"(max-width: 600px) 480px, 800px"	Tells browser image display size for viewport conditions	Helps browser pick correct srcset image
max-width	100%	Limits image width to container width	Responsive scaling
height	auto	Keeps image aspect ratio when width changes	Prevents distortion
display	block	Removes inline spacing below image	Cleaner layout

Concept Snapshot

Responsive images use srcset and sizes attributes to let browsers pick the best image file for screen size. CSS max-width: 100% and height: auto make images scale nicely inside containers. This improves loading speed and image clarity on different devices. Always combine HTML attributes and CSS for best responsive results.