Photography with responsive layouts in mind

A photograph that works in a wide hero may fail in a narrow card. Planning the image system alongside the layout prevents awkward crops later.

Map the image roles

List the compositions the site needs, including mobile and detail views. Identify where text will sit and which subjects must remain visible. A role-based shot list gives production a clearer purpose.

Allow space around the subject

Leave enough breathing room for different aspect ratios. Keep important faces, hands and product details away from fragile edges. Review crops in the actual components before approving the final set.

Deliver a maintainable library

Retain the edited masters, record usage rights and provide descriptive names. Export appropriate sizes and formats, and write useful alternative text for images that communicate information.

Before the shoot, place a rough image into the desktop hero and phone card. If both crops require the subject in a different position, plan two compositions instead of hoping one master will cover every role.