We use analytics cookies.We use cookies to analyze site traffic and improve your experience.
Loading...
System Design Masterclass · Web Content Delivery
Free preview: the first 2 parts of this 7-part lesson.
Already bought the course? Sign in to read the whole lesson.
this lesson is part of
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design courseread the rest of this lesson in
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design coursein Web Content Delivery
This lesson is part of the full System Design Masterclass. Unlock it along with 769 other lessons for a one-time payment.
One-time payment by card or PayPal
Get Lifetime AccessOne-time payment: UPI, card or netbanking
Get Lifetime Access18 Foundation lessons are free, no payment needed. Try them now
It is easy and good
“It is really nice and good Please join the course”
A travel site served the same 4000px-wide hero image to every device. On a 375px iPhone SE screen, the browser downloaded a 2.1MB image and then scaled it down to 375px for display. The actual pixels needed: 750px (375px times 2 for Retina density). File size at 750px: 120KB. The phone downloaded 17x more data than it needed for identical visual results.
Multiply that by 20 images on a category page, and mobile users on that site downloaded 40MB of image data that should have been 2.4MB.
Responsive images fix this by giving the browser a menu of sizes and letting it pick the right one. A phone picks the small version. A desktop picks the large version. A 4K display picks the extra-large version. Each device downloads exactly what it needs.
The srcset attribute lists available image files and their widths. The sizes attribute tells the browser how wide the image will be at each breakpoint. The browser does the math.
<img
srcset="hero-400.webp 400w,
hero-800.webp 800w,
hero-1200.webp 1200w,
hero-2400.webp 2400w"
sizes="(max-width: 640px) 100vw,
(max-width: 1024px) 50vw,
33vw"
src="hero-800.webp"
alt="Mountain landscape"
width="1200"
height="800"
>
How the browser decides:
| Device | Viewport | DPR | sizes Value | Needed Width | Picks |
|---|---|---|---|---|---|
| iPhone SE | 375px | 2x | 100vw = 375px | 750px | hero-800.webp |
| iPad Air | 820px | 2x | 50vw = 410px | 820px | hero-800.webp |
| Laptop | 1440px | 1x | 33vw = 475px | 475px | hero-400.webp |
| 4K Monitor | 2560px | 2x | 33vw = 845px | 1690px | hero-2400.webp |
The browser factors in both viewport width and device pixel ratio (DPR). A Retina display needs 2x the CSS pixels. A 3x display (some Android phones) needs 3x. The sizes attribute gives the CSS width. The browser multiplies by DPR to find the optimal image.
The src fallback is for browsers that do not understand srcset (practically none in 2024, but good practice). Use the medium size as the fallback.