Serve the same 2000-pixel-wide hero image to a phone screen 400 pixels across, and you've just made that visitor download five times more data than their screen can even display. It's one of the more common and most fixable sources of slow mobile load times, and the fix has been sitting in the HTML spec for years: the srcset and sizes attributes on the humble <img> tag.
The Problem With a Single Image Source
A plain 
tag gives the browser exactly one option: download that file, full size, no matter what device is asking for it. For years that was simply how images worked on the web, and it meant designers had to pick a single compromise size — usually erring toward big enough to look good on desktop, which left mobile visitors paying the bandwidth cost for detail their screen couldn't even render.
What srcset Actually Solves
The srcset attribute lets you offer the browser a menu of the same image at several different resolutions, and the browser picks whichever one actually fits the space and screen density it's rendering into. A typical setup might offer a 400px, 800px, and 1600px version of the same photo, and a phone will quietly grab the smallest one that still looks sharp on its screen, while a high-resolution desktop monitor grabs a larger version — all without any extra JavaScript or manual device detection.
Where sizes Comes In
The sizes attribute communicates how much space the image will actually occupy in your specific layout until the CSS is parsed. That's what the sizes attribute communicates — a hint like "this image will take up the full viewport width on mobile, but only half the viewport on desktop." Combined, srcset and sizes let the browser make a genuinely informed choice about which file to download, before it even starts laying out the page.
Building the Actual Image Set
The tricky part in practice isn't the HTML — it's generating three or four correctly sized versions of every image on your site, and keeping them in sync whenever the source photo changes. Doing that by hand for a site with hundreds of images is genuinely painful. Batch resizing tools, including browser-based ones like easypixelshift.com, make it realistic to generate a full set of responsive sizes from a single source image without opening a desktop editor for each one.
A Small Real-World Example
A typical responsive image tag ends up looking something like this: multiple width-described sources in srcset, paired with a sizes attribute describing the layout at different breakpoints. It looks more complicated than a plain <img> tag, but the payoff is real — mobile visitors get an appropriately small file, desktop visitors get full detail, and nobody downloads more than they actually need.
It's a bit of extra setup for something that used to be a single attribute, but the tradeoff is genuinely worth it. Serving the right image size to the right device is one of the more reliable ways to shave real time off a page's load, and it costs nothing in visual quality to get there.