How responsive images work
An image tag normally points at one file, and every visitor gets it — a phone on mobile data downloads exactly the same picture as a wide desktop monitor. Responsive images replace that single choice with a menu.
The srcset attribute lists several versions of the same picture and states how wide each one is. The sizes attribute then tells the browser how wide the image will actually be drawn in the layout, which the browser cannot know before the stylesheet loads. With both, the browser picks the smallest file that will still look sharp on that screen, and it does so before it starts downloading.
The picture element goes a step further. Instead of choosing between sizes of the same photo, it lets you offer genuinely different files: a modern format with a fallback, or a tightly cropped version for narrow screens where the wide original would show nothing but background. Most content management systems, WordPress included, generate the size variants and the srcset markup for uploaded images automatically.
Why responsive images matter
Because a desktop-sized photograph on a phone is pure waste. The pixels are downloaded, paid for in data and time, then thrown away as the browser scales the picture down. On a mid-range phone over mobile data — how most visitors to a Nepali business site arrive — that waste is often the single biggest cause of a slow page.
It also protects the moment that gets measured. If the biggest element on the first screen is a photo, the page is not considered loaded until that photo appears, so handing a phone a smaller file directly improves what a speed report shows and, more usefully, what the visitor feels.
Common mistakes with responsive images
The most common is leaving sizes at its default while the layout is narrow. The browser then assumes the image spans the full width of the screen, chooses a version far larger than the column it sits in, and the markup that was meant to save data quietly wastes it.
The second is offering versions that are all too large, or all too similar, so there is nothing genuinely small for a phone to choose. The third is reaching for the picture element when srcset alone would do; art direction and format fallbacks justify it, ordinary photographs do not, and the extra markup is one more thing to maintain.
How to act on it
Let your CMS generate the variants, then check what it actually chose. Open the page on a phone, or in a narrow browser window with the network panel visible, and look at which file was downloaded — if a phone pulled the widest version, your sizes value is wrong, not your images.
Set the sizes value from the real layout: the width of the content column, the width of a card in a grid, the full screen only when the image truly is full width. Combine this with the rest of image optimisation — sensible dimensions, honest compression, a modern format — because responsive markup chooses between the files you gave it and cannot improve any of them.