Why Does My Product Photo Use the Wrong Crop at One Screen Size Even Though I Uploaded Both Versions?

Confirm Which Image the Browser Selected

The picture element permits zero or more source elements followed by one img element. Sources can provide media conditions, supported image types and srcset candidates. An img fallback is still required; simply uploading extra files does not create the markup or theme configuration.

The browser evaluates source elements in order. When a source condition does not match, it continues to the next candidate. If no source qualifies, the img element provides the fallback image.

Inspect the img element’s currentSrc property to identify the full URL selected by the browser. MDN explicitly says this value does not establish that the image loaded successfully. If the picture is missing rather than incorrectly framed, check the resource response too; a selected URL is not a successful-load receipt.

Decision branch: If currentSrc points to the wrong composition, inspect source order, media conditions, type support, and srcset. If it identifies the correct composition, investigate the display box.

Separate Art Direction From CSS Cropping

Art direction means providing different compositions for different display situations. A narrow-screen product image might deliberately show more space above a model's hat, while a wide-screen version emphasizes surrounding merchandise.

Even when the correct image is selected, CSS can crop its visible content. The selected resource is rendered through the img element, so object-fit and object-position belong on img rather than picture.

Check the img box dimensions, object-fit behavior, and object-position before replacing an otherwise correct file.

Decision branch: If currentSrc is correct but the hat disappears, fix the image framing or CSS positioning. If currentSrc is wrong, correct responsive source selection first.

Distinguish Resolution Candidates From Composition Choices

Srcset can provide candidates with different pixel densities or intrinsic widths. Higher-density candidates are useful for resolution selection, but they do not automatically solve an unsuitable composition.

The sizes attribute applies when srcset uses width descriptors such as 640w. It describes the intended display size used during candidate selection.

Do not combine width descriptors and pixel-density descriptors such as 2x within the same srcset candidate list.

A higher-resolution version of an incorrectly framed photograph remains incorrectly framed. Inspect source selection and CSS before changing resolution.

Illustrative Exercise: Two Responsive Product Inputs

Illustrative exercise — hypothetical webpage configurations, not executed browser tests. Input A has correctly configured portrait and landscape candidates, but CSS crops the model's hat. Input B has both files available, yet the mobile media condition selects the landscape image.

For Input A, inspect currentSrc, confirm the intended portrait file, then examine img dimensions, object-fit, and object-position.

For Input B, inspect currentSrc and the source media conditions. Correct the selection logic before adjusting the display box.

Review both layouts at their intended screen sizes. Accept the result only when the selected composition and visible framing are both correct.

Illustrative Exercise — Responsive Source Selection Versus Display-Box Cropping

These are illustrative exercise rows. Save a copy and record your own observations; the example is not an executed acceptance test.

Download review worksheet (CSV)