Responsive images in CSS - 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 rendering time.

Delivering images optimized for different screen sizes

CSS

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

Browser picks the best image size for the device, reducing file size and load time.

📈 Performance GainReduces LCP by loading smaller images on small screens, saves bandwidth

Delivering images optimized for different screen sizes

CSS

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

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

📉 Performance CostBlocks rendering longer, increases LCP, wastes data on mobile

Performance Comparison

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

Rendering Pipeline

Responsive images reduce the amount of data the browser downloads and decode, speeding up Style Calculation, Layout, and Paint stages.

→Network Loading

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork Loading and Paint due to large image decoding

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 rendering time.

Optimization Tips

1Always use srcset and sizes attributes for images to enable responsive loading.

2Provide multiple image resolutions to match different screen widths.

3Test image sizes loaded on various devices using browser DevTools Network panel.

Performance Quiz - 3 Questions

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

A It delays image loading until user scrolls

B It increases the number of images loaded to improve quality

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

D It forces all devices to load the largest image

DevTools: Network

How to check: Open DevTools, go to Network panel, reload page, filter by Images, check image sizes loaded on different screen widths using device toolbar.

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