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.