Responsive images in Bootsrap - Performance & Optimization

Performance: Responsive images

HIGH IMPACT

Responsive images affect page load speed by delivering appropriately sized images for different screen sizes, reducing data usage and improving loading times.

Serving images that fit the user's device screen size

Bootsrap

<img src="small-image.jpg" srcset="small-image.jpg 480w, medium-image.jpg 768w, large-image.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1200px" class="img-fluid" alt="Example image">

Browser selects the best image size for the device, reducing download size and speeding up load.

📈 Performance GainReduces image download size by up to 80% on small devices; improves LCP

Serving images that fit the user's device screen size

Bootsrap

<img src="large-image.jpg" class="img-fluid" alt="Example image">

Loads a large image on all devices, wasting bandwidth and slowing down load times on small screens.

📉 Performance CostBlocks rendering longer due to large image download; increases LCP time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large image for all devices	Minimal	1 reflow on image load	High due to large image decode	[X] Bad
Responsive images with srcset and sizes	Minimal	1 reflow on image load	Lower due to smaller image decode	[OK] Good

Rendering Pipeline

Responsive images reduce the time spent in the loading and painting stages by delivering smaller image files tailored to the device's screen size.

→Network Loading

→Layout

→Paint

⚠️ BottleneckNetwork Loading due to large image files

Core Web Vital Affected

LCP

Responsive images affect page load speed by delivering appropriately sized images for different screen sizes, reducing data usage and improving loading times.

Optimization Tips

1Always use srcset and sizes attributes to serve images tailored to screen size.

2Avoid loading large images on small devices to reduce load time and data usage.

3Test responsive images by resizing the browser and checking image file sizes in DevTools.

Performance Quiz - 3 Questions

What is the main performance benefit of using responsive images with srcset?

A It delays image loading until user interaction.

B It automatically compresses images on the server.

C Loading smaller images on small screens reduces data usage and speeds up page load.

D It increases image quality on all devices.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by Images, and check the size of images loaded on different screen widths.

What to look for: Look for smaller image file sizes on smaller screen widths indicating responsive images are working.

Practice

1. What does the Bootstrap class img-fluid do to an image?

easy

A. Changes the image to grayscale

B. Adds a border around the image

C. Makes the image scale automatically to fit its container

D. Rotates the image 90 degrees

Solution

1. Step 1: Understand the purpose of img-fluid

   The img-fluid class in Bootstrap applies CSS styles that make the image responsive by setting its max-width to 100% and height to auto. This means the image will scale to fit the width of its container without distortion.

2. Final Answer:

   Makes the image scale automatically to fit its container -> Option C

3. Quick Check:

   Responsive images = img-fluid scales image [OK]

Hint: Remember img-fluid means image fits container width [OK]

Common Mistakes:

• Thinking img-fluid adds borders or effects
• Confusing img-fluid with image rotation or filters
• Assuming img-fluid fixes image height only

2. Which of the following is the correct way to make an image responsive in Bootstrap?

easy

A. <img src='photo.jpg' class='responsive' alt='Photo'>

B. <img src='photo.jpg' class='img-fluid' alt='Photo'>

C. <img src='photo.jpg' class='img-responsive' alt='Photo'>

D. <img src='photo.jpg' class='fluid-img' alt='Photo'>

Solution

1. Step 1: Recall Bootstrap's responsive image class

   Bootstrap 4 and later uses img-fluid to make images responsive, not img-responsive or other variants. <img src='photo.jpg' class='img-fluid' alt='Photo'> uses the correct class with proper HTML syntax and includes alt text for accessibility.

2. Final Answer:

   <img src='photo.jpg' class='img-fluid' alt='Photo'> -> Option B

3. Quick Check:

   Bootstrap responsive image class = img-fluid [OK]

Hint: Use img-fluid class exactly for responsive images [OK]

Common Mistakes:

• Using outdated class img-responsive
• Misspelling the class name
• Omitting alt attribute

3. What will be the visual result of this code snippet?

<div style='width: 200px;'>
  <img src='image.jpg' class='img-fluid' alt='Sample Image'>
</div>

medium

A. The image will overflow outside the 200px container

B. The image will be hidden because of container size

C. The image will be fixed size ignoring container width

D. The image will be exactly 200px wide, scaling height proportionally

Solution

1. Step 1: Analyze container and img-fluid effect

   The container div has a fixed width of 200px, so the image inside cannot be wider than this. The img-fluid class sets max-width to 100%, so the image scales down to fit the container width (200px) and height adjusts automatically to keep aspect ratio.

2. Final Answer:

   The image will be exactly 200px wide, scaling height proportionally -> Option D

3. Quick Check:

   img-fluid scales image to container width [OK]

Hint: img-fluid limits image width to container max-width [OK]

Common Mistakes:

• Thinking image ignores container width
• Assuming image overflows container
• Confusing fixed size with responsive scaling

4. Identify the error in this Bootstrap image code:

<img src='pic.jpg' class='img-fluid'>

medium

A. Missing alt attribute for accessibility

B. Wrong class name, should be img-responsive

C. Image source file extension is incorrect

D. img-fluid class cannot be used on img tags

Solution

1. Step 1: Validate class and attributes

   The class img-fluid is correctly used on the <img> tag to make the image responsive. However, the alt attribute is missing, which is important for accessibility and SEO.

2. Final Answer:

   Missing alt attribute for accessibility -> Option A

3. Quick Check:

   Always include alt text on images [OK]

Hint: Always add alt text to images for accessibility [OK]

Common Mistakes:

• Ignoring alt attribute importance
• Using outdated class img-responsive
• Thinking img-fluid is invalid on img

5. You want an image to be responsive but never exceed 300px width even on large screens. Which Bootstrap and CSS combination achieves this?

hard

A. <img src='img.jpg' class='img-fluid' style='max-width: 300px;' alt='Image'>

B. <img src='img.jpg' class='img-fluid' style='width: 300px;' alt='Image'>

C. <img src='img.jpg' class='img-responsive' style='max-width: 300px;' alt='Image'>

D. <img src='img.jpg' style='max-width: 300px;' alt='Image'>

Solution

1. Step 1: Combine responsive class and CSS limit

   The img-fluid class makes the image scale with its container responsively. Adding style='max-width: 300px;' ensures it never grows wider than 300px even on large screens. Other options use fixed width (loses responsiveness below 300px), outdated class, or lack responsive class.

2. Final Answer:

   <img src='img.jpg' class='img-fluid' style='max-width: 300px;' alt='Image'> -> Option A

3. Quick Check:

   img-fluid + max-width limits size responsively [OK]

Hint: Combine img-fluid with max-width CSS to limit size [OK]

Common Mistakes:

• Using fixed width instead of max-width
• Using outdated img-responsive class
• Omitting img-fluid for responsiveness