A Responsive Picture Can Use a Different Image on a Narrow Screen

Illustration of generic cables and devices arranged on a violet desk
AI-generated conceptual illustration, not a product photograph or software screenshot.

A photograph on a phone may show a tighter composition than the version on a desktop page. A website can deliberately offer different image sources instead of merely shrinking one file.

Distinguish source choice from display size

The HTML picture element can provide alternatives for conditions such as viewport size or supported image format, with an img element as the fallback. This supports choices often described as art direction.

If you are checking your own page, compare the source actually selected by the browser with the image’s displayed dimensions. A smaller box does not by itself prove that a smaller or differently cropped source was downloaded.

Keep the subject understandable

When preparing alternatives, preserve the part of the image that carries the article’s meaning. A crop that removes the relevant object may look tidy while weakening the content.

Review both wide and narrow layouts after the sources are in place. The goal is not simply to make the picture fit; it is to make the chosen image useful in its available space. A clear source strategy can improve composition and loading behaviour, but the actual result still needs to be checked in the browser.