Responsive images in Bootsrap - Browser Rendering Trace

Render Flow - Responsive images

Load HTML document

↓

Parse <img> tag with srcset and sizes

↓

Evaluate viewport width

↓

Select best image source from srcset

↓

Download chosen image

↓

Render image in layout

↓

Apply CSS classes (e.g., img-fluid)

↓

Adjust image size responsively

The browser reads the image tag with multiple sources, picks the best image based on screen size, downloads it, and then applies Bootstrap's responsive classes to scale the image fluidly.

Render Steps - 3 Steps

Code Added:<img src="small.jpg" alt="Sample responsive image">

Before

[Empty page]

→

After

[small.jpg image displayed at natural size]
[Image box with fixed width and height]

Adding a simple image tag shows the image at its original size.

🔧 Browser Action:Creates image element, downloads small.jpg, paints image at natural size

Code Sample

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

Bootsrap

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 480px, 800px" class="img-fluid" alt="Sample responsive image">

Bootsrap

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

Render Quiz - 3 Questions

After applying step 2, what determines which image source the browser downloads?

A The viewport width and the sizes attribute

B The img-fluid CSS class

C The alt attribute text

D The order of images in srcset

Common Confusions - 3 Topics

Why does my image not resize on smaller screens even with img-fluid?

If the image's container has a fixed width or no responsive layout, img-fluid can't scale the image smaller. The container must be flexible or smaller for the image to shrink.

💡 Make sure the image's parent container can shrink; img-fluid only scales image within container size.

Why is the browser downloading the largest image even on small screens?

If the sizes attribute is missing or incorrect, the browser assumes a large display size and picks the largest image from srcset.

💡 Always provide accurate sizes attribute to help browser pick the right image.

Why does the image look blurry on high-resolution screens?

If srcset doesn't include higher resolution images (like 2x), the browser uses a lower resolution image stretched to fit, causing blur.

💡 Include images with higher pixel density descriptors (e.g., 2x) in srcset for sharpness on retina screens.

Property Reference

Property	Value Applied	Effect	Common Use
src	URL	Default image source if no srcset matches	Basic image display
srcset	List of images with widths	Allows browser to pick best image for screen size	Responsive images
sizes	Media conditions and image display sizes	Guides browser on image display size for source selection	Responsive images
class	img-fluid	Sets max-width: 100% and height: auto for fluid scaling	Bootstrap responsive images

Concept Snapshot

Responsive images use srcset and sizes attributes to let the browser pick the best image for the screen size. Bootstrap's img-fluid class applies max-width: 100% and height: auto to scale images fluidly. Without sizes, browser picks largest image by default. Containers must be flexible for images to resize properly. Include high-res images in srcset for sharpness on retina screens.