A desktop image on a phone is bytes the user paid for and never saw
The most common image mistake is serving one large file to everyone and letting the browser shrink it. The shrinking is free; the download was not. A phone on a metered connection paid for every byte of a banner sized for a desktop, then threw most of them away. Responsive images fix this by letting each device fetch a file sized for the slot it will fill.
Let the browser choose with srcset and sizes
You offer the browser several widths of the same image and a description of how big the slot is at each breakpoint. The browser does the arithmetic, slot width times device pixel ratio, and downloads the smallest candidate that still looks sharp.
<img
src="/cdn?url=hero.png&w=800"
srcset="/cdn?url=hero.png&w=320 320w,
/cdn?url=hero.png&w=640 640w,
/cdn?url=hero.png&w=1024 1024w"
sizes="(min-width: 1024px) 470px, 92vw"
loading="lazy"
decoding="async"
alt="" />
A phone whose slot is 92 of the viewport picks a small candidate; a desktop whose slot is a fixed 470 pixels picks a larger one. Neither downloads bytes it will not show.
Let the CDN handle format and resizing
Put an image CDN in front of the original. Request a width and the CDN renders exactly that width, and it negotiates a modern format, AVIF or WebP, from each browser's own headers. You store one source file; every device gets an appropriately sized copy in the best format it supports, with no second copy to manage.
Width only means no surprise cropping
Pass a width alone and the CDN scales proportionally, so the whole image stays visible. Cropping should be a deliberate choice you make with object fit on a fixed ratio box, not an accident of the URL. On this platform that distinction matters: product thumbnails of varied shapes render in full, while banner art is intentionally cropped to a banner ratio. Same pipeline, different intent.
Measure the win
This is not a micro optimization. Routing a near megabyte source image through the CDN at a phone sized width turned it into a few tens of kilobytes, a reduction north of ninety percent, with no visible quality loss. For a user on a slow connection that is the difference between a page that loads and a page they abandon, and reach is the entire reason to care.